@extends('admin.layouts.master')
@section('title', 'Product list')
@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="content-header">
                        <div class="container-fluid">
                            <div class="row">
                            </div><!-- /.row -->
                        </div><!-- /.container-fluid -->
                    </div>
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">{{ __('Search Inventory') }}</h3>
                        </div>
                        <div class="card-body">
                            <div class="col-lg-12">
                                <form id="searchForm">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="product_id" class="form-label">Product Name</label>
                                                <select class="form-control select2" name="product_id" id="product_id"
                                                    multiple>
                                                    <option value="">Select Product</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="brand_id" class="form-label">Brand Name</label>
                                                <select class="form-control select2" name="brand_id" id="brand_id" multiple>
                                                    <option value="">Select Brand</option>
                                                    @foreach ($brands as $brand)
                                                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="category_id" class="form-label">Category Name</label>
                                                <select class="form-control select2" name="category_id" id="category_id"
                                                    multiple>
                                                    <option value="">Select Category</option>
                                                    @foreach ($subCategories as $category)
                                                        <option value="{{ $category->id }}">
                                                            {{ $category->sub_category_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="status" class="form-label">Status</label>
                                                <select class="form-control select2" name="status" id="status" multiple>
                                                    <option value="">Select Status</option>
                                                    <option value="1">Published</option>
                                                    <option value="0">Draft</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline mt-3">
                        <div class="card-header">
                            <h3 class="card-title mt-1"><b>{{ __('List of Product') }}</b></h3>
                            <div class="card-tools d-flex">
                                <a href="{{ route('admin.brand.add') }}" class="btn btn-danger btn-sm mx-1">
                                    <i class="fas fa-plus"></i> {{ __('Add Brand') }}
                                </a>
                                <a href="{{ route('admin.category.add') }}" class="btn btn-success btn-sm mx-1">
                                    <i class="fas fa-plus"></i> {{ __('Add Category') }}
                                </a>
                                <a href="{{ route('admin.subcategory.add') }}" class="btn btn-warning btn-sm mx-1">
                                    <i class="fas fa-plus"></i> {{ __('Add Sub-Category') }}
                                </a>
                                <a href="{{ route('admin.product.add') }}" class="btn btn-primary btn-sm mx-1">
                                    <i class="fas fa-plus"></i> {{ __('Add Product') }}
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-sm" id="products-table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('#') }}</th>
                                            <th>{{ __('ENA No') }}</th>
                                            <th>{{ __('Sub Category') }}</th>
                                            <th>{{ __('Product Name') }}</th>
                                            <th>{{ __('Brand') }}</th>
                                            <th>{{ __('Stock') }}</th>
                                            <th>{{ __('Threshold') }}</th>
                                            <th>{{ __('Price') }}</th>
                                            <th>{{ __('Status') }}</th>
                                            <th>{{ __('Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

@endsection

@section('js')



    <script>
        $(document).ready(function () {
            var table = $('#products-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.product.index') }}",
                    type: 'GET',
                    data: function (d) {
                        d.product_id = $('#product_id').val();
                        d.brand_id = $('#brand_id').val();
                        d.category_id = $('#category_id').val();
                        d.status = $('#status').val();
                        console.log(d); // Debug: Log the data being sent
                    }
                },
                columns: [
                    { data: null, defaultContent: '', orderable: false, searchable: false },
                    { data: 'qrcode', name: 'qrcode', defaultContent: '-' },
                    { data: 'sub_category.sub_category_name', name: 'subCategory.sub_category_name', defaultContent: 'N/A' },
                    { data: 'name', name: 'name', defaultContent: '-' },
                    { data: 'brand.name', name: 'brand.name', defaultContent: 'N/A' },
                    { data: 'quantity', name: 'quantity', defaultContent: '0' },
                    { data: 'threshold', name: 'threshold', defaultContent: '0' },
                    { data: 'unit_price', name: 'unit_price', defaultContent: '0' },
                    { data: 'status', name: 'status', defaultContent: '-' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: 'Export to Excel',
                        title: 'Products Export',
                        className: 'btn btn-success btn-sm',
                        action: function (e, dt, node, config) {
                            // Get current filter values
                            var filters = {
                                product_id: $('#product_id').val(),
                                brand_id: $('#brand_id').val(),
                                category_id: $('#category_id').val(),
                                status: $('#status').val(),
                                search: $('#products-table_filter input').val(),
                                _token: '{{ csrf_token() }}'
                            };

                            // Submit form with filters
                            $('<form>', {
                                method: 'post',
                                action: '{{ route("admin.product.export") }}',
                                html: $.map(filters, function (value, key) {
                                    if (Array.isArray(value)) {
                                        return value.map(function (v) {
                                            return $('<input>', {
                                                type: 'hidden',
                                                name: key + '[]',
                                                value: v
                                            });
                                        });
                                    }
                                    return $('<input>', {
                                        type: 'hidden',
                                        name: key,
                                        value: value
                                    });
                                })
                            }).appendTo('body').submit().remove();
                        },
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8] // Export all columns except actions
                        }
                    }
                ],
                order: [[5, 'desc']],
                pageLength: 50,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ]
            });

            // Apply filters when select values change
            $('#product_id, #brand_id, #category_id, #status').on('change', function () {
                console.log('Filter changed:', {
                    product_id: $('#product_id').val(),
                    brand_id: $('#brand_id').val(),
                    category_id: $('#category_id').val(),
                    status: $('#status').val()
                });
                table.ajax.reload();
            });

            // Handle verify/unverify actions
            $(document).on('click', '.verify-update, .unverify-update', function () {
                var id = $(this).data('id');
                var button = $(this);
                var isVerify = button.hasClass('verify-update');
                var updateUrl = isVerify ?
                    "{{ route('admin.product.verify', ':id') }}" :
                    "{{ route('admin.product.unverify', ':id') }}";
                updateUrl = updateUrl.replace(':id', id);

                $.ajax({
                    url: updateUrl,
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                    },
                    success: function (response) {
                        if (response.success) {


                            // Update the button without reloading the page
                            var btnGroup = button.closest('.btn-group');
                            if (isVerify) {
                                Swal.fire({
                                    icon: response.alert,
                                    title: 'Product Verification',
                                    text: "Product has been Unverified.",
                                    confirmButtonColor: "#3085d6"
                                });
                                button.remove();
                                btnGroup.append(`
                                        <button class="btn btn-secondary btn-sm unverify-update" data-id="${id}">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    `);
                            } else {
                                Swal.fire({
                                    icon: response.alert,
                                    title: 'Product Verification',
                                    text: "Product has been Verified.",
                                    confirmButtonColor: "#3085d6"
                                });
                                button.remove();
                                btnGroup.append(`
                                        <button class="btn btn-warning btn-sm verify-update" data-id="${id}">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    `);
                            }
                        } else {
                            toastr.error("Action failed. Please try again.");
                        }
                    },
                    error: function () {
                        toastr.error("Something went wrong!");
                    }
                });
            });
        });
    </script>
@endsection