@extends('layouts.app')
@section('title')
    Transfer Request Create
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('transfer_request.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }
    </style>
    <form method="post" action="{{ route('transfer_request.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <h5>Transfer Request Details</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="ref_no" class="form-label col-4">Tr No.</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ $ref_no }}" name="ref_no" id="ref_no"
                                    class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="mrf_no" class="form-label col-4">MRF No.</label>
                            <div class="col-6">
                                <select class="form-select" onchange="change_mrf()" name="mrf_no" id="mrf_no"
                                    style="width: 100% !important;">
                                    @if (old('mrf_no') != null)
                                        @php
                                            $material_requisitions = App\Models\MaterialRequisition::find(
                                                old('mrf_no'),
                                            );
                                        @endphp
                                        @if ($material_requisitions)
                                            <option value="{{ $material_requisitions->id }}" selected style="color: black;">
                                                {{ $material_requisitions->ref_no }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Material Requisitions Selected
                                            </option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Material Requisitions</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_date" class="form-label col-4">Request Date</label>
                            <div class="col-6">
                                <input type="text" value="{{ date('d/m/Y') }}" name="request_date" id="request_date"
                                    class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="shift" class="form-label col-4">Shift</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ old('shift') }}" name="shift" id="shift"
                                    class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_from" class="form-label col-4">Request From (Dept)</label>
                            <div class="col-6">
                                <select class="form-select" name="request_from" id="request_from"
                                    style="width: 100% !important;">
                                    @if (old('order_id') != null)
                                        @php
                                            $department = App\Models\Department::find(old('request_from'));
                                        @endphp
                                        @if ($department)
                                            <option value="{{ $department->id }}" selected style="color: black;">
                                                {{ $department->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Department Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Department</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="machine" class="form-label col-4">Machine</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ old('machine') }}" id="machine_name"
                                    class="form-control rounded-4">
                                <input type="hidden" name="machine_id" id="machine_id" class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="request_to" class="form-label col-4">Request To (Dept)</label>
                            <div class="col-6">
                                <select class="form-select" name="request_to" id="request_to"
                                    style="width: 100% !important;">
                                    @if (old('order_id') != null)
                                        @php
                                            $department = App\Models\Department::find(old('request_to'));
                                        @endphp
                                        @if ($department)
                                            <option value="{{ $department->id }}" selected style="color: black;">
                                                {{ $department->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Department Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Department</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="description" class="form-label col-4">Description</label>
                            <div class="col-6">
                                <input type="text" name="description" id="description" rows="4" cols="4"
                                    class="form-control rounded-4" {{ old('description') }}>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-end">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#product_modal">+ Add Product</button>
                    </div>
                </div>
                <br>
                {{-- Main Table --}}
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0" id="productTable">
                                <thead>
                                    <tr>
                                        <th>Sr.</th>
                                        <th>Part No.</th>
                                        <th>Part Name</th>
                                        <th>Type</th>
                                        <th>Model</th>
                                        <th>Variance</th>
                                        <th>UOM</th>
                                        <th>Transfer Qty</th>
                                        <th>Remarks</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{-- PRODUCTS MODAL --}}
    <div class="modal fade" id="product_modal" tabindex="-1" aria-labelledby="exampleModalCenterTitle"
        aria-modal="true" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">
                        PRODUCTS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="selectedRowsProducts = {};$('#modalTable input:checked').prop('checked', false);modalTable.ajax.reload();"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="modalTable">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selectAll" style="width: 22px; height: 22px;">
                                    </th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Model</th>
                                    <th>Variance</th>
                                    <th>Type of Product</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal" onclick="selectedRowsProducts = {};$('#modalTable input:checked').prop('checked', false);modalTable.ajax.reload();">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_product()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        let modalTable;
        let productTable;
        var selectedRowsProducts = {};
        const addedProductIds = new Set();
        $(document).ready(function() {
            $('#request_date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            }).datepicker("setDate", new Date());

            $(document).on('mouseenter', '.select2-selection__rendered', function() {
                $('.select2-selection__rendered').removeAttr('data-bs-original-title');
            });

            function initSelect2WithAjax(selector, placeholder, route) {
                $(selector).select2({
                    placeholder: placeholder,
                    ajax: {
                        url: route,
                        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 || item.name,
                                        id: item.id,
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#mrf_no', 'Select Material Requisition',
                '{{ route('material_requisition.search') }}');
            initSelect2WithAjax('#request_from', 'Select Request From', '{{ route('department.search') }}');
            initSelect2WithAjax('#request_to', 'Select Request To', '{{ route('department.search') }}');

            modalTable = $('#modalTable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product.data') }}",
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            let checked = selectedRowsProducts[row.id] ? 'checked' : '';
                            return `
                                <input class="form-check-input product_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}" ${checked}>
                            `;
                        }
                    }, {
                        data: 'part_no',
                        name: 'part_no',
                    },
                    {
                        data: 'part_name',
                        name: 'part_name',
                    },
                    {
                        data: 'units.name',
                        name: 'units.name',
                        defaultContent: ''
                    },
                    {
                        data: 'model',
                        name: 'model',
                    },
                    {
                        data: 'variance',
                        name: 'variance',
                    },
                    {
                        data: 'type_of_products.type',
                        name: 'type_of_products.type',
                        defaultContent: ''
                    },
                ],
                paging: true,
                pagingType: 'input',
            });

            productTable = $('#productTable').DataTable();

            $('#selectAll').on('change', function() {
                var $modal = $(this).closest('.modal');
                $modal.find('.product_id').prop('checked', this.checked).trigger('change');
            });

            $(document).on('change', '#modalTable .product_id', function() {
                var $modal = $(this).closest('.modal');
                var allChecked = $modal.find('.product_id').length === $modal.find('.product_id:checked')
                    .length;
                $modal.find('#selectAll').prop('checked', allChecked);
                var row = $(this).closest('tr');

                var rowData = modalTable.row(row).data();
                var productId = $(this).val();

                if ($(this).is(':checked')) {
                    selectedRowsProducts[productId] = rowData;
                } else {
                    delete selectedRowsProducts[productId];
                }
            });
        });

        function change_mrf() {
            var mrf_id = $("#mrf_no").val();
            if (mrf_id) {
                $.ajax({
                    url: "{{ route('material_requisition.search.detail') }}",
                    type: 'GET',
                    data: {
                        id: mrf_id
                    },
                    success: function(mrf) {
                        $("#shift").val(mrf.shift);
                        $('#machine_id').val(mrf.machine);
                        $('#machine_name').val(mrf.machines?.name ?? '');
                    }
                });
            } else {
                $('#shift').val('');
                $('#machine_id').val('');
                $('#machine_name').val('');
            }
        };

        let bool = 0;

        function add_product() {
            Object.values(selectedRowsProducts).forEach(rowData => {
                var productId = rowData.id;

                if (!addedProductIds.has(productId)) {
                    productTable.row.add([
                        productTable.rows().data().length + 1,
                        rowData.part_no +
                        `<input type="hidden" name="product[${bool}][product_id]" class="product_id form-control" value="${productId}">`,
                        rowData.part_name,
                        rowData.type_of_product,
                        rowData.model,
                        rowData.variance,
                        rowData.unit,
                        `<input name="product[${bool}][req_qty]" class="qty form-control">`,
                        `<input name="product[${bool}][remarks]" class="remarks form-control">`,
                        `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    addedProductIds.add(productId);
                    delete selectedRowsProducts[productId ?? ''];
                }
                bool++;
            });

            $('#modalTable input:checked').prop('checked', false);
            $('#product_modal').modal('hide');
        }

        $('#productTable tbody').on('click', 'button.remove-product', function() {
            var row = $(this).closest('tr');
            var productId = row.find('.product_id').val();
            addedProductIds.delete(+productId);
            delete selectedRowsProducts[productId ?? ''];
            productTable.row(row).remove().draw(false);
            resetSerialNumbers(productTable);
        });

        function resetSerialNumbersM() {
            if ($('#productTable tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#productTable tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }
    </script>
@endsection