@extends('layouts.app')
@section('title')
    Visual Checking 1
@endsection
@section('button')
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />

    <!-- Advance Search Button (aligned to the left) -->
    <button class="btn btn-primary" id="showFilterBtn">
        <i class="bi bi-gear me-2"></i>Advance Search
    </button>
    <!-- Create Button (aligned to the right) -->
    <a type="button" class="btn btn-info" href="{{ route('checking.create') }}">
        <i class="bi bi-plus-square"></i>
        Create
    </a>
@endsection
@section('content')
    <style>
        .table thead tr input {
            background: transparent;
            color: rgb(117, 117, 117);

        }
    </style>


    <!-- Search Filter Section (Initially Hidden) -->
    <div class="row gx-5 viewInput" style="display: none;">

        <!-- Date Range Section -->
        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label class="form-label" for="abc12">Date Range</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-calendar4"></i>
                            </span>
                            <input type="text" id="abc12" class="form-control datepicker-range-iso-week-numbers">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Status Section -->
        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label class="form-label" for="status">Status</label>
                        <select id="status" class="form-select rounded-4" style="width: 100% !important;">
                            <option value="" disabled selected>Select Status</option>
                            <option value="completed">Completed</option>
                            <option value="inprogress">In-Progress</option>
                            <!-- Add other status options if needed -->
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Part Name Section -->
        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label class="form-label" for="order_no">Production Order No</label>
                        <select id="order_no" class="form-select rounded-4" style="width: 100% !important;">

                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Part No Section -->
        <div class="col-lg-4 col-md-4 col-12 mt-3">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="form-group m-0">
                        <label for="part_no" class="form-label">Part No :</label>
                        <select name="part_no" id="part_no" class="form-select rounded-4" style="width: 100% !important;">

                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Buttons Section -->
        <div class="row gx-3 mb-3">
            <div class="col-12 d-flex justify-content-end">
                <button type="button" class="btn btn-info me-2" id="generate">
                    <i class="bi bi-search"></i> Search
                </button>
                <form action="{{ route('checking.export') }}" method="POST" style="display: inline;">
                    @csrf
                    <button type="submit" class="btn btn-info need-dt">
                        <i class="bi bi-download"></i> Download
                    </button>
                </form>
            </div>

        </div>
    </div>
    <div class="card">
        <div class="card-body tr_1">
            <div class="table-responsive tr_2">
                <table class="table table-bordered m-0 datatable">
                    <thead>
                        <tr>
                            <th>Sr #</th>
                            <th>Production Order No</th>
                            <th>Date</th>
                            <th>Part No.</th>
                            <th>Part Name</th>
                            <th>Qty QC</th>
                            <th>Rejected Qty</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead>

                        <tr>
                            <th></th>
                            <th><input type="text" id="search-Order No" placeholder="Search Production Order No"></th>
                            <th><input type="text" id="search-Date" placeholder="Search Date"></th>
                            <th><input type="text" id="search-Part No." placeholder="Search Part No."></th>
                            <th><input type="text" id="search-Part Name" placeholder="Search Part Name"></th>
                            <th><input type="text" id="search-Accepted Qty" placeholder="Search Accepted Qty"></th>
                            <th><input type="text" id="search-Rejected Qty" placeholder="Search Rejected Qty"></th>
                            <th><input type="text" id="search-Status" placeholder="Search Status"></th>

                            <th></th>
                        </tr>
                    </thead>

                    <tbody>



                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Date Range JS -->
    <script src="{{ asset('assets/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        var searchTimeout;
        var data = "{{ route('checking.data') }}";
        var searchTimeout;
        var table;
        let allData = {};
        $(document).ready(function() {
            let bool = true;
            const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
            const savedState = localStorage.getItem(tableKey);

            if (savedState) {
                allData = JSON.parse(savedState);
                if (allData.columns) {
                    allData.columns.forEach((col, i) => {
                        if (col.search) {
                            $('thead tr:eq(1) th').eq(i).find('input').val(col.search);
                        }
                    });
                }

                if (allData.search && allData.search.sSearch) {
                    $('#dt-search-0').val(allData.search.sSearch);
                }
                bool = false;
            }


            $(".datepicker-range-iso-week-numbers").daterangepicker({
                drops: "up",
                opens: "left",
                showWeekNumbers: true,
                showISOWeekNumbers: true,
                startDate: moment().subtract(1, "days").startOf("day"),
                endDate: moment().add(1, "days").endOf("day"), 
                locale: {
                    format: "DD-MM-YYYY",
                },
            });

            function getDateRange() {
                var datepicker = $(".datepicker-range-iso-week-numbers").data('daterangepicker');
                return {
                    start_date: datepicker.startDate.format('DD-MM-YYYY'),
                    end_date: datepicker.endDate.format('DD-MM-YYYY')
                };
            }

            $('#order_no').select2({
                placeholder: 'Select Production No',
                ajax: {
                    url: '{{ route('electrical-continuity.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.ref_no,
                                    id: item.id,

                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                },

            });

            $('#part_no').select2({
                placeholder: 'Select Part No',
                ajax: {
                    url: '{{ route('product.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.part_no,
                                    id: item.id
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            var table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                displayStart: allData.start || 0,
                pageLength: allData.length || 10,
                order: allData.order || [],
                search: allData.search || {},
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: data,
                    type: 'GET',
                    data: function(d) {
                        d.firstAttempt = bool;

                        var dateRange = getDateRange();
                        d.start_date = dateRange.start_date;
                        d.end_date = dateRange.end_date;

                        d.part_no = $('#search-part_no').val();
                        d.part_name = $('#search-part_name').val();
                        d.model = $('#search-model').val();
                        d.variance = $('#search-variance').val();
                        d.type_of_product = $('#search-type_of_product').val();
                        d.rev_no = $('#search-rev_no').val();

                        d.status_filter = $('#status').val();
                        d.order_no_filter = $('#order_no').val();
                        d.part_no_filter = $('#part_no').val();
                        d.bool = bool;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    }, {
                        data: 'ref_no',
                        name: 'ref_no',
                    },
                    {
                        data: 'date',
                        name: 'date',
                    },
                    {
                        data: 'products.part_no',
                        name: 'products.part_no',
                        render: function(data, type, row) {
                            return data ?? '';
                        }
                    },
                    {
                        data: 'products.part_name',
                        name: 'products.part_name',
                        render: function(data, type, row) {
                            return data ?? '';
                        }
                    },
                    {
                        data: 'qty_qc',
                        name: 'qty_qc',
                        defaultContent: 0
                    }, {
                        data: 'qty_reject',
                        name: 'qty_reject',
                        defaultContent: 0
                    }, {
                        data: 'status',
                        name: 'status',
                        render: function(data, type, row) {
                            let badgeClass = '';
                            let statusText = data;
                            switch (data) {
                                case 'In-Progress':
                                    badgeClass = 'badge border border-warning text-warning';
                                    break;
                                case 'Verified By LL':
                                    badgeClass = 'badge border border-primary text-primary';
                                    break;
                                case 'Declined By LL':
                                    badgeClass = 'badge border border-danger text-danger';
                                    break;
                                case 'Declined By SV':
                                    badgeClass = 'badge border border-danger text-danger';
                                    break;
                                case 'Completed':
                                    badgeClass = 'badge border border-success text-success';
                                    break;
                                case 'Cancelled By LL':
                                    badgeClass = 'badge border border-danger text-danger';
                                    break;
                                case 'Cancelled By SV':
                                    badgeClass = 'badge border border-danger text-danger';
                                    break;

                                default:
                                    badgeClass = 'badge border border-secondary text-secondary';
                                    break;
                            }
                            return `<span class="${badgeClass}">${statusText}</span>`;
                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                paging: true,
                pagingType: 'input',
                initComplete: function(settings, json) {
                    bool = true;
                }
            });

            let isFirstLoad = true;

            $('.datatable').on('search.dt order.dt length.dt', function() {
                if (isFirstLoad) {
                    isFirstLoad = false;
                    return;
                }
                bool = false;
                storeInLocalStorage();
            });

            $('.datatable thead tr:eq(1) th').each(function(i) {
                $('input', this).on('keyup change', function() {
                    let value = this.value;
                    if (table.column(i).search() !== value) {
                        clearTimeout(searchTimeout);
                        searchTimeout = setTimeout(() => {
                            table.column(i).search(value).draw();
                            bool = false;
                            storeInLocalStorage();
                        }, 500);
                    }
                });
            });

            function storeInLocalStorage() {
                const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
                const settings = table.settings()[0];
                const state = {
                    time: +new Date(),
                    start: settings._iDisplayStart,
                    length: settings._iDisplayLength,
                    order: settings.aaSorting,
                    search: settings.oPreviousSearch,
                    columns: settings.aoPreSearchCols.map(col => ({
                        search: col.sSearch
                    }))
                };
                localStorage.setItem(tableKey, JSON.stringify(state));
            }

            $('#generate').on('click', function() {
                bool = false;
                table.ajax.reload();
            });

            $('#showFilterBtn').click(function() {
                if ($('.viewInput').is(':hidden')) {
                    $('.viewInput').show();
                    $('#showFilterBtn').html(
                        '<i class="bi bi-gear"> Advance Search');
                } else {
                    $('.viewInput').hide();
                    $('#showFilterBtn').html(
                        '<i class="bi bi-gear"> Advance Search');
                }
            });
        });
    </script>
@endsection