@extends('layouts.app')
@section('title')
    Purchase Requisition Create
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('purchase_requisition.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <form method="post" action="{{ route('purchase_requisition.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row">

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="category" class="form-label col-4">Category:</label>
                            <div class="col-6">
                                <select name="category" id="category" class="form-select rounded-4"
                                    style="width: 100% !important;">
                                    <option value="local">Local</option>
                                    <option value="oversea">Oversea</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="pr_no" class="form-label col-4">PR No.</label>
                            <div class="col-6">
                                <input type="text" readonly name="pr_no" value="{{ $ref_no }}" readonly
                                    id="part_name" 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="" class="form-label col-4">Date :</label>
                            <div class="col-6">
                                <input type="text" value="{{ date('d/m/Y') }}" id="date" name="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="requested_by" class="form-label col-4">Requested By</label>
                            <div class="col-6">
                                <input type="text" readonly name="requested_by" id="requested_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="" class="form-label col-4">Department</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ $department ? $department->name : '' }}"
                                    class="form-control rounded-4">
                            </div>
                            <input type="text" hidden name="department_id"
                                value="{{ $department ? $department->id : '' }}" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="category" class="form-label col-4">Currency:</label>
                            <div class="col-6">
                                <select name="currency" id="currencyDropdown" class="form-select rounded-4"
                                    style="width: 100% !important;">
                                    <option value="-1">Select a Currency</option>
                                    @foreach ($Currency as $item)
                                    <option value="{{ $item->id }}" >{{ $item->symbol }} - {{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row d-flex flex-row-reverse">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="category" class="form-label col-4">Currency Rate(In MYR):</label>
                            <div class="col-6">
                                <input type="number" step="0.01" name="currency_rate" id="currency_rate"
                                    class="form-control rounded-4" placeholder="Currecny Rate for Selected Currency ">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-12 d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Item List</h3>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" id="addRowButton"
                            data-bs-target="#myModal"><i class="bi bi-plus-square"></i> Add Item</button>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-sm-12 my-5">
                                <div class="table-responsive">
                                    <table class="table table-bordered m-0" id="mainTable">
                                        <thead>
                                            <tr>

                                                <th>No.</th>
                                                <th>Part No.</th>
                                                <th>Part Name</th>
                                                <th>Description</th>
                                                <th>UOM</th>

                                                <th> UNIT Price (<span id="currencyUnitText">based currency</span>)</th>
                                                <th>Quantity (UNIT)</th>
                                                <th>Total Amount (<span id="currencyUnitText1">based currency</span>)</th>
                                                <th>Required Date</th>
                                                <th>Purpose</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>


                                            @if (old('products'))
                                                @foreach (old('products') as $key => $purchase_detail)
                                                    <tr>
                                                        <td>{{ $key }}</td>
                                                        <td><input type="hidden" class="product_id"
                                                                name="products[{{ $key }}][product_id]"
                                                                value="{{ $purchase_detail['product_id'] }}"><input
                                                                type="hidden" value="{{ $purchase_detail['part_no'] }}"
                                                                name="products[{{ $key }}][part_no]">{{ $purchase_detail['part_no'] }}
                                                        </td>
                                                        <td><input type="hidden"
                                                                value="{{ $purchase_detail['part_name'] }}"
                                                                name="products[{{ $key }}][part_name]">{{ $purchase_detail['part_name'] ?? '' }}
                                                            <input type="hidden" value="{{ $purchase_detail['unit'] }}"
                                                                name="products[{{ $key }}][unit]" class="unit">
                                                            <input type="hidden" value="{{ $purchase_detail['modal'] }}"
                                                                name="products[{{ $key }}][modal]"
                                                                class="modal">
                                                            <input type="hidden"
                                                                value="{{ $purchase_detail['varient'] }}"
                                                                name="products[{{ $key }}][varient]"
                                                                class="varient">
                                                            <input type="hidden" value="{{ $purchase_detail['type'] }}"
                                                                name="products[{{ $key }}][type]"
                                                                class="type">
                                                        </td>
                                                        <input type="hidden" value="{{ $purchase_detail['category'] }}"
                                                            name="products[{{ $key }}][category]"
                                                            class="category">
                                                        </td>
                                                        <td><input type="number" readonly class="form-control price"
                                                                readonly name="products[{{ $key }}][price]"
                                                                value="{{ $purchase_detail['price'] }}"></td>
                                                        <td><input type="number" readonly class="form-control qty"
                                                                name="products[{{ $key }}][qty]" value="0">
                                                        </td>
                                                        <td><input type="number" readonly class="form-control total"
                                                                readonly name="products[{{ $key }}][total]"
                                                                value="{{ $purchase_detail['total'] }}" readonly></td>
                                                        <td><input type="text" readonly class="form-control purpose"
                                                                name="products[{{ $key }}][purpose]"></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>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Total Amount (based currency)</label>
                            <div class="col-6">
                                <input type="text" step="0.01" id="total_based_currency" readonly name="total_based_currency"
                                    placeholder="sum total amount (based currency)" class="form-control rounded-4" oninput="formatDecimal(this)">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Budget Amount (based currency)</label>
                            <div class="col-6">
                                <input type="number" step="0.01" id="budget_amount_based_currency" name="budget_amount_based_currency"
                                    placeholder="Budget Amount (based currency)" 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="" class="form-label col-4">Total Amount (MYR)</label>
                            <div class="col-6">
                                <input type="text" id="grandtotal" readonly name="total"
                                    placeholder="sum total amount" class="form-control rounded-4" oninput="formatDecimal(this)">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Budget Amount (MYR)</label>
                            <div class="col-6">
                                <input type="number" id="budget_amount" name="budget_amount"
                                    placeholder="Budget Amount (MYR)" readonly 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="" class="form-label col-4">Existing/ Recommended supplier, if any:</label>
                            <div class="col-6">
                                <select class="form-select" name="supplier" id="supplier" style="width: 100% !important;">
                                    @if (old('supplier') != null)
                                        @php
                                            $supplier = App\Models\Supplier::find(old('supplier'));
                                        @endphp
                                        @if($supplier)
                                            <option value="{{ $supplier->id }}" selected style="color: black;">
                                                {{ $supplier->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Supplier Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Supplier</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label">Special Requirement</label>
                            <div class="col-8">
                                <textarea id="special_requirement" name="special_requirement" placeholder="Special Requirement"
                                    class="form-control rounded-4 auto-resize"  oninput="autoResizeTextarea(this)"></textarea>

                            </div>
                        </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">Print</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
            <div class="modal" id="myModal">
                <div class="modal-dialog modal-lg"> 
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">PRODUCTS</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" 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>Model</th>
                                            <th>Unit</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-secondary"
                                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 modalTable;
        let mainTable;
        var selectedRowsProducts = {};
        const addedProductIds = new Set();
        $(document).ready(function() {
            var value = $('#category').val();
                if(value == 'local'){
                    $('#currencyDropdown').val('75').trigger('change');
                }else{
                    $('#currencyDropdown').val('').trigger('change')
                }
            $('#category').on('change',function(){
                var value = $(this).val();
                if(value == 'local'){
                    $('#currencyDropdown').val('75').trigger('change');
                }else{
                    $('#currencyDropdown').val('').trigger('change')
                }
            })

            function updateCurrencyUnitText() {
                const selectedText = $('#currencyDropdown option:selected').text();
                const symbol = selectedText.split('-')[0].trim();

               if (symbol === "Select a Currency" || symbol === "") {
                    $('#currencyUnitText').text("based currency");
                    $('#currencyUnitTex1').text("based currency");
                } else {
                    $('#currencyUnitText').text(symbol);
                    $('#currencyUnitText1').text(symbol);
                }
            }

            $('#currencyDropdown').on('change', updateCurrencyUnitText);
            $(document).ready(function () {
                updateCurrencyUnitText();
            });


            $('#budget_amount_based_currency').on('keyup',function(){
                var value = +$(this).val();
                var value2 = $('#currency_rate').val();
                var value3 = value * value2;
                $('#budget_amount').val(value3);
            })

            $(document).on('mouseenter', '.select2-selection__rendered', function() {
                $('.select2-selection__rendered').removeAttr('data-bs-original-title');
            });
            modalTable = $('#modalTable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product.purchase.requisition.products.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();
            total = 0;
            grand_total = 0;


            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.name || item.type,
                                        id: item.id,
                                        data: item
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#supplier', 'Select Supplier', '{{ route("supplier.search") }}');
            
            function autoResizeTextarea(textarea) {
                textarea.style.height = 'auto'; 
                textarea.style.height = textarea.scrollHeight + 'px'; 
            }
            document.addEventListener('DOMContentLoaded', function () {
                const textarea = document.getElementById('special_requirement');
                if (textarea) {
                    autoResizeTextarea(textarea);
                }
            });
        });

            $(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;
                    var purchase_price = rowData.purchase_price;
                    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 ?? ''}">`,
                            `<input type="text"  class="form-control" name="products[${bool}][description]" value=""> `,
                            `${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 type="number" class="form-control purchase_price" step="any" name="products[${bool}][purchase_price]" value="${purchase_price}">`,
                            `<input type="number" class="form-control qty" step="any" name="products[${bool}][qty]">`,
                            `<input type="number" step="0.01" class="form-control total" step="any" readonly name="products[${bool}][total]">`,
                            `<input type="text" class="form-control date" autocomplete="off" placeholder="DD/MM/YYYY" name="products[${bool}][required_date]">`,
                            `<input type="text" class="form-control"  name="products[${bool}][purpose]">`,
                            `<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 ?? ''];
                        recalculateGrandTotal();
                        $('.date').datepicker({
                            format: 'dd/mm/yyyy',
                            autoclose: true,
                            todayHighlight: true,
                            orientation: 'bottom'
                        });
                    }
                    bool++;
                });

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

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

            $(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);
                recalculateGrandTotal();
                resetSerialNumbers(mainTable);
            });

            $(document).on('input', '.qty', function() {
                var qty = parseFloat($(this).val());
                    if (isNaN(qty)) {
                        qty = 0;
                    }
                    var price = $(this).closest('tr').find('.purchase_price').val();
                    var currency_rate = $('#currency_rate').val();
                    if (isNaN(price) && isNaN(qty)) {
                        price = 0;
                        qty = 0;
                    }
                    $(this).closest('tr').find('.total').val((price * qty).toFixed(2));
                recalculateGrandTotal();
            });

            $('#currency_rate').on('input', function(){
                recalculateGrandTotal();
            });

            function recalculateGrandTotal() {
                var grand_total = 0;
                mainTable.$('.total').each(function() {
                    var total_value = parseFloat($(this).val());
                    if (!isNaN(total_value)) {
                        grand_total += total_value;
                    }
                });
                var currency_rate = $('#currency_rate').val() == "" ? 0 : $('#currency_rate').val() ;
                $('#grandtotal').val((grand_total * currency_rate).toFixed(2));
                $('#total_based_currency').val(grand_total.toFixed(2));
            }

            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);
                    });
                }
            }

            function formatDecimal(input) {
                let value = input.value.replace(/[^0-9.]/g, '');
                const parsedValue = parseFloat(value);
                if (!isNaN(parsedValue)) {
                    input.value = parsedValue.toFixed(2);
                } else {
                    input.value = '';
                }
            }
    </script>
@endsection