@extends('layouts.tenant.master')
@section('title', 'Product Menu')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/datatables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/datatable-extension.css') }}">
<!-- <style>
    .pagination-container .pagination {
        display: inline-flex;
        justify-content: flex-end; /* Ensure pagination is aligned right */
        margin-top: 20px;  /* Adjust top margin for spacing */
    }
</style> -->

<style>
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    list-style: none;
    margin: 0;
}
.w-45{
    width: 45%
}
.w-60{
    width: 60%
}

.w-40{
    width: 40%
}
.pagination li {
    margin: 0 5px;
}
.pagination li a,
.pagination li span {
    padding: 6px 12px; /* smaller but still tap-friendly */
    font-size: 14px;
}

.pagination li a:hover,
.pagination li span:hover {
    background-color: #007bff;
    color: white;
    opacity: 0.8;
}

/* Improved Disabled State */
.pagination .disabled span,
.pagination .disabled a {
    background-color: #e9ecef;  /* Light gray background */
    color:rgb(18, 18, 19);  /* Darker gray text */
    border: 1px solid #ccc;  /* Soft border */
    cursor: not-allowed;
    opacity: 1; /* Higher visibility */
}

/* Active Page */
.pagination .active span,
.pagination .active a {
    background-color: #007bff;
    color: white;
    opacity: 2;
    font-weight: bold;
}

    </style>
@endsection

@section('style')
@endsection

@section('breadcrumb-title')
    <h2>Product <span>List</span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Product</li>
    <li class="breadcrumb-item active">List</li>
@endsection



@section('content')
  
    <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">Import product Data</h5>
                </div>
                <div class="modal-body">
                    <form action="{{ route('product.import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="userFile">Select a file to import</label>
                            <input type="file" class="form-control-file" id="userFile" name="productFile"
                                required>
                        </div>
                        <button type="submit" class="btn btn-primary">Import</button>
                    </form>
                </div>
            </div>
        </div>
    </div>  
    <div class="p-2 mt-0 row">
        <div class="col-sm-12 col-md-12 col-lg-5 d-flex justify-content-start align-items-center">{{-- <h5>Best Selling Product</h5> --}}
            <a href="{{ route('tenant_product_create') }}" class="text-white btn btn-info btn-sm m-1" >
            <i class="icofont icofont-plus"></i> Create Product
            </a>
            {{-- <a href="{{ route('tenant_deleted_products_list') }}" class="btn btn-success btn-sm m-1" >
            <i class="icofont icofont-spinner-alt-3"></i> Restore Product
            </a> --}}
            <a href="{{ url()->current() }}" class="btn btn-light btn-sm" >
            <i class="icofont icofont-refresh fa fa-spin"></i>&nbsp; Refresh
            </a>
        </div>        
        <div class="col-sm-12 col-md-12 col-lg-7">
            <div class="row mt-1">
                <div class="col-sm-12 col-md-12 col-lg-7">
                    <div class="row align-items-center mt-1">
                        <div class="col-sm-12 col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="w-60">Records per page: &nbsp;</div>
                                <div class="w-40" id="selectperPage">
                                    <select id="recordsPerPage" class="form-control form-control-sm w-100">
                                        <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>10</option>
                                        <option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>25</option>
                                        <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                                    </select>
                                </div>                                    
                            </div>
                        </div>                        
                        <div class="col-sm-12 col-md-6 mt-1">
                            <div style="input-group w-100">
                                <input  type="text" id="searchProduct" class="form-control" placeholder="Search for products...">
                            </div>
                        </div>
                    </div>                    
                </div>
                <div class="col-sm-12 col-md-12 col-lg-5 d-flex justify-content-between align-items-center mt-1">
                    <a href="{{ route('product.export') }}" class="btn btn-primary w-45 h6" >
                        <i class="text-white icofont icofont-upload-alt"></i> Export
                    </a>
                    <a href="#" class="btn btn-dark w-45 h6" data-toggle="modal" data-target="#importModal">
                        <i class="text-white icofont icofont-download-alt"></i> Import
                    </a>
                </div>
            </div>
        </div> 
    </div>


    <form method="GET" action="{{ route('tenant_product_search') }}">
        <div class="pt-0 card-body">
        <head>
            <style>
                .pagination-container {
                    text-align: right;
                    margin-top: 20px;
                }
            </style>
        </head>
            <div class="table-responsive w-100 table-sm">
                <table class="table p-0 m-0 display table-striped table-bordered table-sm" id="">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Catalog</th>
                            <th scope="col">Cabinet Section</th>
                            <th scope="col">Cabinet Label</th>
                            <th scope="col">SKU</th>
                            <th scope="col">Description</th>
                            <th scope="col">Weight</th>
                            <th scope="col">Cost</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Details</th>
                            <th scope="col">Image</th>
                            <th scope="col">Manufacture Date</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($products as $product)
                            <tr>
                                <th scope="row">{{ $product->id }}</th>
                                <!--<th>{{ $product->productCatalog->name }}</th>-->
                                <th>{{ $product->productCatalog->name ?? 'No Catalog' }}</th>
                                <th>{{ $product->productCategory->cabinets_name }}</th>
                                <td>{{ $product->label }}</td>
                                <td>{{ $product->sku }}</td>
                                <td>{{ $product->description }}</td>
                                <td>{{ $product->weight }} lbs</td>
                                <td>${{ $product->cost }}</td>
                                <td>{{ $product->assemble_cost }}</td>
                                <td>{{ $product->sku}}&nbsp;-&nbsp;{{$product->doorColor->product_label}}</td>
                                <td>{{ $product->image }}</td>
                                <td>{{ $product->manufacture_date }}</td>
                                <td>
                                    {{-- <a href="{{ route('tenant_product_show', $product->id) }}" data-toggle="tooltip"
                                        title="View details of this product">
                                        Show |
                                    </a>
                                    <a href="{{ route('tenant_product_edit', $product->id) }}" data-toggle="tooltip"
                                        title="Edit this product's information">
                                        Edit |
                                    </a>
                                    <a href="{{ route('tenant_product_destroy', $product->id) }}" data-toggle="tooltip"
                                        title="Delete this product">
                                        Delete
                                    </a> --}}
                                    <a href="{{ route('tenant_product_show', $product->id) }}" >
                                        Show |
                                    </a>
                                    <a href="{{ route('tenant_product_edit', $product->id) }}" >
                                        Edit |
                                    </a>
                                    <a href="{{ route('tenant_product_destroy', $product->id) }}">
                                        Delete
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Catalog</th>
                            <th scope="col">Cabinet Section</th>
                            <th scope="col">Cabinet Label</th>
                            <th scope="col">SKU</th>
                            <th scope="col">Description</th>
                            <th scope="col">Weight</th>
                            <th scope="col">Cost</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Details</th>
                            <th scope="col">Image</th>
                            <th scope="col">Manufacture Date</th>
                            <th scope="col">Action</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="d-flex justify-content-end">
                <div class="pagination-wrapper">
                    {{ $products->appends(request()->query())->links('pagination::bootstrap-4') }}
                </div>
            </div>            
        </div>
    </form>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    handleKeyup('searchProduct', 'label');
</script>

@if(session('error'))
<script>
    Swal.fire({
        title: '⚠️ File Type Error',
        text: "{{ session('error') }}",
        icon: 'error',
        confirmButtonText: 'OK',
        timer: 4000
    });
</script>
@endif

@if(session('success'))
<script>
    Swal.fire({
        title: '✅ Import Successful',
        text: "{{ session('success') }}",
        icon: 'success',
        confirmButtonText: 'OK',
        timer: 4000
    });
</script>
@endif

@if(session('import_errors'))
<script>
    let errorHtml = `<h4 style="color:#d9534f">The CSV file has errors. Please correct them and retry.</h4><ul style='text-align: left;'>`;

    @foreach(session('import_errors') as $error)
        errorHtml += `<li>
            <strong>Row #{{ $error['excel_row'] ?? '?' }}:</strong>
            {!! json_encode($error['error']) !!}
        </li>`;
    @endforeach

    errorHtml += `</ul>`;

    Swal.fire({
        title: '⚠️ Import Issues',
        html: errorHtml,
        icon: 'warning',
        width: '60%',
        confirmButtonText: 'OK',
        customClass: {
            htmlContainer: 'text-left'
        }
    });
</script>
@endif


    <script>
        function confirmation(ev) {
            ev.preventDefault();
            var urlToRedirect = ev.currentTarget.getAttribute('href'); // Get href value of the link
            swal({
                title: "Are you sure to delete this?",
                // text: "This action will be permanent and cannot be undone.",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    window.location.href = urlToRedirect;
                } else {
                    swal("Your data is safe!", {
                        icon: "info",
                    });
                }
            });
        }
    </script>


    <script src="{{ dynamic_url('assets/main/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.buttons.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/jszip.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.colVis.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/pdfmake.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/vfs_fonts.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.autoFill.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.select.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.html5.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/buttons.print.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.responsive.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.keyTable.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.colReorder.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.fixedHeader.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.rowReorder.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/dataTables.scroller.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/datatable/datatable-extension/custom.js') }}"></script>

@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
    integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Function to handle keyup event for search input fields
    // function handleKeyup(inputId, field) {
    //     document.getElementById(inputId).addEventListener('keyup', function() {
    //         const query = this.value.trim();

    //         if (query.length > 1) { // Start searching after 2 characters
    //             fetch(`{{ route('tenant_product_search') }}?query=${query}&field=${field}`)
    //                 .then(response => response.json())
    //                 .then(data => {
    //                     console.log(data)
    //                     // Clear the table content
    //                     const tableBody = document.querySelector('table tbody');
    //                     tableBody.innerHTML = '';

    //                     // Populate the table with filtered data
    //                     if (data.length) {
    //                         data.forEach(item => {
    //                             const row = document.createElement('tr');
    //                             row.innerHTML = `
    //                                     <td>${item.id}</td>
    //                                     <td>${item.product}</td>
    //                                     <td>${item.product_section}</td>
    //                                     <td>${item.product_label}</td>
    //                                     <td>
    //                                         <a href="/product-catalog/${item.id}/show">Show</a> |
    //                                         <a href="/product-catalog/${item.id}/edit">Edit</a> |
    //                                         <a href="javascript:void(0);" onclick="deleteCatalog(${item.id})">Delete</a>
    //                                     </td>
    //                                 `;
    //                             tableBody.appendChild(row);
    //                         });
    //                     } else {
    //                         tableBody.innerHTML = '<tr><td colspan="5">No results found</td></tr>';
    //                     }
    //                 })
    //                 .catch(error => console.error('Error fetching filtered data:', error));
    //         }
    //     });
    // }
    document.addEventListener('DOMContentLoaded', function() {
        // Event listener for records per page select dropdown
        document.getElementById('recordsPerPage').addEventListener('change', function() {
            const perPage = this.value;

            // Build the new URL with the updated 'per_page' parameter
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', perPage);

            // Redirect to the new URL to reload the page with the updated products per page
            window.location.href = url.toString();
        });
    });

    function handleKeyup(searchProduct, field) {
        document.getElementById(searchProduct).addEventListener('keyup', function() {
            const query = this.value.trim();

            if (query.length > 1) { // Start searching after 2 characters
                fetch(`{{ route('tenant_product_search') }}?query=${query}&field=${field}`)
                    .then(response => response.json())
                    .then(data => {
                        updateTable(data);
                    })
                    .catch(error => {
                        console.error('Error fetching filtered data:', error);
                    });
            } else if (query.length === 0) {
                // If the search box is empty, fetch all products
                fetchAllProducts();
            }
        });
    }

function fetchAllProducts() {
    fetch(`{{ route('tenant_product_search') }}?query=&field=label`) // Fetch all products with empty query
        .then(response => response.json())
        .then(data => {
            updateTable(data);
        })
        .catch(error => {
            console.error('Error fetching all products:', error);
        });
}

function updateTable(data) {
    const tableBody = document.querySelector('table tbody');
    if (!tableBody) {
        console.error("tableBody element not found.");
        return;
    }
    tableBody.innerHTML = ''; // Clear current rows

    // Display products in the table
    if (data.products.length > 0) {
        data.products.forEach(product => {
            console.log(product)

            const date = new Date(product.created_at);
            const formatted = date.toLocaleString('en-GB', { hour12: false }).replace(',', '');
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${product.id}</td>
                <td>${product.product_catalog_id ? product.product_catalog.name : ''}</td>
                <td>${product.product_section_id ? product.product_category.cabinets_name : ''}</td>
                <td>${product.label}</td>
                <td>${product.sku}</td>
                <td>${product.description}</td>
                <td>${product.weight} lbs</td>
                <td>$${product.cost}</td>
                <td>${product.assemble_cost}</td>
                <td>${product.door_color_id ? product.sku + " - " + product.door_color.product_label : ''}</td>
                <td>${product.image}</td>
                <td>${formatted}</td>
                <td>
                    <a href="/tenants/products/${product.id}/show">Show |</a>
                    <a href="/tenants/products/${product.id}/edit">Edit |</a>
                    <a href="/tenants/products/${product.id}/delete">Delete</a>
                </td>
            `;
            tableBody.appendChild(row);  // Append the row to the table
        });

        // Now update the pagination with the HTML from the response
        const paginationContainer = document.querySelector('.pagination-container');
        paginationContainer.innerHTML = data.pagination;  // Insert pagination HTML directly
    } else {
        tableBody.innerHTML = '<tr><td colspan="12">No results found</td></tr>';
    }
}



    // Call the handleKeyup function for all fields
    handleKeyup('product', 'product');
    handleKeyup('product_section', 'product_section');
    handleKeyup('product_label', 'product_label');
</script>