@extends('layouts.app')
@section('title')
    Purchase Order Edit
@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.update', $purchase_order->id) }}" 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" name="ref_no" id="ref_no" class="form-control rounded-4"
                                    value="{{ $purchase_order->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($purchase_order->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"> Ref. No. (optional)</label>
                            <div class="col-6">
                                <input type="text" name="quotation_ref_no" id="quotation_ref_no"
                                    class="rounded-4 form-control" value="{{ $purchase_order->quotation_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="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="{{ $purchase_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="payment_term" class="form-label col-4">Payment Term</label>
                            <div class="col-6">
                                <input type="text" name="payment_term" value="{{ $purchase_order->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="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 datepicker-current-date rounded-4"
                                    value="{{ $purchase_order->required_date }}">
                            </div>
                        </div>
                    </div>

                </div>
                <br>
                <div class="row mt-3">
                    <div class="col-lg-12 col-sm-12 col-12">
                        <div class="mt-4 d-flex flex-wrap align-items-center gap-4">
                            <div class="form-check ">
                                <input class="form-check-input" name="po_manual" type="checkbox"
                                    @checked($purchase_order->po_manual == 1) 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 disabled class="form-check-input" type="checkbox" id="pp_pr"
                                            name="pp_pr" @checked($purchase_order->pp_pr == 1) value="1">
                                    </div>
                                </div>
                                <label class="form-check-label" for="pp_pr">PR No</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-lg-6 col-sm-6 col-12 purchase_planning @if ($purchase_order->pp_pr == 1) d-none @endif">
                        <div class="d-flex align-items-center">
                            <label for="pp_id" class="form-label col-4">Ref No.</label>
                            <div class="col-6">
                                <select name="pp_id" id="pp_id" class="form-select" onchange="get_pp()" disabled
                                    style="width: 100% !important;">
                                    <option value="{{ $purchase_order->pp_id }}" selected>
                                        {{ $purchase_order->purchase_planning->ref_no ?? '' }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div
                        class="col-lg-6 col-sm-6 col-12 purchase_requisition @if (!$purchase_order->pp_pr == 1) d-none @endif">
                        <div class="d-flex align-items-center">
                            <label for="pr_id" class="form-label col-4">Ref No.</label>
                            <div class="col-6">
                                <select name="pr_id" id="pr_id" class="form-select" onchange="get_pr()" disabled
                                    style="width: 100% !important;">
                                    <option value="{{ $purchase_order->pr_id }}" selected>
                                        {{ $purchase_order->purchase_requisition->pr_no ?? '' }}</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="department_id" class="form-label col-4">Department</label>
                            <div class="col-6">
                                <select name="department_id" id="department_id" class="form-select rounded-4"
                                    style="width: 100% !important;">
                                    <option value="" selected disabled>Please Select</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}" @selected($purchase_order->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="important_note" class="form-label col-4">Purpose</label>
                            <div class="col-6">
                                <textarea name="purpose" id="purpose" class="form-control rounded-4" rows="1">{{ $purchase_order->purpose }}</textarea>
                            </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 == $purchase_order->currency)>
                                            {{ $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($purchase_order->status == 'in-progress')>In Progress</option>
                                    <option value="completed" @selected($purchase_order->status == 'completed')>Completed</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"
                            @if ($purchase_order->supplier_id) @else disabled @endif><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>Sr 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</th>
                                        <th>Lead Time</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($purchase_order_details as $index => $purchase_order_detail)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>
                                                <input type="hidden" name="products[{{ $index }}][product_id]"
                                                    value="{{ $purchase_order_detail->product_id }}" class="product_id">
                                                <input type="hidden" class="form-control rounded-4 part_no"
                                                    name="products[{{ $index }}][part_no]"
                                                    value="{{ $purchase_order_detail->product->part_no ?? '' }}"
                                                    class="part_no">
                                                {{ $purchase_order_detail->product->part_no ?? '' }}
                                            </td>

                                            <td>{{ $purchase_order_detail->product->part_name ?? '' }}<input
                                                    type="hidden" name="products[{{ $index }}][part_name]"
                                                    value="{{ $purchase_order_detail->product->part_name ?? '' }}"
                                                    class="part_name"></td>

                                            <td>{{ $purchase_order_detail->product->supplier_product_code ?? '-' }}<input
                                                    type="hidden" name="products[{{ $index }}][supplier_product_code]"
                                                    value="{{ $purchase_order_detail->product->supplier_product_code ?? '' }}"
                                                    class="supplier_product_code"></td>        

                                            <td>{{ $purchase_order_detail->product->units->name }}</td>

                                            <td>
                                                <input type="number" class="form-control rounded-4 price" step="any"
                                                    name="products[{{ $index }}][price]"
                                                    value="{{ $purchase_order_detail->price }}">
                                            </td>
                                            <td>
                                                <input type="number" readonly class="form-control rounded-4 qty"
                                                    step="any" name="products[{{ $index }}][qty]"
                                                    value="{{ $purchase_order_detail->qty }}">
                                            </td>

                                            <td>
                                                <input type="number" readonly class="form-control rounded-4 total"
                                                    step="any" name="products[{{ $index }}][total]"
                                                    value="{{ $purchase_order_detail->total }}">
                                            </td>
                                            <td>
                                                <input type="number" class="form-control rounded-4 leadtime"
                                                    step="any" name="products[{{ $index }}][leadtime]"
                                                    value="{{ $purchase_order_detail->leadtime }}">
                                            </td>
                                            <td>
                                                <button class="btn btn-danger removeRow" type="button"><i
                                                        class="bi bi-dash"></i></button>
                                            </td>


                                        </tr>
                                    @endforeach
                            </table>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <h5>TOTAL SECTION</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="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="{{ $purchase_order->total_qty }}" class="form-control rounded-4"
                                    style="border-radius: 1rem;">
                            </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="{{ $purchase_order->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="{{ $purchase_order->net_total }}" class="form-control rounded-4">
                            </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="special_requirements" class="form-label">Special Requirements</label>
                            <div class="col-6">
                                <textarea type="text" name="special_requirements" id="special_requirements" class="form-control rounded-4">{{ $purchase_order->special_requirements ?? '' }}</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="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>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="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>
                                            </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="button" class="btn btn-success" data-bs-toggle="modal"
                            data-bs-target="#completeModal">Complete</button>
                        <a href="{{ route('purchase_order.preview', $purchase_order->id) }}" target="_blank"
                            class="btn-link">
                            <button type="button" class="btn btn-primary">Print</button>
                        </a>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <form action="{{ route('purchase_order.changestatus', $purchase_order->id) }}" method="get"
        id="decline_cancel_form">
        @csrf
        <div class="modal fade" id="completeModal" tabindex="-1" aria-labelledby="completeModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mx-auto" id="completeModalLabel">Complete Confirmation</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p>Are you sure you want to complete this Order? Cannot change once completed.</p>
                    </div>
                    <div class="modal-footer">
                        <div class="w-100 d-flex justify-content-between">
                            <button type="button" class="btn btn-outline-secondary"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Yes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        planning = {!! json_encode($purchase_plannings) !!};
        requisition = {!! json_encode($purchase_requisitions) !!};
        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);
            });

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

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

            if ($('#pp_pr').is(':checked')) {
                $('#manual_po').prop('disabled', true);
            } else {
                $('#manual_po').prop('disabled', false);
            }

            if ($('#manual_po').is(':checked')) {
                $('#pp_pr').prop('disabled', true);
                $('#pp_id').prop('disabled', true);
                $('.qty').removeAttr('readonly');
                $('.price').removeAttr('readonly');

            } else {
                $('#pp_pr').prop('disabled', false);
                $('#pp_id').prop('disabled', false);
            }


            if ($('#supplier_id').val() != null) {

                var id = $('#pp_id').val();

                if ($('#pp_pr').is(':checked')) {
                    id = $('#pr_id').val();
                    var pr = requisition.find(p => p.id == id);
                    if (pr) {
                        var purchase_requisition_ViewUrl = purchase_requisition_ViewUrlTemplate.replace(
                            ':purchase_requisitionId',
                            id);
                        $('#pr_view').attr('href', purchase_requisition_ViewUrl);
                    } else {
                        $('#pr_view').attr('href', '#');
                    }

                } else {
                    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', '#');
                    }
                }
                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');
                }
            });
        });
    
    </script>
    <script>
        let productTable;
        $(document).ready(function() {
            productTable = $('#productTable').DataTable();

            $('#bulk_required_date, #required_date').on('change', function() {
                updateRequiredDate();
            });

            updateRequiredDate();

            $('#productTable').on('change', '#wo_discount', function() {
                updateRowTotal($(this).closest('tr'));
                calculateTotals();
            });

            $('#bulk_wo_discount').on('change', function() {
                var isChecked = $(this).is(':checked');
                $('#productTable tbody tr').each(function() {
                    $(this).find('#wo_discount').prop('checked', isChecked);
                    updateRowTotal($(this));
                });
                calculateTotals();
            });

            $('#productTable').on('input', '.disc_percent, .sale_tax_percent', function() {
                updateRowTotal($(this).closest('tr'));
                calculateTotals();
            });

            $('#productTable').on('change', '#wo_discount', function() {
                let isChecked = false;
                $('#productTable tbody tr').each(function() {
                    if ($(this).find('#wo_discount').is(':checked')) {
                        isChecked = true;
                        return;
                    }
                });
                $('#bulk_wo_discount').prop('checked', isChecked);
            });
        });



        $('#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 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" class="form-control price decimals" name="products[${index}][price]" step="any" 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(7)').text().trim() * 0}">`,
                        `<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 updateRequiredDate() {
            if ($('#bulk_required_date').is(':checked')) {
                $('#productTable tbody tr').each(function() {
                    $(this).find('.required_date').val($('#required_date').val());
                });
            }
        }

        function updateRowTotal(row) {
            let price = parseFloat(row.find('.price').val()) || 0;
            let qty = parseFloat(row.find('.qty').val()) || 0;
            let discPerc = parseFloat(row.find('.disc_percent').val()) || 0;
            let saleTaxPerc = parseFloat(row.find('.sale_tax_percent').val()) || 0;
            let woDiscount = row.find('#wo_discount').is(':checked');

            // Calculate discount amount
            let discAmount = (discPerc / 100) * price * qty;
            row.find('.disc').val(discAmount.toFixed(2)); // Set the discount value in the input

            // Calculate subtotal
            let subTotal = price * qty - (woDiscount ? 0 : discAmount);
            let saleTax = (saleTaxPerc / 100) * subTotal;
            let total = subTotal + saleTax;

            row.find('.sale_tax').val(saleTax.toFixed(2));
            row.find('.total').val(total.toFixed(2));
            $('#net_total').val(total.toFixed(2));
        }

        function calculateTotals() {
            let totalQuantity = 0;
            let totalDiscount = 0;
            let totalSaleTax = 0;
            let netTotal = 0;

            $('#productTable tbody tr').each(function() {
                let qty = parseFloat($(this).find('.qty').val()) || 0;
                let disc = parseFloat($(this).find('.disc').val()) || 0;
                let discPerc = parseFloat($(this).find('.disc_percent').val()) || 0;
                let price = parseFloat($(this).find('.price').val()) || 0;
                let saleTax = parseFloat($(this).find('.sale_tax').val()) || 0;
                let total = parseFloat($(this).find('.total').val()) || 0;
                let woDiscount = $(this).find('#wo_discount').is(':checked');

                totalQuantity += qty;
                if (!woDiscount) {
                    totalDiscount += disc;
                }
                totalSaleTax += saleTax;
                netTotal += total;
            });

            $('#total_qty').val(totalQuantity);
            $('#total_discount').val(totalDiscount.toFixed(2));
            $('#total_sale_tax').val(totalSaleTax.toFixed(2));
            $('#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