@extends('layouts.app')
@section('title')
    Purchase Order Create
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('purchase_order.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }
    </style>
    <form method="post" action="{{ route('purchase_order.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <h5>Purchase Order</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">PO No</label>
                            <div class="col-6">
                                <input type="text" readonly name="ref_no" id="ref_no" class="form-control rounded-4"
                                    value="{{ $ref_no }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="supplier_id" class="form-label col-4">Supplier</label>
                            <div class="col-6">
                                <select name="supplier_id" id="supplier_id" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" @selected(old('supplier_id') == $supplier->id)>
                                            {{ $supplier->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="quotation_ref_no" class="form-label col-4">Your Ref. No. (optional)</label>
                            <div class="col-6">
                                <input type="text" name="quotation_ref_no" id="quotation_ref_no"
                                    value="{{ old('quotation_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="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="payment_term" class="form-label col-4">Payment Term</label>
                            <div class="col-6">
                                <input type="text" name="payment_term" value="{{ old('payment_term') }}"
                                    id="payment_term" 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="required_date" class="form-label col-4">Delivery date</label>
                            <div class="col-6">
                                <input type="text" name="required_date" id="required_date" class="form-control rounded-4"
                                    value="{{ date('d/m/Y') }}">
                            </div>
                        </div>
                    </div>

                </div>
                <br>
                <div class="row mt-3">
                    <div class="col-lg-12 col-sm-12 col-12">
                        <div class="d-flex flex-wrap align-items-center gap-4">
                            <div class="form-check ">
                                <input class="form-check-input" name="po_manual" type="checkbox"
                                    @checked(old('po_manual')) value="1" id="manual_po">
                                <label class="form-check-label" for="flexCheckDefault">
                                    Manual
                                </label>
                            </div>
                            <div class="mt-1 d-flex align-items-center">
                                <label class="form-label me-2" for="pp_pr">PP No</label>
                                <div class="d-flex align-items-center">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="pp_pr" name="pp_pr"
                                            @checked(old('pp_pr')) value="1">
                                    </div>
                                </div>
                                <label class="form-check-label" for="pp_pr">PR No</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 purchase_planning @if (old('pp_pr')) d-none @endif">
                        <div class="row align-items-center mt-5">
                            <label for="pp_id" class="form-label col-4">Ref No. <a href="#" target="_blank"
                                    id="pp_view" type="button">
                                    <i class="bi bi-eye"></i></a></label>
                            <div class="col-6">

                                <select name="pp_id" id="pp_id" class="form-select" onchange="get_pp()"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($purchase_plannings as $purchase_planning)
                                        <option value="{{ $purchase_planning->id }}" @selected(old('pp_id') == $purchase_planning->id)>
                                            {{ $purchase_planning->ref_no }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 purchase_requisition @if (!old('pp_pr')) d-none @endif"
                        onchange="get_pr()">
                        <div class="row align-items-center mt-5">
                            <label for="pr_id" class="form-label col-4">Ref No. <a href="#" target="_blank"
                                    id="pr_view" type="button">
                                    <i class="bi bi-eye"></i></a></label>
                            <div class="col-6">
                                <select name="pr_id" id="pr_id" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($purchase_requisitions as $purchase_requisition)
                                        <option value="{{ $purchase_requisition->id }}" @selected(old('pr_id') == $purchase_requisition->id)>
                                            {{ $purchase_requisition->pr_no }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-5">
                        <div class="row align-items-center">
                            <label for="department_id" class="form-label col-4">Department</label>
                            <div class="col-6">
                                <select name="department_id" id="department_id" class="form-select"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}" @selected(old('department_id') == $department->id)>
                                            {{ $department->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </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" name="requested_by" id="requested_by" readonly
                                    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="purpose" class="form-label col-4">Purpose</label>
                            <div class="col-6">
                                <input type="text" name="purpose" id="purpose" class="form-control rounded-4"
                                    rows="1">
                            </div>
                        </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 }}" @selected($item->id == 75)>
                                            {{ $item->symbol }} - {{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </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="" selected disabled>Please Select</option>
                                    <option value="in-progress" @selected(old('status') == 'in-progress')>In Progress</option>

                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-end">
                        <button type="button" class="btn btn-primary" id="AddProduct" disabled><i
                                class="bi bi-plus-square"></i> Add Products</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0" id="productTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Part No</th>
                                        <th>Part Name</th>
                                        <th>Supplier Product Code</th>
                                        <th>UOM</th>
                                        <th>Price (<span id="changeSymbol">RM</span>)</th>
                                        <th>Qty</th>
                                        <th>Total Amount</th>
                                        <th>Lead time (week)</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (old('products'))
                                        @foreach (old('products') as $index => $product)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    <input type="hidden"
                                                        name="products[{{ $index }}][product_id]"
                                                        value="{{ $product['product_id'] }}" class="product_id"> <input
                                                        type="hidden" name="products[{{ $index }}][part_no]"
                                                        value="{{ $product['part_no'] }}" class="part_no">
                                                    {{ $product['part_no'] ?? '' }}
                                                </td>
                                                <td>{{ $product['part_name'] ?? '' }} <input type="hidden"
                                                        name="products[{{ $index }}][part_name]"
                                                        value="{{ $product['part_name'] }}" class="part_name"></td>
                                                <td>{{ $product['supplier_product_code'] ?? '' }} <input type="hidden"
                                                        name="products[{{ $index }}][supplier_product_code]"
                                                        value="{{ $product['supplier_product_code'] }}" class="supplier_product_code"></td>
                                                <td>
                                                    <input type="text" readonly class="form-control unit"
                                                        name="products[{{ $index }}][unit]"
                                                        value="{{ $product['unit'] }}">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control price decimals"
                                                        name="products[{{ $index }}][price]"
                                                        value="{{ $product['price'] }}">
                                                </td>
                                                <td>
                                                    <input type="number" readonly class="form-control qty"
                                                        name="products[{{ $index }}][qty]"
                                                        value="{{ $product['qty'] }}">
                                                </td>
                                                <td>
                                                    <input type="number" readonly class="form-control total"
                                                        name="products[{{ $index }}][total]"
                                                        value="{{ $product['total'] }}">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control leadtime"
                                                        name="products[{{ $index }}][leadtime]"
                                                        value="{{ $product['leadtime'] }}">
                                                </td>
                                                <td>
                                                    <button class="btn btn-danger removeRow" type="button"><i
                                                            class="bi bi-trash"></i></button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif

                                </tbody>
                            </table>
                        </div>
                    </div>
                </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="total_qty" class="form-label col-4">Total Quantity</label>
                            <div class="col-6">
                                <input type="text" readonly id="total_qty" name="total_qty"
                                    value="{{ old('total_qty') }}" 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="total_amount_inword" class="form-label col-4">Grand Total amount (inword)</label>
                            <div class="col-6">
                                <input type="text" id="total_amount_inword" name="total_amount_inword"
                                    value="{{ old('total_amount_inword') }}" 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="net_total" class="form-label col-4">Grand Total amount</label>
                            <div class="col-6">
                                <input type="text" readonly id="net_total" name="net_total"
                                    value="{{ old('net_total') }}" class="form-control rounded-4">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-4 col-sm-6 col-12 mt-3">
                            <div class="row align-items-center">
                                <label for="special_requirements" class="form-label">Special Requirements</label>
                                <textarea type="text" name="special_requirements" id="special_requirements" class="form-control rounded-4"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Manual MODAL --}}
                <div class="modal fade" id="manual_Modal" tabindex="-1" aria-labelledby="manual_ModalTitle"
                    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="manual_ModalTitle">
                                    PRODUCTS
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close" onclick="selectedRowsProducts = {};$('#prModalmanualModalTableTable input:checked').prop('checked', false);manualModalTable.ajax.reload();"></button>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered m-0 w-100 server-side-table" id="manualModalTable">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <input type="checkbox" id="selectAll">
                                                </th>
                                                <th>Part No</th>
                                                <th>Part Name</th>
                                                <th>Type of Product</th>
                                                <th>Supplier</th>
                                                <th>Supplier Product Code</th>
                                                <th>UOM</th>
                                                <th>Price</th>
                                                <th>Lead Time</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 = {};$('#prModalmanualModalTableTable input:checked').prop('checked', false);manualModalTable.ajax.reload();">
                                    CANCEL
                                </button>
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                                    onclick="add_product()">
                                    ADD
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- PP MODAL --}}
                <div class="modal fade" id="ppModalCenter" tabindex="-1" aria-labelledby="ppModalCenterTitle"
                    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="ppModalCenterTitle">
                                    PRODUCTS
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered m-0 w-100" id="ppModalTable">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <input type="checkbox" id="selectAll1">
                                                </th>
                                                <th>Part No</th>
                                                <th>Part Name</th>
                                                <th>Type of Product</th>
                                                <th>Supplier</th>
                                                <th>Supplier Product Code</th>
                                                <th>UOM</th>
                                                <th>Price</th>
                                                <th>Qty</th>
                                                <th>Lead Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                                    CANCEL
                                </button>
                                <button type="button" class="btn btn-primary" onclick="add_product()">
                                    ADD
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- PR MODAL --}}
                <div class="modal fade" id="prModalCenter" tabindex="-1" aria-labelledby="prModalCenterTitle"
                    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="prModalCenterTitle">
                                    PRODUCTS
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered m-0 w-100" id="prModalTable">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <input type="checkbox" id="selectAll2">
                                                </th>
                                                <th>Part No</th>
                                                <th>Part Name</th>
                                                <th>Type of Product</th>
                                                <th>Supplier</th>
                                                <th>Supplier Product Code</th>
                                                <th>UOM</th>
                                                <th>Price</th>
                                                <th>Qty</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal">
                                    CANCEL
                                </button>
                                <button type="button" class="btn btn-primary" onclick="add_product()">
                                    ADD
                                </button>
                            </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">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        let sale_tax;
        var planning;
        var requisition;
        let productTable;
        let ppModalTable;
        let prModalTable;
        let purchase_price;
        var purchase_planning_ViewUrlTemplate = '{{ route('purchase_planning.view', ':purchase_planningId') }}';
        var purchase_requisition_ViewUrlTemplate = '{{ route('purchase_requisition.view', ':purchase_requisitionId') }}';
        var selectedRowsProducts = {};

        $(document).ready(function() {


            $('#currencyDropdown').change(function() {
                var selectedText = $(this).find('option:selected').text();
                var symbol = selectedText.split('-')[0].trim();
                if (symbol == "Select a Currency") {
                    $('#changeSymbol').text("RM");
                    return;
                }
                $('#changeSymbol').text(symbol);
            });


            $('#date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            });

            $('#required_date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            }).datepicker("setDate", new Date());

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

            if ($('#supplier_id').val() != null) {
                var id = $('#pp_id').val();
                if ($('#pp_pr').is(':checked')) {
                    id = $('#pr_id').val();
                }
                if (id != null) {
                    $('#AddProduct').removeAttr('disabled');
                    $.ajax({
                        url: '{{ route('purchase_order.get_create_data') }}',
                        type: 'GET',
                        data: {
                            supplier_id: $('#supplier_id').val(),
                            id: id,
                            is_pp: $('#pp_pr').is(':checked') ? false : true
                        },
                        success: function(response) {
                            let existingProductIds = [];
                            $('#productTable .product_id').each(function() {
                                existingProductIds.push($(this).val());
                            });
                            ppModalTable.clear().draw(false);
                            prModalTable.clear().draw(false);
                            if ($('#pp_pr').is(':checked')) {
                                response.forEach(function(element) {
                                    if (!existingProductIds.includes(element.id?.toString())) {
                                        prModalTable.row.add([
                                            `<input type="checkbox" class="product_id" value="${element.product?.id}"/>`,
                                            element.product?.part_no,
                                            element.product?.part_name,
                                            element.product?.type_of_products?.type,
                                            element.supplier_name,
                                            element.product?.supplier_product_code ?? '-',
                                            element.product?.units?.name,
                                            element.price,
                                            element.qty
                                        ]).draw(false);
                                    }
                                });
                            } else {
                                response.forEach(function(element) {
                                    if (!existingProductIds.includes(element.id?.toString())) {
                                        let price = element.customer_supplier == 1 ? element
                                            .purchase_price : element.selling_price;
                                        ppModalTable.row.add([
                                            `<input type="checkbox" class="product_id" value="${element.id}"/>`,
                                            element.part_no,
                                            element.part_name,
                                            element.type,
                                            element.supplier_name,
                                            element.supplier_product_code ?? '-',
                                            element.uom,
                                            price,
                                            element.qty,
                                            element.leadtime ?? 0
                                        ]).draw(false);
                                    }
                                });
                            }
                        }
                    });
                }
            }

            $(document).on('change click', '#pp_pr, #manual_po', function() {
                if (this.id === 'pp_pr' && $(this).is(':checked')) {
                    $('#manual_po').prop('disabled', true);
                } else if (this.id === 'pp_pr' && !$(this).is(':checked')) {
                    $('#manual_po').prop('disabled', false);
                }

                if (this.id === 'manual_po' && $(this).is(':checked')) {
                    $('#pp_pr').prop('disabled', true);
                    $('#pp_id').prop('disabled', true);
                } else if (this.id === 'manual_po' && !$(this).is(':checked')) {
                    $('#pp_pr').prop('disabled', false);
                    $('#pp_id').prop('disabled', false);
                }
            });

            $(document).on('change', '#supplier_id,#pp_id,#pr_id,#manual_po,#pp_pr', function() {
                var value = $('#supplier_id').val();
                var id = $('#pp_id').val();
                if ($('#pp_pr').is(':checked')) {
                    id = $('#pr_id').val();
                }

                if (value != null && $('#manual_po').is(':checked')) {
                    $('#AddProduct').removeAttr('disabled');
                } else if (value != null && id != null) {
                    $('#AddProduct').removeAttr('disabled');
                    $.ajax({
                        url: '{{ route('purchase_order.get_create_data') }}',
                        type: 'GET',
                        data: {
                            supplier_id: value,
                            id: id,
                            is_pp: $('#pp_pr').is(':checked') ? false : true
                        },
                        success: function(response) {
                            ppModalTable.clear().draw(false);
                            prModalTable.clear().draw(false);
                            if ($('#pp_pr').is(':checked')) {
                                response.forEach(function(element) {
                                    prModalTable.row.add([
                                        `<input type="checkbox" class="product_id" value="${element.product?.id}"/>`,
                                        element.product?.part_no,
                                        element.product?.part_name,
                                        element.product?.type_of_products?.type,
                                        element.supplier_name,
                                        element.product?.supplier_product_code ?? '-',
                                        element.product?.units?.name,
                                        element.price,
                                        element.qty
                                    ]).draw(false);
                                });
                            } else {
                                response.forEach(function(element) {
                                    let price = element.customer_supplier == 1 ? element
                                        .purchase_price : element.selling_price;
                                    ppModalTable.row.add([
                                        `<input type="checkbox" class="product_id" value="${element.id}"/>`,
                                        element.part_no,
                                        element.part_name,
                                        element.type,
                                        element.supplier_name,
                                        element.supplier_product_code ?? '-',
                                        element.uom,
                                        price,
                                        element.qty,
                                        element.leadtime ?? 0
                                    ]).draw(false);
                                });
                            }
                        }
                    });
                } else {
                    $('#AddProduct').attr('disabled', true);
                }
            })

            $('#pp_pr').on('change', function() {
                productTable.clear().draw(false);
                $('#AddProduct').attr('disabled', true);
                if ($(this).is(':checked')) {
                    $('.purchase_requisition').removeClass('d-none');
                    $('.purchase_requisition').find('.select2-container').addClass('w-100');
                    $('.purchase_planning').addClass('d-none');
                } else {
                    $('.purchase_planning').removeClass('d-none');
                    $('.purchase_requisition').addClass('d-none');
                }
            });

            planning = {!! json_encode($purchase_plannings) !!};
            requisition = {!! json_encode($purchase_requisitions) !!};

            sale_tax = {!! json_encode($sale_tax) !!};
        });

        $('#AddProduct').on('click', function() {
            if ($('#pp_pr').is(':checked')) {
                $('#prModalCenter').modal('show');
            } else if ($('#manual_po').is(':checked')) {
                $('#manual_Modal').modal('show');
                if ($("#manualModalTable tbody tr").length == 0) {
                    renderManualProducts();
                }
            } else {
                $('#ppModalCenter').modal('show');
            }
        });

        function renderManualProducts() {
            table = $('#manualModalTable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product.server-side') }}",
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        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}>
                            `;
                        },
                        orderable: false,
                        searchable: false
                    }, {
                        data: 'part_no',
                        name: 'part_no',
                    },
                    {
                        data: 'part_name',
                        name: 'part_name',
                    },
                    {
                        data: 'type_of_product',
                        name: 'type_of_product',
                        defaultContent: ''
                    },
                    {
                        data: 'supplier_name',
                        name: 'supplier_name',
                        defaultContent: ''
                    },
                    {
                        data: 'supplier_product_code',
                        name: 'supplier_product_code',
                        defaultContent: '-'
                    },
                    {
                        data: 'unit',
                        name: 'unit',
                        defaultContent: ''
                    },
                    {
                        data: 'price',
                        name: 'price',
                    },
                    {
                        data: 'lead_time',
                        name: 'lead_time',
                    },

                ],
                paging: true,
                pagingType: 'input',
            });
            bool = false;

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


        }

        function get_pp() {
            productTable.clear().draw(false);
            var ppId = $("#pp_id").val();
            var pp = planning.find(p => p.id == ppId);
            if (pp) {
                var purchase_planning_ViewUrl = purchase_planning_ViewUrlTemplate.replace(':purchase_planningId', ppId);
                $('#pp_view').attr('href', purchase_planning_ViewUrl);
            } else {
                $('#pp_view').attr('href', '#');
            }
        };

        function get_pr() {
            productTable.clear().draw(false);
            var prId = $("#pr_id").val();
            var pr = requisition.find(p => p.id == prId);
            if (pr) {
                var purchase_requisition_ViewUrl = purchase_requisition_ViewUrlTemplate.replace(':purchase_requisitionId',
                    prId);
                $('#pr_view').attr('href', purchase_requisition_ViewUrl);
            } else {
                $('#pr_view').attr('href', '#');
            }
        };

        function add_product() {
            if ($('#pp_pr').is(':checked')) {
                $('#prModalTable').find('.product_id:checked').each(function() {
                    let index = productTable.rows().data().length + 1;
                    $tr = $(this).closest('tr');
                    productTable.row.add([
                        index,
                        `<input type="hidden" name="products[${index}][product_id]" class="product_id" value="${$(this).val()}"> <input type="hidden" class="part_no" name="products[${index}][part_no]" value="${$tr.find('td:eq(1)').text().trim()}">
                        ${$tr.find('td:eq(1)').text().trim()}`,
                        `${$tr.find('td:eq(2)').text().trim()}<input type="hidden" class="part_name" name="products[${index}][part_name]" value="${$tr.find('td:eq(2)').text().trim()}">`,
                        `${$tr.find('td:eq(5)').text().trim()}<input type="hidden" class="supplier_product_code" name="products[${index}][supplier_product_code]" value="${$tr.find('td:eq(5)').text().trim()}">`,
                        `<input type="hidden" class="type" value="${$tr.find('td:eq(3)').text().trim()}"><input type="hidden" class="supplier" value="${$tr.find('td:eq(4)').text().trim()}"><input type="text" readonly class="form-control unit" name="products[${index}][unit]" value="${$tr.find('td:eq(6)').text().trim()}">`,
                        `<input type="number" step="any" class="form-control price decimals" name="products[${index}][price]" value="${$tr.find('td:eq(7)').text().trim()}">`,
                        `<input type="number" step="any" readonly class="form-control qty" name="products[${index}][qty]" value="${$tr.find('td:eq(8)').text().trim()}">`,
                        `<input type="number" step="any" readonly class="form-control total" name="products[${index}][total]" value="${$tr.find('td:eq(7)').text().trim() * $tr.find('td:eq(8)').text().trim()}">`,
                        `<input type="number" step="any" class="form-control leadtime" name="products[${index}][leadtime]" value="0">`,
                        `<button class="btn btn-danger removeRow" type="button"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    prModalTable.row($tr).remove().draw(false);
                });
                $('#prModalTable').find('.product_id').prop('checked', false);
                calculateTotals();
            } else if ($('#manual_po').is(':checked')) {
                $('#manualModalTable').find('.product_id:checked').each(function() {

                    let newProductId = $(this).val();
                    let isDuplicate = false;

                    productTable.rows().every(function() {
                        let existingProductId = $(this.node()).find('.product_id').val();
                        if (existingProductId === newProductId) {
                            isDuplicate = true;
                            return false;
                        }
                    });

                    if (isDuplicate) {
                        return;
                    }

                    let index = productTable.rows().data().length + 1;
                    $tr = $(this).closest('tr');
                    productTable.row.add([
                        index,
                        `<input type="hidden" name="products[${index}][product_id]" class="product_id" value="${$(this).val()}"> <input type="hidden" class="part_no" name="products[${index}][part_no]" value="${$tr.find('td:eq(1)').text().trim()}">
                        ${$tr.find('td:eq(1)').text().trim()}`,
                        `${$tr.find('td:eq(2)').text().trim()}<input type="hidden" class="part_name" name="products[${index}][part_name]" value="${$tr.find('td:eq(2)').text().trim()}">`,
                        `${$tr.find('td:eq(5)').text().trim()}<input type="hidden" class="supplier_product_code" name="products[${index}][supplier_product_code]" value="${$tr.find('td:eq(5)').text().trim()}">`,
                        `<input type="hidden" class="type" value="${$tr.find('td:eq(3)').text().trim()}"><input type="hidden" class="supplier" value="${$tr.find('td:eq(4)').text().trim()}"><input type="text" readonly class="form-control unit" name="products[${index}][unit]" value="${$tr.find('td:eq(6)').text().trim()}">`,
                        `<input type="number" step="any" class="form-control price decimals" name="products[${index}][price]" value="${$tr.find('td:eq(7)').text().trim()}">`,
                        `<input type="number" step="any"  class="form-control qty" name="products[${index}][qty]" value="0">`,
                        `<input type="number" step="any" readonly class="form-control total" name="products[${index}][total]" value="${$tr.find('td:eq(6)').text().trim() * $tr.find('td:eq(7)').text().trim()}">`,
                        `<input type="number"  step="any" class="form-control leadtime" name="products[${index}][leadtime]" value="0">`,
                        `<button class="btn btn-danger removeRow" type="button"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    prModalTable.row($tr).remove().draw(false);
                });
                $('#manualModalTable').find('.product_id').prop('checked', false);
                calculateTotals();
            } else {
                $('#ppModalTable').find('.product_id:checked').each(function() {
                    let index = productTable.rows().data().length + 1;
                    $tr = $(this).closest('tr');
                    productTable.row.add([
                        index,
                        `<input type="hidden" name="products[${index}][product_id]" class="product_id" value="${$(this).val()}"><input type="hidden" class="part_no" name="products[${index}][part_no]" value="${$tr.find('td:eq(1)').text().trim()}">
                        ${$tr.find('td:eq(1)').text().trim()}`,
                        `${$tr.find('td:eq(2)').text().trim()}<input type="hidden" class="part_name" name="products[${index}][part_name]" value="${$tr.find('td:eq(2)').text().trim()}">`,
                        `${$tr.find('td:eq(5)').text().trim()}<input type="hidden" class="supplier_product_code" name="products[${index}][supplier_product_code]" value="${$tr.find('td:eq(5)').text().trim()}">`,
                        `<input type="hidden" class="type" value="${$tr.find('td:eq(3)').text().trim()}"><input type="hidden" class="supplier" value="${$tr.find('td:eq(4)').text().trim()}"><input type="text" readonly class="form-control unit" name="products[${index}][unit]" value="${$tr.find('td:eq(6)').text().trim()}">`,
                        `<input type="number" step="any" class="form-control price decimals" name="products[${index}][price]" value="${$tr.find('td:eq(7)').text().trim()}">`,
                        `<input type="number" step="any" readonly class="form-control qty" name="products[${index}][qty]" value="${$tr.find('td:eq(8)').text().trim()}">`,
                        `<input type="number" step="any" readonly class="form-control total" name="products[${index}][total]" value="${$tr.find('td:eq(7)').text().trim() * $tr.find('td:eq(8)').text().trim()}">`,
                        `<input type="number" step="any" class="form-control leadtime" name="products[${index}][leadtime]" value="${$tr.find('td:eq(9)').text().trim()}">`,
                        `<button class="btn btn-danger removeRow" type="button"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    ppModalTable.row($tr).remove().draw(false);
                });
                $('#ppModalTable').find('.product_id').prop('checked', false);
                calculateTotals();
            }
        }

        $(document).on('click', '.removeRow', function() {
            let row = $(this).closest('tr');
            if ($('#pp_pr').is(':checked')) {
                prModalTable.row.add([
                    `<input type="checkbox" class="product_id" value="${row.find('.product_id').val()}"/>`,
                    row.find('.part_no').val(),
                    row.find('.part_name').val(),
                    row.find('.type').val(),
                    row.find('.supplier').val(),
                    row.find('.supplier_product_code').val(),
                    row.find('.unit').val(),
                    row.find('.price').val(),
                    row.find('.qty').val()
                ]).draw(false);
            } else {
                ppModalTable.row.add([
                    `<input type="checkbox" class="product_id" value="${row.find('.product_id').val()}"/>`,
                    row.find('.part_no').val(),
                    row.find('.part_name').val(),
                    row.find('.type').val() ?? '',
                    row.find('.supplier').val() ?? '',
                    row.find('.supplier_product_code').val() ?? '',
                    row.find('.unit').val() ?? '',
                    row.find('.price').val(),
                    row.find('.qty').val(),
                    row.find('.leadtime').val() ?? ''
                ]).draw(false);
            }
            productTable.row(row).remove().draw(false);
        });

        $(document).on('input', '.price,.qty', function() {
            let row = $(this).closest('tr');

            let price = parseFloat(row.find('.price').val()) || 0;
            let qty = parseFloat(row.find('.qty').val()) || 0;

            let total = price * qty;

            row.find('.total').val(total.toFixed(2));
            calculateTotals()
        });

        function updateRowTotal(row) {
            let price = parseFloat(row.find('.price').val()) || 0;
            let qty = parseFloat(row.find('.qty').val()) || 0;
            let total = price * qty;

            row.find('.total').val(total.toFixed(2));
            calculateTotals();
        }

        document.getElementById('selectAll').addEventListener('change', function() {
            const table = document.getElementById('manualModalTable');
            const checkboxes = table.querySelectorAll('.product_id'); // Only checkboxes inside manualModalTable
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });

        document.getElementById('selectAll1').addEventListener('change', function() {
            const table = document.getElementById('ppModalTable');
            const checkboxes = table.querySelectorAll('.product_id'); // Only checkboxes inside ppModalTable
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });

        document.getElementById('selectAll2').addEventListener('change', function() {
            const table = document.getElementById('prModalTable');
            const checkboxes = table.querySelectorAll('.product_id'); // Only checkboxes inside prModalTable
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });


        function calculateTotals() {
            let totalQuantity = 0;
            let netTotal = 0;
            let num = 0;
            let numberinwords = '';

            $('#productTable tbody tr').each(function() {
                let qty = parseFloat($(this).find('.qty').val()) || 0;
                let price = parseFloat($(this).find('.price').val()) || 0;
                let total = parseFloat($(this).find('.total').val()) || 0;

                totalQuantity += qty;
                netTotal += total;
            });

            $('#total_qty').val(totalQuantity);
            $('#net_total').val(netTotal.toFixed(2));

            numberinwords = numberToWords(netTotal.toFixed(2))
            $('#total_amount_inword').val(numberinwords);
        }

        function numberToWords(num) {
            if (num === 0) return 'zero';

            const belowTwenty = [
                'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine',
                'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen',
                'eighteen', 'nineteen'
            ];

            const tens = [
                '', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'
            ];

            const aboveHundred = [
                '', 'thousand', 'million', 'billion'
            ];

            function convertChunk(number) {
                let str = '';
                if (number >= 100) {
                    str += belowTwenty[Math.floor(number / 100)] + ' hundred';
                    number %= 100;
                    if (number > 0) str += ' and ';
                }
                if (number >= 20) {
                    str += tens[Math.floor(number / 10)];
                    number %= 10;
                    if (number > 0) str += '-' + belowTwenty[number];
                } else if (number > 0) {
                    str += belowTwenty[number];
                }
                return str;
            }

            function convertNumber(number) {
                let chunks = [];
                let chunkIndex = 0;
                while (number > 0) {
                    let chunk = number % 1000;
                    if (chunk > 0) {
                        chunks.push(convertChunk(chunk) + ' ' + aboveHundred[chunkIndex]);
                    }
                    number = Math.floor(number / 1000);
                    chunkIndex++;
                }
                return chunks.reverse().join(', ').trim();
            }

            // Convert the integer part to words
            let integerPart = Math.floor(num);
            let integerWords = convertNumber(integerPart);

            // Handle decimal part
            let decimalPart = Math.round((num % 1) * 100); // Get two decimal places
            let decimalWords = '';
            if (decimalPart > 0) {
                decimalWords = ' and ' + convertNumber(decimalPart) + ' cents';
            }

            return integerWords + decimalWords;
        }
    </script>
@endsection