@extends("admin.template.layout")

@section("header")
    <link rel="stylesheet" type="text/css" href="{{asset('')}}admin-assets/plugins/table/datatable/datatables.css">
    <link rel="stylesheet" type="text/css" href="{{asset('')}}admin-assets/plugins/table/datatable/custom_dt_customer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <style>
        .filter-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
        }
        .export-options {
            margin-top: 20px;
            padding: 20px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }
        .section-title {
            border-bottom: 2px solid #4a5568;
            padding-bottom: 10px;
            margin-bottom: 20px;
            color: #2d3748;
            font-weight: 600;
        }
        .btn-export {
            background: #28a745;
            color: white;
            padding: 10px 30px;
            font-weight: 600;
        }
        .btn-export:hover {
            background: #218838;
            color: white;
        }
        .btn-preview {
            background: #17a2b8;
            color: white;
        }
        .btn-preview:hover {
            background: #138496;
            color: white;
        }
    </style>
@stop

@section("content")
<div class="card mb-5">
    <div class="card-header">
        <h3>{{ $page_heading }}</h3>
    </div>
    
    <div class="card-body">
        <form action="{{ route('admin.product.export.report') }}" method="GET" id="exportForm" target="_blank">
            <div class="filter-section">
                <h5 class="section-title">
                    <i class="fa fa-filter"></i> Filter Options
                </h5>
                <div class="row">
                    <!-- Category Filter -->
                    <div class="col-md-4 form-group">
                        <label><strong>Category</strong></label>
                        <select name="category" class="form-control select2" id="category">
                            <option value="">All Categories</option>
                            @foreach($categories as $id => $name)
                                <option value="{{ $id }}" {{ request('category') == $id ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Sub Category Filter -->
                    <div class="col-md-4 form-group">
                        <label><strong>Sub Category</strong></label>
                        <select name="sub_category" class="form-control select2" id="sub_category">
                            <option value="">All Sub Categories</option>
                        </select>
                    </div>

                    <!-- Product Name Filter -->
                    <div class="col-md-4 form-group">
                        <label><strong>Product Name</strong></label>
                        <input type="text" name="product_name" class="form-control" 
                               value="{{ request('product_name') }}" placeholder="Search by product name">
                    </div>

                    <!-- Vendor Filter -->
                    <div class="col-md-4 form-group">
                        <label><strong>Supplier/Vendor</strong></label>
                        <select name="vendor" class="form-control select2">
                            <option value="">All Vendors</option>
                            @foreach($vendors as $vendor)
                                <option value="{{ $vendor->id }}" {{ request('vendor') == $vendor->id ? 'selected' : '' }}>
                                    {{ $vendor->store_name ?? $vendor->first_name . ' ' . $vendor->last_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Date Range -->
                    <div class="col-md-4 form-group">
                        <label><strong>From Date</strong></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" name="from_date" class="form-control datepicker" 
                                   value="{{ request('from_date') }}" placeholder="dd-mm-yyyy" autocomplete="off">
                        </div>
                    </div>

                    <div class="col-md-4 form-group">
                        <label><strong>To Date</strong></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" name="to_date" class="form-control datepicker" 
                                   value="{{ request('to_date') }}" placeholder="dd-mm-yyyy" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn btn-info btn-preview" onclick="previewReport()">
                            <i class="fa fa-eye"></i> Preview Report
                        </button>
                        <button type="reset" class="btn btn-warning">
                            <i class="fa fa-undo"></i> Reset Filters
                        </button>
                    </div>
                </div>
            </div>

            <div class="export-options">
                <h5 class="section-title">
                    <i class="fa fa-download"></i> Export Options
                </h5>
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label><strong>Export Format</strong></label>
                            <select name="export_type" class="form-control">
                                <option value="excel">Excel (.xlsx)</option>
                                <option value="pdf">PDF (.pdf)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label><strong>Include Headers</strong></label>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="includeHeaders" checked disabled>
                                <label class="custom-control-label" for="includeHeaders">Yes (always included)</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-right">
                        <button type="submit" class="btn btn-success btn-export">
                            <i class="fa fa-download"></i> Generate & Export Report
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewModalLabel">
                    <i class="fa fa-eye"></i> Report Preview
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="previewContent">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <p class="mt-2">Loading preview...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="exportFromPreview()">
                    <i class="fa fa-download"></i> Export Now
                </button>
            </div>
        </div>
    </div>
</div>
@stop

@section("script")
<script src="{{asset('')}}admin-assets/plugins/table/datatable/datatables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
    // Initialize select2
    $('.select2').select2({
        width: '100%',
        placeholder: 'Select option'
    });

    // Initialize datepicker
    $('.datepicker').datepicker({
        format: 'dd-mm-yyyy',
        autoclose: true,
        todayHighlight: true,
        orientation: 'bottom'
    });

    // Load subcategories based on category selection
    $('#category').change(function() {
        var categoryId = $(this).val();
        var subCategorySelect = $('#sub_category');
        
        subCategorySelect.html('<option value="">Loading...</option>');
        
        if (categoryId) {
            $.ajax({
                url: '{{ route("admin.get.subcategories") }}',
                type: 'GET',
                data: { category_id: categoryId },
                success: function(response) {
                    subCategorySelect.html('<option value="">All Sub Categories</option>');
                    if (response.subcategories && Object.keys(response.subcategories).length > 0) {
                        $.each(response.subcategories, function(id, name) {
                            subCategorySelect.append('<option value="' + id + '">' + name + '</option>');
                        });
                    }
                },
                error: function() {
                    subCategorySelect.html('<option value="">All Sub Categories</option>');
                }
            });
        } else {
            subCategorySelect.html('<option value="">All Sub Categories</option>');
        }
    });

    // Trigger change on page load if category is selected
    if ($('#category').val()) {
        $('#category').trigger('change');
        
        // If sub_category was previously selected, set it after loading
        var selectedSubCat = '{{ request('sub_category') }}';
        if (selectedSubCat) {
            setTimeout(function() {
                $('#sub_category').val(selectedSubCat).trigger('change');
            }, 500);
        }
    }

    // Preview report function
    function previewReport() {
        var formData = $('#exportForm').serialize();
        $('#previewModal').modal('show');
        $('#previewContent').html('<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p class="mt-2">Loading preview...</p></div>');
        
        $.ajax({
            url: '{{ route("admin.product.preview.report") }}',
            type: 'GET',
            data: formData,
            success: function(response) {
                $('#previewContent').html(response);
            },
            error: function(xhr, status, error) {
                $('#previewContent').html('<div class="alert alert-danger">Error loading preview: ' + error + '</div>');
            }
        });
    }

    // Export from preview
    function exportFromPreview() {
        $('#exportForm').submit();
    }

    // Form validation
    $('#exportForm').submit(function(e) {
        var fromDate = $('input[name="from_date"]').val();
        var toDate = $('input[name="to_date"]').val();
        
        if (fromDate && toDate) {
            var fromParts = fromDate.split('-');
            var toParts = toDate.split('-');
            var from = new Date(fromParts[2], fromParts[1] - 1, fromParts[0]);
            var to = new Date(toParts[2], toParts[1] - 1, toParts[0]);
            
            if (from > to) {
                e.preventDefault();
                alert('From Date cannot be greater than To Date');
            }
        }
    });
</script>
@stop