@extends('layouts.app')
@section('title')
    ORDER EDIT
@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.update', $order->id) }}" 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="{{ $order->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" readonly name="date" id="date" class="form-control rounded-4"
                                    value="{{ $order->date }}">
                            </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"
                                    value="{{ $order->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 name="customer_id" id="customer_id" class="form-select rounded-4"
                                    style="width: 100% !important;">
                                    <option value="{{ $order->customer_id }}" selected>
                                        {{ $order->customers->name }}
                                    </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="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="{{ \Carbon\Carbon::parse($order->order_month)->format('Y-m') }}">
                            </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" style="width: 100% !important;">
                                    <option value="">Select Status</option>
                                    <option value="in-progress" @selected($order->status == 'in-progress')>In Progress</option>
                                    <option value="complete" @selected($order->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"
                                    value="{{ $order->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">
                                @if (isset($order->attachment))
                                    <small class="text-muted mt-2">
                                        {{ substr($order->attachment, 14) }}
                                    </small>
                                    <a href="{{ asset('/') }}order-attachments/{{ $order->attachment }}"
                                        target="_blank" id="so_view"
                                        style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
                                        <i class="bi bi-eye me-1"></i>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <br>

                <div class="row">
                    <div class="col-12 d-flex justify-content-between">
                        <h5>PRODUCT DETAIL</h5>
                        @if ($is_purchase_planning == 0)
                            <button id="additem" type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#exampleModalCenter"><i class="bi bi-plus-square"></i> Add
                                Products</button>
                        @endif
                    </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>Unit</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>
                                    @if ($is_purchase_planning == 0)
                                        <th>Action</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($order_details as $order_detail)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $order_detail->products->part_no ?? '' }}</td>
                                        <td>{{ $order_detail->products->part_name ?? '' }}</td>
                                        <td>{{ $order_detail->products->type_of_products->type ?? '' }}</td>

                                        <td>{{ $order_detail->products->variance ?? '' }}</td>
                                        <td>{{ $order_detail->products->model ?? '' }}</td>
                                        <td>{{ $order_detail->products->units->name ?? '' }}</td>
                                        <td><input type="hidden" name="products[{{ $loop->iteration }}][product_id]"
                                                class="product_id" value="{{ $order_detail->product_id }}">
                                            <input type="number" class="form-control"
                                                name="products[{{ $loop->iteration }}][firm_qty]"
                                                value="{{ $order_detail->firm_qty }}">
                                        </td>
                                        <td><input type="number" class="form-control"
                                                name="products[{{ $loop->iteration }}][n1_qty]"
                                                value="{{ $order_detail->n1_qty }}"></td>
                                        <td><input type="number" class="form-control"
                                                name="products[{{ $loop->iteration }}][n2_qty]"
                                                value="{{ $order_detail->n2_qty }}"></td>
                                        <td><input type="number" class="form-control"
                                                name="products[{{ $loop->iteration }}][n3_qty]"
                                                value="{{ $order_detail->n3_qty }}"></td>
                                        <td><input type="number" class="form-control"
                                                name="products[{{ $loop->iteration }}][n4_qty]"
                                                value="{{ $order_detail->n4_qty }}"></td>
                                        <td><input type="number" class="form-control"
                                                name="products[{{ $loop->iteration }}][n5_qty]"
                                                value="{{ $order_detail->n5_qty }}"></td>
                                        @if ($is_purchase_planning == 0)
                                            <td><button type="button" class="btn btn-danger btn-sm remove-product"><i
                                                        class="bi bi-trash"></i></button></td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </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>
        </form>
    </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>
    <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(@json(collect($order_details)->pluck('product_id')));
        $(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') }}');

            let is_pp = @json($is_purchase_planning);
            if (is_pp == 1) {
                $('.card-body input, select').prop('disabled', true);
                $('#additem').prop('disabled', true);
                $('.remove-product').prop('disabled', true);
                $('#status').prop('disabled', false);
                $('#inputGroupFile02').prop('disabled', false);
            }

            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 = @json($order_details).length + 1;

        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