@extends('layouts.app')

@section('title', 'Product List')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">Dashboard</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                    <li class="breadcrumb-item active">Product</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="row mb-none-30">
    <div class="col-lg-12 mb-30">
        <div class="card shadow-sm">
            <div class="card-header">
                <h4 class="card-title">{{ $pageTitle }}</h4>
                <a href="{{ route('product.create') }}" class="btn btn-sm btn-primary box-shadow1 text-small float-end">
                    <i class="las la-plus"></i> @lang('Add Product')
                </a>
            </div>
            <div class="card-body">
                @if ($datalist->isEmpty())
                    <div class="alert alert-info text-center">
                        @lang('No products found.')
                    </div>
                @else
                    <div class="table-responsive">
                        <table  id="datatable-buttons" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>@lang('Category')</th>
                                    
                                    <th>@lang('ASIN')</th>
                                    <th>@lang('Manufacturer')</th>
                                    <th>@lang('Part Number')</th>
                                    <th>@lang('Source Link')</th>
                                    <th>@lang('Status')</th>
                                    <th>@lang('Actions')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($datalist as $product)
                                    <tr>
                                         <td>{{$product->formatted_chapter }}</td>
                                        <td>{{ $product->asin }}</td>
                                        <td>{{ $product->manufacturer ?? 'N/A' }}</td>
                                        <td>{{ $product->part_number ?? 'N/A' }}</td>
                                        <td>
                                            @if ($product->source_link)
                                                <a href="{{ $product->source_link }}" target="_blank" class="text-primary">@lang('Link')</a>
                                            @else
                                                @lang('N/A')
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge {{ $product->status ? 'badge-success' : 'badge-danger' }}">
                                                {{ $product->status ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td>
                                            <a href="{{ route('product.edit', $product->id) }}" class="btn btn-sm btn-warning">
                                                <i class="las la-edit"></i> @lang('Edit')
                                            </a>
                                            <form action="{{ route('product.delete', $product->id) }}" method="POST" style="display: inline-block;" onsubmit="return confirm('@lang('Are you sure you want to delete this product?')');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger">
                                                    <i class="las la-trash"></i> @lang('Delete')
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4">
                        {{ $datalist->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('breadcrumb-plugins')
<div class="d-flex justify-content-between align-items-center">
    <h3>@lang('Dashboard / Product List')</h3>
</div>
@endpush

@push('style')
<style>
    .table th, .table td {
        vertical-align: middle;
    }
    .badge-success {
        background-color: #28a745;
    }
    .badge-danger {
        background-color: #dc3545;
    }
    .btn-sm {
        padding: 0.25rem 0.5rem;
    }
    .card {
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
</style>
@endpush

@push('style')
<link rel="stylesheet" href="{{ asset('assets/admin/css/datatables.min.css') }}">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<style>
    /* Card and Header Styling */
    .card {
        border: none;
        border-radius: 8px;
    }
    .card-header {
        border-bottom: 1px solid #e9ecef;
        padding: 1.5rem;
    }
    .card-title {
        font-size: 1.5rem;
        font-weight: 600;
    }

    /* DataTable Styling */
    .table {
        font-size: 0.9rem;
    }
    .table th, .table td {
        vertical-align: middle;
        padding: 0.75rem;
    }
    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }
    .table-light th {
        background-color: #f1f3f5;
        font-weight: 600;
        color: #343a40;
    }

    /* Search Bar */
    div.dataTables_wrapper div.dataTables_filter {
        text-align: right;
        margin-bottom: 1rem;
        display: block !important;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        border: 1px solid #ced4da;
        border-radius: 4px;
        padding: 0.375rem 0.75rem;
        width: 200px;
        margin-left: 0.5rem;
        display: inline-block !important;
        transition: border-color 0.2s;
    }
    div.dataTables_wrapper div.dataTables_filter input:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }
    div.dataTables_wrapper div.dataTables_filter label {
        font-weight: 500;
        color: #495057;
        display: inline-block !important;
    }

    /* Length Menu */
    div.dataTables_wrapper div.dataTables_length {
        margin-bottom: 1rem;
    }
    div.dataTables_wrapper div.dataTables_length select {
        border: 1px solid #ced4da;
        border-radius: 4px;
        padding: 0.375rem 0.75rem;
        display: inline-block;
        width: auto;
    }

    /* Export Buttons */
    .dt-buttons {
        margin-bottom: 1rem;
        display: block !important;
    }
    .dt-buttons .btn {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
        border-radius: 4px;
        transition: all 0.2s;
    }
    .dt-buttons .btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }
    .dt-buttons .btn i {
        margin-right: 0.25rem;
    }

    /* Pagination */
    div.dataTables_wrapper div.dataTables_paginate {
        margin-top: 1rem;
        display: block !important;
    }
    .dataTables_paginate .pagination {
        justify-content: flex-end;
    }
    .dataTables_paginate .page-item.active .page-link {
        background-color: #007bff;
        border-color: #007bff;
        color: #fff;
    }
    .dataTables_paginate .page-link {
        color: #007bff;
        border-radius: 4px;
        margin: 0 2px;
        padding: 0.375rem 0.75rem;
    }
    .dataTables_paginate .page-link:hover {
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

    /* Action Buttons */
    .confirmationBtn i, .btn-warning i {
        margin-right: 0.25rem;
    }
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Badge Styling */
    .badge {
        font-weight: 500;
        font-size: 0.75rem;
    }
</style>
@endpush

@push('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
<script src="{{ asset('assets/admin/js/datatables.min.js') }}"></script>
<script>
    (function($) {
        "use strict";

        // Initialize DataTable with searching and buttons enabled
        $('#datatable-buttons').DataTable({
            responsive: true,
            dom: '<"row"<"col-12"B>><"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            buttons: [
                {
                    extend: 'copy',
                    className: 'btn btn-outline-primary',
                    text: '<i class="las la-copy"></i> Copy',
                    title: 'Employee Categories'
                },
                {
                    extend: 'csv',
                    className: 'btn btn-outline-primary',
                    text: '<i class="las la-file-csv"></i> CSV',
                    title: 'Employee Categories'
                },
                {
                    extend: 'excel',
                    className: 'btn btn-outline-primary',
                    text: '<i class="las la-file-excel"></i> Excel',
                    title: 'Employee Categories'
                },
                {
                    extend: 'pdf',
                    className: 'btn btn-outline-primary',
                    text: '<i class="las la-file-pdf"></i> PDF',
                    title: 'Employee Categories',
                    customize: function(doc) {
                        doc.content[1].table.widths = ['30%', '30%', '20%', '20%'];
                        doc.styles.tableHeader.fontSize = 12;
                        doc.pageMargins = [40, 60, 40, 60];
                        doc.defaultStyle.fontSize = 10;
                    }
                },
                {
                    extend: 'print',
                    className: 'btn btn-outline-primary',
                    text: '<i class="las la-print"></i> Print',
                    title: 'Employee Categories'
                }
            ],
            searching: true,
            ordering: true,
            pageLength: 10,
            language: {
                searchPlaceholder: "Search",
                search: ""
            },
            initComplete: function() {
                // Ensure search bar, buttons, and pagination are visible
                $('.dataTables_filter').show();
                $('.dt-buttons').show();
                $('.dataTables_paginate').show();
                console.log('DataTable initialized with buttons and pagination');
            }
        });

        // Handle delete confirmation
        $(document).on('click', '.confirmationBtn', function() {
            var question = $(this).data('question');
            var action = $(this).data('action');
            if (confirm(question)) {
                $.ajax({
                    url: action,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    },
                    success: function(response) {
                        location.reload();
                    },
                    error: function(xhr) {
                        alert('Failed to delete. Error: ' + (xhr.responseJSON?.message || 'Unknown error'));
                    }
                });
            }
        });
    })(jQuery);
</script>
@endpush