@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>Patient</th>
                                            <th>Service Name</th>
                                            <th>Name</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>
        const dt = (data) => {
            $("#table").DataTable({
                ajax: {
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        ...data
                    },
                    url: '{{ route($route . '.data') }}',
                    dataSrc: ""
                },
                destroy: true
            });
        }

        dt()



        $("#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",
                    },
                });
                $("#modal").modal("toggle")
            }
        })



        // const paymentfn = (id, rate) => {
        //     $("#service_id").val(id)
        //     $("#total_amount_hidden").val(rate)
        //     $("#total_amount").val(rate)
        //     $("#payment").val(rate)
        //     $("#discount").val(0)
        //     $("#promotuon").val(0)
        //     $("#credit").val(0)
        //     $("#payment_modal").modal("toggle")
        // }


        $("#currency").on("change", async function() {
            if ($(this).val()) {
                let res = await _client('{{ route('admin.currency.dropdown_byid') }}', "post", {
                    id: $(this).val()
                })
                if (res && res.status == 200) {

                    if(res.data.id == 1){
                        $("#payment").val(eval($("#payment").val() / + res.data
                        .exchange_rate))

                    $("#total_amount_hidden").val(eval($("#total_amount_hidden").val() / +
                        res.data
                        .exchange_rate))

                    $("#discount").val(eval($("#discount").val() / + res.data
                        .exchange_rate))
                    $("#promotion").val(eval($("#promotion").val() / + res.data
                        .exchange_rate))
                    $("#credit").val(eval($("#credit").val() / + res.data
                        .exchange_rate))
                        }else{
                            $("#payment").val(eval($("#payment").val() * + res.data
                        .exchange_rate))

                    $("#total_amount_hidden").val(eval($("#total_amount_hidden").val() * +
                        res.data
                        .exchange_rate))

                    $("#discount").val(eval($("#discount").val() * + res.data
                        .exchange_rate))
                    $("#promotion").val(eval($("#promotion").val() * + res.data
                        .exchange_rate))
                    $("#credit").val(eval($("#credit").val() * + res.data
                        .exchange_rate))  
                        }


                  

                }
            }
        })


        $("#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")
                    }
                }
            })
        })


        $("#category").on("change", async function() {
            if ($(this).val()) {
                let res = await _client("{{ route($route . '.get_service') }}", "post", {
                    category: $(this).val()
                })
                if (res && res.status == 200) {


                    let options = ''

                    res.data.forEach(element => {
                        options += `
                            <span class='mx-2 mb-5 mt-3' style='white-space: nowrap;'>
                                <input class='mx-2 mb-3' type='checkbox' id='srv_${element.id}' name="services[]" value='${element.id}'> <label for='srv_${element.id}'>${element.name}</label>
                            <label>${element.price} $</label>
                            </span>
                       `
                    });

                    $("#services_dom").html(options)

                }
            }
        })


        const Repeater = (data) => {
            console.log(data)
            data.forEach((el) => {
                $(`#srv_${el.service_id}`).prop("checked", true)
            })
        }

        $(".modal").on("hide.bs.modal", function() {
            $("#services_dom").html("")
        })


// Add patient modal
            $(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()
                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 . '.new_patient') }}', 'post',data)
                $("#spinners").addClass("d-none")
                btn.prop("disabled", false)
                if (res && res.status == 200) {
                    $("#patient").append(`<option value='${res.data.id}' selected>${res.data.name}</option>`)
                    $("#addPatientModal").modal("toggle")
                }
            })
    </script>
@endsection