@extends('layouts.master')
@section('title', $title)

@section('content')
    @include($view . '.modal')
    @include($view . '.patientmodal')
    <div class="main-body">
        <div class="page-wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between">
                                <h5>{{ $title }} {{ __('list') }}</h5>
                                <div>
                                    @can($access . '-create')
                                        <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
                                            <i class="fas fa-plus mx-2"></i>
                                            {{ $title }}</a>
                                    @endcan
                                    <a href="#" class="btn btn-info" data-bs-toggle="modal"
                                        data-bs-target="#filter_modal">
                                        <i class="fas fa-filter"></i> Filter </a>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="table" class="display table nowrap table-striped table-hover"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Inv #</th>
                                            <th>Patient</th>
                                            <th>Type</th>
                                            <th>Total Amount</th>
                                            <th>Payment status</th>
                                            <th>Notes</th>
                                            <th>{{ __('messages.action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('page_js')
    <script>

        document.addEventListener("DOMContentLoaded", function () {
    const hasAppointmentCheckbox = document.getElementById("has_appointment");
    const appointmentFields = document.getElementById("appointment_fields");

    hasAppointmentCheckbox.addEventListener("change", function () {
        if (this.checked) {
            appointmentFields.classList.remove("d-none");
        } else {
            appointmentFields.classList.add("d-none");
        }
    });
});


       const dt = (data) => {
            window.datatable = $("#table").DataTable({
                ajax: {
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        ...data
                    },
                    url: '{{ route($route . '.data') }}',
                    dataSrc: ""
                },
                destroy: true,
            });
        }

        dt()


const services = @json($services);

const add = (service_id = '', quantity = '', rate = '', sub_total = '') => {
    let counter = $(".counter").length + 1;
    let elements = $("#elements");
    let serviceOptions = '<option value="">Select</option>';

    services.forEach((el) => {
        serviceOptions += `<option value="${el.id}" ${el.id == service_id ? "selected" : ""}> ${el.name} </option>`;
    });

    let newRow = `
<tr class="tr_addons">
    <td class="counter">${counter}</td>
    
    <!-- Service -->
    <td>
        <div class="input-group">
            <select name="service[]" class="form-control modalselect2 input service" onchange="setServiceRate(this); calculateSubtotal(this);">
                ${serviceOptions}
            </select>
        </div>
        <small class="text-danger errors"></small>
    </td>
    
    <!-- Quantity -->
    <td>
        <div class="input-group">
            <span class="input-group-text"><i class="fas fa-sort-numeric-up"></i></span>
            <input type="number" min="1" class="form-control quantity input" name="quantity[]" placeholder="Quantity"
                   value="${quantity}" oninput="calculateSubtotal(this)">
        </div>
        <small class="text-danger errors"></small>
    </td>
    
    <!-- Price -->
    <td>
        <div class="input-group">
            <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
            <input type="number" class="form-control price input" name="price[]" placeholder="Price"
                   value="${rate}" data-unit-price="${rate}" oninput="calculateSubtotal(this)">
        </div>
        <small class="text-danger errors"></small>
    </td>

    <!-- Subtotal -->
    <td>
        <div class="input-group">
            <span class="input-group-text"><i class="fas fa-calculator"></i></span>
            <input type="text" class="form-control sub_total" value="${sub_total}" name="sub_total[]" readonly>
        </div>
    </td>
    
    <!-- Actions -->
    <td>
        <button type="button" class="btn btn-sm btn-success" onclick="add()">
            <i class="fas fa-plus"></i>
        </button>
        <button type="button" class="btn btn-sm btn-danger" onclick="removeRow(this)">
            <i class="fas fa-times"></i>
        </button>
    </td>
</tr>
`;

    // Append row
    let appendedRow = $(newRow).appendTo(elements);

    // Initialize select2 ONLY on the new select
    appendedRow.find(".modalselect2").select2({
        dropdownParent: $('#modal')
    });

    // Recalculate totals immediately after adding
    calculateGrandTotal();
};

function calculateSubtotal(element) {
    let row = $(element).closest('tr');
    let quantity = parseFloat(row.find('.quantity').val()) || 0;
    let price = parseFloat(row.find('.price').val()) || 0;
    let sub_total = quantity * price;
    row.find('.sub_total').val(sub_total.toFixed(2));

    // Update total instantly
    calculateGrandTotal();
}

function calculateGrandTotal() {
    let total = 0;
    $('.sub_total').each(function() {
        total += parseFloat($(this).val()) || 0;
    });
    $('#grand_total').text(total.toFixed(2));
}

function removeRow(btn) {
    $(btn).closest('tr').remove();
    updateCounters();
    calculateGrandTotal();
}

function updateCounters() {
    $('.counter').each(function(index) {
        $(this).text(index + 1);
    });
}


        

        const Repeater = (data, type) => {
    $("#elements").find("tr").remove();

    // Add data rows
    $.each(data, function(k, v) {
        add(v.service_id, v.quantity, v.rate , v.sub_total);
    });
};


const setServiceRate = (element) => {
    const selectedId = $(element).val();
    const service = services.find(s => s.id == selectedId);
    if (service) {
        const row = $(element).closest("tr");
        row.find(".price")
            .val(service.price || service.rate || '')
            .attr("data-unit-price", service.price || service.rate || '');
    }
};


$(".modal").on("hide.bs.modal", function () {
    $(".tr_addons").not(":first").remove(); // keep the first one
});
        $("#form").on("submit", async function(e) {
            e.preventDefault()
            data = objectifyForm($(this).serializeArray())
            btn = $(this).find("button[type='submit']")
            // console.log(btn)
            btn.prop("disabled", true)
            $("#spinners").removeClass("d-none")
            let res = await client($(this), '{{ route($route . '.create') }}', 'post', data)
            $("#spinners").addClass("d-none")
            btn.prop("disabled", false)
            if (res && res.status == 200) {
                $("#table").DataTable().ajax.reload()
                Swal.fire({
                    text: res.data,
                    icon: "success",
                    buttonsStyling: !1,
                    confirmButtonText: "Ok, got it!",
                    customClass: {
                        confirmButton: "btn btn-primary",
                    },
                });
           $("#form")[0].reset();
                $("#modal").modal("toggle")
            }
        })


$('#category').on('change', function() {
    if (this.value == 1) { // Assuming '1' is the value for
        $('#installation_div').removeClass('d-none');
    } else {
        $('#installation_div').addClass('d-none');
    }
});

      
        $("#discount").on("keyup", function() {
            discount = isNaN(parseFloat($("#discount").val())) ? 0 : parseFloat($("#discount").val())
            promotion = isNaN(parseFloat($("#promotion").val())) ? 0 : parseFloat($("#promotion").val())
            credit = isNaN(parseFloat($("#credit").val())) ? 0 : parseFloat($("#credit").val())
            max = isNaN(parseFloat($("#total_amount_hidden").val())) ? 0 : parseFloat($("#total_amount_hidden")
                .val())
            if (discount > max) {
                $("#payment").val(0)
                $("#discount").val(max).trigger("keyup")
            } else {
                $("#payment").val(max - discount - promotion - credit)
            }
        })

        $("#payment").on("keyup", function() {
            discount = isNaN(parseFloat($("#discount").val())) ? 0 : parseFloat($("#discount").val())
            payment = isNaN(parseFloat($("#payment").val())) ? 0 : parseFloat($("#payment").val())
            credit = isNaN(parseFloat($("#credit").val())) ? 0 : parseFloat($("#credit").val())
            max = isNaN(parseFloat($("#total_amount_hidden").val())) ? 0 : parseFloat($("#total_amount_hidden")
                .val())
            $("#balance").val(max - (discount + payment))
            // if (promotion > max) {
            //     $("#payment").val(0)
            //     $("#promotion").val(max).trigger("keyup")
            // } else {
            //     $("#payment").val(max - discount - promotion - credit)
            // }
        })

        const paymentfn = async (id, total) => {
            let res = await _client("{{ route($route . '.get_balance') }}", "post", {
                id: id
            })
            if (res && res.status == 200) {

                if (res.data.status == "Partially paid") {
                    $("#prm_btn").addClass("d-none")
                } else {
                    $("#prm_btn").removeClass("d-none")
                }

                $("#lab_request").val(id)
                $("#total_amount").val(res.data.balance)
                $("#total_amount_hidden").val(res.data.balance)
                $("#discount").val(0)
                $("#promotion").val(0)
                $("#credit").val(0)
                $("#payment").val(res.data.balance)
                $("#payment_modal").modal("toggle")
            }
        }

        $("#payment_form").on("submit", async function(e) {
            e.preventDefault()
            btn = $(document.activeElement)
            Swal.fire({
                title: `Are you sure to ${btn.data("type")}?`,
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then(async (result) => {
                if (result.isConfirmed) {
                    data = objectifyForm($(this).serializeArray())
                    data.append("type", btn.data("type"))
                    btn.prop("disabled", true)
                    $(btn).find("#spinners").removeClass("d-none")
                    let res = await client($(this), '{{ route($route . '.pay') }}', 'post', data)
                    $(btn).find("#spinners").addClass("d-none")
                    btn.prop("disabled", false)
                    if (res && res.status == 200) {
                        PopupWin(res.data.url, "Print {{ $title }}", 1000, 600);
                        $("#table").DataTable().ajax.reload()
                        Swal.fire({
                            text: res.data.msg,
                            icon: "success",
                            buttonsStyling: !1,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary",
                            },
                        });
                        $("#payment_modal").modal("toggle")
                    }
                }
            })
        })


        const sponsorfn = async (id) => {
            let res = await _client("{{ route($route . '.get_balance') }}", "post", {
                id: id
            })
            if (res && res.status == 200) {
                $("#sponsor_id").val(id)
                $("#total_amount_sponsor").val(res.data)
                $("#sponsorship_modal").modal("toggle")
            }
        }

        $("#sponsor_form").on("submit", async function(e) {
            e.preventDefault()
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, sponsor it!'
            }).then(async (result) => {
                if (result.isConfirmed) {
                    data = objectifyForm($(this).serializeArray())
                    const clickedButtonValue = e.submitter;
                    btn = $(document.activeElement)
                    btn.prop("disabled", true)
                    $(btn).find("#spinners").removeClass("d-none")
                    let res = await client($(this), '{{ route($route . '.sponsor') }}', 'post',
                        data)
                    $(btn).find("#spinners").addClass("d-none")
                    btn.prop("disabled", false)
                    if (res && res.status == 200) {
                        PopupWin(res.data.url, "Print {{ $title }}", 1000, 600);
                        $("#table").DataTable().ajax.reload()
                        Swal.fire({
                            text: res.data.msg,
                            icon: "success",
                            buttonsStyling: !1,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary",
                            },
                        });
                        $("#sponsorship_modal").modal("toggle")
                    }
                }
            })
        })


         // display detail data
async function format(id) {
            let url = '{{ route($route . '.get_details') }}';
            let total_money = 0;
            let total_quantity = 0;
            let total_unit_price = 0;
            let table = `
                    <table id='table-request_info' class="table display" style='width: 90%; margin: 5px 51px 5px 34px;'>
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0 fw-bold text-muted bg-light ">
                                <th>#</th>
                                <th>Service</th>
                                <th>Quantity</th>
                                <th>Unit Price</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>`
            // console.log(d)
            await $.post(url, {
                    "id": id,
                    "_token": "{{ csrf_token() }}"
                })
                .done((data) => {
                    let counter = 1
                    data.repeater.forEach((el) => {
                        table += "<tr>"
                        table += `<td>${counter} </td>`
                        table += `<td> ${el.srv_type.name} </td>`
                        table += `<td> ${el.quantity}</td>`
                        table += `<td> ${el.rate.toLocaleString()} </td>`
                        table += `<td> ${(el.sub_total).toLocaleString()} </td>`
                        total_money += el.quantity * el.rate
                        total_quantity += parseFloat(el.quantity)
                        total_unit_price += parseFloat(el.rate)
                        table += "</tr>"
                        counter++;
                    })
                    table += `<thead>
                        <tr>
                            <th colspan="2">Total</th>
                            <td>${total_quantity} </td>
                            <td>${total_unit_price.toLocaleString()} </td>
                            <td>${total_money.toLocaleString()} </td>
                        </tr>
                        </thead>`
                    table += "</tbody>"
                    table += "</table>"
                })

                .fail((error) => {
                    console.error(error)
                })

            return table
        }

        // table show


        $('#table tbody').on('click', 'span.details-control', async function() {
            $(".span.details-control").removeClass('shown');
            let id = $(this).data("id")
            var tr = $(this).closest('tr');
            var row = datatable.row(tr);
            if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
            } else {
                d = await format(id)
                row.child(d).show();
                // $("#table-request_info").DataTable();
                tr.addClass('shown');
            }
        })




            $(document).on("change", ".new", function() {
            if ($(this).val() == "New") {
                triggeredElement = $(this)
                $("#addPatientModal").modal("toggle")
                $(this).val('').trigger("change")
            }
        })



      $("#AddPatientForm").on("submit", async function(e) {
    e.preventDefault();
    let data = objectifyForm($(this).serializeArray());
    let btn = $(this).find("button[type='submit']");
    
    btn.prop("disabled", true);
    $("#spinners").removeClass("d-none");

    let res = await client($(this), '{{ route($route . '.new_patient') }}', 'post', data);

    $("#spinners").addClass("d-none");
    btn.prop("disabled", false);

    if (res && res.status == 200) {
    let patientNamePhone = `${res.data.data.name} ${res.data.data.phone}`;
    console.log('waka' . patientNamePhone);
    $("#patient").append(`<option value='${res.data.data.id}' selected>${patientNamePhone}</option>`);
    $("#addPatientModal").modal("toggle");
}else if (res && res.status == 422) {
        // Handle validation errors (optional)
        console.log(res.errors);
        // Example: show first error for name and phone
        if(res.errors.name) alert(res.errors.name[0]);
        if(res.errors.phone) alert(res.errors.phone[0]);
    }
});

    </script>
@endsection