@extends('layouts.app')
@section('title')
    INVENTORY DASHBOARD
@endsection
@section('content')
    <style>
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .legend-item span {
            margin-left: 5px;
        }

        .legend-badge {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            display: inline-block;
        }

        .badge-success {
            background-color: lightgreen;
        }

        .badge-warning {
            background-color: yellow;
        }

        .badge-danger {
            background-color: red;
        }

        .badge-secondary {
            background-color: grey;
        }

        .shadow-custom {
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
        }

        .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
            color: rgb(183, 192, 205) !important;
            font-size: 14px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: rgb(183, 192, 205) !important;
            font-size: 14px !important;
        }
    </style>
    <div class="card">
        <div class="card-body tr_1">
            <div class="d-flex mb-3">
                <div class="card shadow-custom">
                    <div class="card-body">
                        <h5>LEGEND</h5>
                        <div class="legend-item">
                            <div class="legend-badge badge-success"></div>
                            <span>Available Quantity > Minimum Qty</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-badge badge-warning"></div>
                            <span>Critical min Qty < Available Quantity < Minimum Qty</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-badge badge-danger"></div>
                            <span>Available Quantity < Critical min Qty</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-badge badge-secondary"></div>
                            <span>Not Set</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row align-items-end">
                <div class="col-md-4">
                    <label>Type of Product</label>
                    <select id="filterTypeOfProduct" class="form-control" multiple>
                    </select>
                </div>
                <div class="col-md-4 d-flex">
                    <button class="btn btn-primary me-2" type="button" id="applyFilter">Apply</button>
                    <button class="btn btn-secondary" type="button" id="resetFilter">Reset</button>
                </div>
            </div>
            <div class="table-responsive mt-4 tr_2">
                <table id="myTable3" class="datatable table table-bordered">
                    <thead>
                        <tr>
                            <th>Part No</th>
                            <th>Part Name</th>
                            <th>Type of Product</th>
                            <th>Critical min</th>
                            <th>Minimum Qty</th>
                            <th>Available Quantity</th>
                            <th>Status</th>
                            <th>Create DPO</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Planning Modal -->
    <div class="modal fade" id="planningModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="planningForm" action="{{ route('inventory_dashboard.dpo') }}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create DPO</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Part No:</label>
                            <input type="text" name="part_no" id="modal_part_no" class="form-control" readonly>
                        </div>
                        <div class="mb-3">
                            <label>Part Name:</label>
                            <input type="text" id="modal_part_name" class="form-control" readonly>
                        </div>
                        <div class="mb-3">
                            <label>Type:</label>
                            <input type="text" id="modal_type" class="form-control" readonly>
                        </div>
                        <div class="mb-3">
                            <label>Planned Date:</label>
                            <input type="date" name="planned_date" id="modal_planned_date" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label>Planned Qty:</label>
                            <input type="number" name="planned_qty" id="modal_planned_qty" class="form-control" required>
                        </div>
                        <input type="hidden" name="product_id" id="modal_product_id">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            const savedFilterType = JSON.parse(localStorage.getItem('productTypeFilter'));

            if (savedFilterType && savedFilterType.length > 0) {
                savedFilterType.forEach(function(type) {
                    const option = new Option(type.text, type.id, true, true);
                    $('#filterTypeOfProduct').append(option);
                });

                $('#filterTypeOfProduct').trigger('change');
            }

            var table = $('.datatable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('inventory_dashboard') }}",
                    type: 'GET',
                    data: function(d) {
                        d.savedFilterType = JSON.parse(localStorage.getItem('productTypeIds'))
                    }
                },
                columns: [{
                    data: 'part_no',
                    name: 'part_no',
                }, {
                    data: 'part_name',
                    name: 'part_name',
                }, {
                    data: 'type_of_products.type',
                    name: 'type_of_products.type',
                    defaultContent: ''
                }, {
                    data: 'reordering.critical_min',
                    name: 'reordering.critical_min',
                    defaultContent: ''
                }, {
                    data: 'reordering.min_qty',
                    name: 'reordering.min_qty',
                    defaultContent: ''
                }, {
                    data: 'qty',
                    name: 'qty',
                    defaultContent: ''
                }, {
                    data: 'status',
                    name: 'status',
                }, {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return '<button type="button" class="btn btn-primary open-planning-modal" data-id="' +
                            row.id + '">Create DPO</button>';
                    }
                }, ],
                paging: true,
                pagingType: 'input'
            });

            var searchTimeout;

            $(document).on('keyup', '#dt-search-0', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    table.search($('#dt-search-0').val()).draw(false);
                }, 1000);
            });

            $('#filterTypeOfProduct').select2({
                placeholder: 'Select Type of Product',
                ajax: {
                    url: '{{ route('type_of_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.type,
                                    id: item.id,
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });

            $('#applyFilter').on('click', function() {
                const selectedIdTextPairs = [];

                $('#filterTypeOfProduct').find('option:selected').each(function() {
                    const id = $(this).val();
                    const text = $(this).text();

                    selectedIdTextPairs.push({
                        id: id,
                        text: text
                    });
                });

                const selectedOptions = $('#filterTypeOfProduct').val();
                localStorage.setItem('productTypeIds', JSON.stringify(selectedOptions));
                localStorage.setItem('productTypeFilter', JSON.stringify(selectedIdTextPairs));
                table.ajax.reload();
            });

            $('#resetFilter').on('click', function() {
                $('#filterTypeOfProduct').val('').trigger('change');
                localStorage.removeItem('productTypeIds');
                localStorage.removeItem('productTypeFilter');
                table.ajax.reload();
            });

        });

        $(document).on('click', '.open-planning-modal', function() {
            var $row = $(this).closest('tr');
            var rowData = $('#myTable3').DataTable().row($row).data();

            $('#modal_part_no').val(rowData.part_no?.trim());
            $('#modal_part_name').val(rowData.part_name?.trim());
            $('#modal_type').val(rowData.type_of_products?.type?.trim());
            $('#modal_planned_date').val(new Date().toISOString().split('T')[0]);

            var productId = $(this).data('id');
            $('#modal_product_id').val(productId);

            $('#planningModal').modal('show');
        });

        $('#planningForm').on('submit', function(e) {
            e.preventDefault();

            let form = $(this);
            let url = form.attr('action');
            let formData = form.serialize();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                success: function(response) {
                    alert('Production Output Traceabilites has been Successfully Created!');
                    form.removeAttr('disabled');
                    $('#planningModal').modal('hide');
                    form[0].reset();
                }
            });
        });
    </script>
@endsection