@extends('layouts.app')
@section('title')
    ORDER CREATE
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('order.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #mainTable input {
            width: 100px;
        }
    </style>
    <div class="card">
        <form method="post" action="{{ route('order.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row">
                    <h5>GENERAL INFORMATION</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            <label for="ref_no" class="form-label col-4">Ref No :</label>
                            <div class="col-6">
                                <input type="text" name="ref_no" id="ref_no" class="form-control rounded-4"
                                    value="{{ $ref_no }}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            <label for="date" class="form-label col-4">Date :</label>
                            <div class="col-6">
                                <input type="text" name="date" id="date"
                                    class="form-control datepicker-current-date rounded-4" value="{{ date('d/m/Y') }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="order_no" class="form-label col-4">Order No :</label>
                            <div class="col-6">
                                <input type="text" name="order_no" id="order_no" class="form-control rounded-4"
                                    placeholder="Enter Order No" value="{{ old('order_no') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="created_by" class="form-label col-4">Created By :</label>
                            <div class="col-6">
                                <input type="text" readonly name="created_by" id="created_by"
                                    class="form-control rounded-4" value="{{ Auth::user()->user_name }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="customer_id" class="form-label col-4">Customer :</label>
                            <div class="col-6">
                                <select class="form-select" name="customer_id" id="customer_id"
                                    style="width: 100% !important;">
                                    @if (old('customer_id') != null)
                                        @php
                                            $customer = App\Models\Customer::find(old('customer_id'));
                                        @endphp
                                        @if ($customer)
                                            <option value="{{ $customer->id }}" selected style="color: black;">
                                                {{ $customer->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Customer Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Customer</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="order_month" class="form-label col-4">Order Month :</label>
                            <div class="col-6">
                                <input type="month" name="order_month" id="order_month" class="form-control rounded-4"
                                    value="{{ old('order_month') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="status" class="form-label col-4">Status :</label>
                            <div class="col-6">
                                <select name="status" id="status" class="form-select rounded-4"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Select Status</option>
                                    <option value="in-progress" @selected(old('status') == 'in-progress')>In Progress</option>
                                    <option value="complete" @selected(old('status') == 'complete')>Complete</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="po_no" class="form-label col-4">PO No :</label>
                            <div class="col-6">
                                <input type="text" name="po_no" id="po_no" class="form-control rounded-4"
                                    placeholder="Enter PO No" value="{{ old('po_no') }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="inputGroupFile02" class="form-label col-4">Attachment :</label>
                            <div class="col-6">
                                <input type="file" class="form-control" name="attachment" id="inputGroupFile02">
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>PRODUCT DETAIL</h5>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenter"><i class="bi bi-plus-square"></i> Add Products</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="mainTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Type of Product</th>
                                    <th>Variance</th>
                                    <th>Model</th>
                                    <th>UOM</th>
                                    <th>Firm 1 Month Qty</th>
                                    <th>N+1 Forecast Month Qty</th>
                                    <th>N+2 Forecast Month Qty</th>
                                    <th>N+3 Forecast Month Qty</th>
                                    <th>N+4 Forecast Month Qty</th>
                                    <th>N+5 Forecast Month Qty</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (old('products'))
                                    @foreach (old('products') as $key => $order_detail)
                                        <tr>
                                            <td>{{ $key }}</td>
                                            <td>
                                                <input type="hidden" class="product_id"
                                                    name="products[{{ $key }}][product_id]"
                                                    value="{{ $order_detail['product_id'] ?? '' }}">

                                                <input type="hidden" value="{{ $order_detail['part_no'] ?? '' }}"
                                                    name="products[{{ $key }}][part_no]">
                                                {{ $order_detail['part_no'] ?? 'N/A' }}
                                            </td>

                                            <td>
                                                <input type="hidden" value="{{ $order_detail['part_name'] }}"
                                                    name="products[{{ $key }}][part_name]">
                                                {{ $order_detail['part_name'] ?? '' }}
                                            </td>
                                            <td>
                                                <input type="hidden" value="{{ $order_detail['type_of_product'] }}"
                                                    name="products[{{ $key }}][type_of_product]">
                                                {{ $order_detail['type_of_product'] ?? '' }}
                                            </td>
                                            <td>
                                                <input type="hidden" value="{{ $order_detail['variance'] }}"
                                                    name="products[{{ $key }}][variance]">
                                                {{ $order_detail['variance'] ?? '' }}
                                            </td>
                                            <td>
                                                <input type="hidden" value="{{ $order_detail['model'] }}"
                                                    name="products[{{ $key }}][model]">
                                                {{ $order_detail['model'] ?? '' }}
                                            </td>
                                            <td>
                                                <input type="hidden" value="{{ $order_detail['unit'] }}"
                                                    name="products[{{ $key }}][unit]">
                                                {{ $order_detail['unit'] ?? '' }}
                                            </td>

                                            <td>
                                                <input type="number" min="0" class="form-control"
                                                    name="products[{{ $key }}][firm_qty]"
                                                    value="{{ $order_detail['firm_qty'] ?? 0 }}">
                                            </td>
                                            <td>
                                                <input type="number" min="0" class="form-control"
                                                    name="products[{{ $key }}][n1_qty]"
                                                    value="{{ $order_detail['n1_qty'] ?? 0 }}">
                                            </td>
                                            <td>
                                                <input type="number" min="0" class="form-control"
                                                    name="products[{{ $key }}][n2_qty]"
                                                    value="{{ $order_detail['n2_qty'] ?? 0 }}">
                                            </td>
                                            <td>
                                                <input type="number" min="0" class="form-control"
                                                    name="products[{{ $key }}][n3_qty]"
                                                    value="{{ $order_detail['n3_qty'] ?? 0 }}">
                                            </td>
                                            <td>
                                                <input type="number" min="0" class="form-control"
                                                    name="products[{{ $key }}][n4_qty]"
                                                    value="{{ $order_detail['n4_qty'] ?? 0 }}">
                                            </td>
                                            <td>
                                                <input type="number" min="0" class="form-control"
                                                    name="products[{{ $key }}][n5_qty]"
                                                    value="{{ $order_detail['n5_qty'] ?? 0 }}">
                                            </td>

                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm remove-product">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </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>
            {{-- PRODUCTS MODAL --}}
            <div class="modal fade" id="exampleModalCenter" 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>UOM</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>
        </form>
    </div>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        let mainTable;
        let modalTable;
        var selectedRowsProducts = {};
        const addedProductIds = new Set();
        $(document).ready(function() {
            $('#date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            });

            function initSelect2WithAjax(selector, route) {
                $(selector).select2({
                    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.name || item.type,
                                        id: item.id,
                                        data: item
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#customer_id', '{{ route('customer.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',
            });

            mainTable = $('#mainTable').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];
                }
            });
        });

        let bool = 0;

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

                if (!addedProductIds.has(productId)) {
                    mainTable.row.add([
                        mainTable.rows().data().length + 1,
                        `${rowData.part_no ?? ''}<input type="hidden" name="products[${bool}][part_no]" class="part_no" value="${rowData.part_no ?? ''}">`,
                        `${rowData.part_name ?? ''}<input type="hidden" name="products[${bool}][part_name]" class="part_name" value="${rowData.part_name ?? ''}">`,
                        `${rowData.type_of_products?.type ?? ''}<input type="hidden" name="products[${bool}][type_of_product]" class="type_of_product" value="${rowData.type_of_products?.type ?? ''}">`,
                        `${rowData.variance ?? ''}<input type="hidden" name="products[${bool}][variance]" class="variance" value="${rowData.variance ?? ''}">`,
                        `${rowData.model ?? ''}<input type="hidden" name="products[${bool}][model]" class="model" value="${rowData.model ?? ''}">`,
                        `${rowData.units?.name ?? ''}<input type="hidden" name="products[${bool}][unit]" class="unit" value="${rowData.units?.name ?? ''}">`,
                        `<input type="hidden" name="products[${bool}][product_id]" class="product_id" value="${productId}">
                        <input min=0 type="number" class="form-control" name="products[${bool}][firm_qty]">`,
                        `<input min=0 type="number" class="form-control" name="products[${bool}][n1_qty]">`,
                        `<input min=0 type="number" class="form-control" name="products[${bool}][n2_qty]">`,
                        `<input min=0 type="number" class="form-control" name="products[${bool}][n3_qty]">`,
                        `<input min=0 type="number" class="form-control" name="products[${bool}][n4_qty]">`,
                        `<input min=0 type="number" class="form-control" name="products[${bool}][n5_qty]">`,
                        `<button min=0 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);
            $('#exampleModalCenter').modal('hide');
        }

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

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