

<?php $__env->startSection('title', 'Quality Control Inspections'); ?>
<?php $__env->startPush('plugin-styles'); ?>
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/flatpickr/flatpickr.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/sweetalert2/sweetalert2.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/select2/select2.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/select2-bootstrap-5-theme/select2-bootstrap-5-theme.min.css')); ?>">


<style>
.change-status-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.select2-container {
    /* width:100% !important; */
    height: 45px !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}
.select2-container .select2-selection--single
 {
    padding-top: 10px !important;
 }
/* Select2 Bootstrap 5 Theme Fixes */
/* .select2-container--bootstrap-5 .select2-selection {
    min-height: 45px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #dee2e6;
    border-radius: 0.25rem;
}

.select2-container--bootstrap-5 .select2-search__field {
    padding: 0.375rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
} */
</style>
<?php $__env->stopPush(); ?>
<?php $__env->startSection('content'); ?>
<div class="accordion mb-3" id="gpFilterAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="gpFilterHeading">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#gpFilterCollapse" aria-expanded="false" aria-controls="gpFilterCollapse">
                Filters
            </button>
        </h2>
        <div id="gpFilterCollapse" class="accordion-collapse collapse" aria-labelledby="gpFilterHeading" data-bs-parent="#gpFilterAccordion">
            <div class="accordion-body">
                <div class="row g-3 align-items-end">
                    
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label class="form-label mb-0">QC Number</label>
                        </div>
                        <select id="filterQcNumber" class="form-select select2" data-placeholder="Search QC Number"></select>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label class="form-label mb-0">IGP Number</label>
                        </div>
                        <select id="filterIgp" class="form-select select2" data-placeholder="Search IGP Number"></select>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label class="form-label mb-0">PO Number</label>
                        </div>
                        <select id="filterPo" class="form-select select2" data-placeholder="Search PO Number"></select>
                    </div>
                    <!-- <div class="col-md-4">
                        <div class="mb-2">
                            <label class="form-label mb-0">Supplier</label>
                        </div>
                        <select id="filterSupplier" class="form-select select2" data-placeholder="Search Supplier"></select>
                    </div> -->
                    <div class="col-md-4">
                        <label class="form-label">Created Date Range</label>
                        <input id="filterDateRange" class="form-control flatpickr" placeholder="Select date range">
                    </div>
                </div>
                <div class="mt-3 d-flex gap-2">
                             

                    <button id="applyFilter" class="btn btn-primary" type="button">Apply</button>
                    <button id="btnResetFilters" class="btn btn-secondary" type="button">Reset</button>
                </div>
            </div>
        </div>
    </div>
</div>
<?php if(session('success')): ?>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <?php echo e(session('success')); ?>

            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <?php if($errors->any()): ?>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <?php echo e($errors->first()); ?>

            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>
<div class="row">
    <div class="col-12">
        <div class="card">
            
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="card-title mb-0">Quality Control</h6>
           <a href="<?php echo e(route('qcs.create')); ?>" class="btn btn-success me-2">
                        <i class="fas fa-plus"></i> Create New QC
                    </a>
        </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="qcTable">
                        <thead>
                            <tr>
                                <th>QC Number</th>
                                <th>IGP Number</th>
                                <th>PO Number</th>
                                <th>Supplier</th>
                                <th>Inspector</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Data loaded via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Filter Modal -->

<?php $__env->stopSection(); ?>



<?php $__env->startPush('scripts'); ?>
<script src="<?php echo e(asset('theme/vendors/select2/select2.min.js')); ?>"></script>
<script src="<?php echo e(asset('theme/vendors/flatpickr/flatpickr.min.js')); ?>"></script>
<script src="<?php echo e(asset('theme/vendors/moment/moment.min.js')); ?>"></script>
<script>
$(document).ready(function() {
    // Common Select2 settings
    const select2Settings = {
        theme: 'bootstrap-5',
        width: '100%',
        delay: 250,
        cache: true,
        allowClear: true,
        minimumInputLength: 1
    };

    // Initialize QC Number Select2
    $('#filterQcNumber').select2({
    theme: 'bootstrap-5',
    width: '100%',
    placeholder: 'Search QC Number',
    allowClear: true,
    minimumInputLength: 1, // 👈 only trigger AJAX after 1+ characters typed
    ajax: {
        url: '<?php echo e(route("qcs.filter.search")); ?>',
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                q: params.term || ''
            };
        },
        processResults: function(data) {
            return {
                results: data.results || []
            };
        }
    }
});


    // Initialize IGP Select2
    $('#filterIgp').select2({
    ...select2Settings,
    placeholder: 'Search IGP Number',
    allowClear: true,
    minimumInputLength: 1, // ✅ show results only after typing
    ajax: {
        url: '<?php echo e(route("qcs.filter.igpsearch")); ?>',
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return { q: params.term || '' };
        },
        processResults: function(data) {
            // ✅ Use data.results (not data.map)
            return {
                results: data.results || []
            };
        }
    }
});


    // Initialize PO Select2
    $('#filterPo').select2({
        theme: 'bootstrap-5',
        width: '100%',
        placeholder: 'Search PO Number',
        allowClear: true,
        minimumInputLength: 1,
        ajax: {
            url: '<?php echo e(route("qcs.filter.po-search")); ?>',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    q: params.term
                };
            },
            processResults: function(data) {
                return data;
            }
        }
    });

    // Initialize Supplier Select2
    // $('#filterSupplier').select2({
    //     ...select2Settings,
    //     placeholder: 'Search Supplier',
    //     ajax: {
    //         url: '<?php echo e(route("inspector.search")); ?>',
    //         dataType: 'json',
    //         data: function(params) {
    //             return {
    //                 q: params.term,
    //                 type: 'inspector'
    //             };
    //         },
    //         processResults: function(data) {
    //             return {
    //                 results: data.results || data
    //             };
    //         }
    //     }
    // });

    // Initialize Flatpickr
    flatpickr('#filterDateRange', {
        mode: 'range',
        dateFormat: 'Y-m-d'
    });

    window.SKIP_ERROR_HANDLING = true;

    // Initialize DataTable
    const qcTable = $('#qcTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '<?php echo e(route("qcs.index")); ?>',
            data: function(d) {
                d.qc_id = $('#filterQcNumber').val();
                d.igp_id = $('#filterIgp').val();
                d.po_id = $('#filterPo').val();
                d.supplier_id = $('#filterSupplier').val();
                const dateRange = $('#filterDateRange').val();
                if (dateRange) {
                    const [start, end] = dateRange.split(' to ');
                    d.date_from = start;
                    d.date_to = end;
                }
            },
            error: function(xhr, error, thrown) {
                console.error('DataTables error:', error, xhr.responseJSON);
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    console.error('Server error:', xhr.responseJSON.message);
                }
            }
        },
        columns: [
            { data: 'qc_number', name: 'qc_number' },
            { data: 'igp_number', name: 'igp_number' },
            { data: 'po_number', name: 'po_number', orderable: false, searchable: false },
            { data: 'vendor_name', name: 'vendor_name', orderable: false, searchable: false },
            { data: 'inspector_name', name: 'inspector_name', orderable: false, searchable: false },
            {
                data: 'created_at',
                name: 'created_at',
                render: function(data) {
                    return moment(data).format('MM/DD/YYYY HH:mm:ss');
                }
            },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[5, 'desc']],
        drawCallback: function() {
            // Re-initialize tooltips after table redraw
            $('[data-bs-toggle="tooltip"]').tooltip();
        }
    });

    // Apply filter
    $('#applyFilter').on('click', function() {
        qcTable.ajax.reload();
    });

    // Reset filters
    $('#btnResetFilters').on('click', function() {
        $('#filterQcNumber').val('');
        $('#filterIgp').val(null).trigger('change');
        $('#filterPo').val(null).trigger('change');
        $('#filterSupplier').val(null).trigger('change');
        $('#filterDateRange').val('');
        qcTable.ajax.reload();
    });
});
</script>
<?php $__env->stopPush(); ?>


<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\habibcables-ERP\resources\views\qcs\index.blade.php ENDPATH**/ ?>