@include('layouts.header')
@include('layouts.sidebar')

<!-- ========================
   Start Page Content
  ========================= -->

<div class="page-wrapper">

    <!-- Start Content -->
    <div class="content">

        <!-- row start -->
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <!-- page header start -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-0 d-flex align-items-center"> <a href="{{ $route }}" class="text-dark">
                            <i class="ti ti-chevron-left me-1"></i>{{ $module }}</a></h6>
                </div>
                <!-- page header end -->

                <!-- card start -->
                <div class="card">
                    <div class="card-body appmt-show">
                        <table class="table table-bordered">
                            <tr>
                                <td class="thd">Token:</td>
                                <td><span class="fs-13 badge bg-info">{{ $data->token_number }}</span></td>
                            </tr>
                            <tr>
                                <td class="thd">Appointment Date:</td>
                                <td>{{ $data->date }}</td>
                            </tr>
                            <tr>
                                <td class="thd">Appointment Time:</td>
                                <td>{{ formatTime($data->time_from) . ' - ' . formatTime($data->time_to) }}</td>
                            </tr>
                            <tr>
                                <td class="thd">Patient Name:</td>
                                <td><b>{{ $data->patient->name }}</b></td>
                            </tr>
                            <tr>
                                <td class="thd">Patient Place:</td>
                                <td>{{ $data->patient->city }} </td>
                            </tr>
                            <tr>
                                <td class="thd">Doctor Name:</td>
                                <td>{{ $data->doctor->name }}</td>
                            </tr>
                            <tr>
                                <td class="thd">Consultation Fee:</td>
                                <td>
                                    <div class="d-flex">
                                        <div>
                                            {{ env('CURRENCY') . $data->fee }} {!! $data::paymentStatus($data->is_paid) !!}
                                        </div>
                                        <div class="ms-auto">

                                            @if ($data->is_paid == 0)
                                                <a href="javascript:void(0);" class="btn  btn-primary"
                                                    data-bs-toggle="offcanvas"
                                                    data-bs-target="#offcanvas_add_payment"><i
                                                        class="ti ti-square-rounded-plus me-1"></i> Pay Now</a>
                                            @else
                                                <a href="javascript:void(0);" class="btn  btn-light"><i
                                                        class="ti ti-printer me-1"></i> Print Bill</a>
                                            @endif

                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="thd">Status:</td>
                                <td>{!! $data::statusBadge($data->status) !!}</td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- row end -->

    </div>
    <!-- End Content -->

</div>


<!-- Start Add Modal -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas_add_payment" style="max-width: 500px;">
    <div class="offcanvas-header border-bottom">
        <h5 class="fw-semibold">Add Payment</h5>
        <button type="button"
            class="btn-close custom-btn-close border p-1 me-0 d-flex align-items-center justify-content-center rounded-circle"
            data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="ti ti-x"></i>
        </button>
    </div>
    <div class="offcanvas-body">
        <form method="POST" action="{{ route('appointment.consultation.pay') }}">
            @csrf
            <input type="hidden" name="appointment_id" value="{{ $data->id }}" hidden>
            <input type="hidden" name="patient_id" value="{{ $data->patient_id }}" hidden>
            <div>
                <!-- Basic Info -->
                <div>
                    <div class="row">

                        <div class="col-md-12">
                            <div class="mb-3">
                                <table class="table table-bordered split-pymn-table">
                                    <thead>
                                        <tr>
                                            <th width="60%">Payment Method</th>
                                            <th width="30%">Amount</th>
                                            <th width="10%"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="payment-body">
                                        <tr class="dynamic-row">
                                            <td>
                                                <select name="mode[]" class="form-control select2">
                                                    @foreach (accountDropdown() as $key => $account)
                                                        <option value="{{ $key }}">{{ $account }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" name="amount[]" value="{{ $data->fee }}"
                                                    class="form-control amount" required>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-success addbtn">+</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Total Amount <span class="text-danger">*</span></label>
                                <input type="number" name="Amount" id="totalAmount" value="{{ $data->fee }}"
                                    class="form-control" disabled>
                            </div>
                        </div>


                    </div>
                </div>
                <!-- /Basic Info -->
            </div>
            <div class="d-flex align-items-center justify-content-end">
                <a href="#" class="btn btn-light btn-lg me-2" data-bs-dismiss="offcanvas">Cancel</a>
                <button type="submit" class="btn btn-lg btn-primary" id="pay-btn">Pay Now</button>
            </div>
        </form>
    </div>

</div>
<!-- End Add Modal -->


<script>
    $(document).ready(function() {

        var appointment_amount = "{{ $data->fee }}";

        btnActive();

        function calculateTotal() {
            var total = 0;
            $('.amount').each(function() {
                total += parseFloat($(this).val());
            });

            return total.toFixed(2);
        }

        $(document).on('keyup', '.amount', function() {
            $('#totalAmount').val(calculateTotal());
            btnActive();
        });

        $(document).on('click', '.addbtn', function() {
            if (appointment_amount <= calculateTotal()) {
                alert('Total amount same or greater as appointment amount, cannot add more payment');
                return false;
            }
            addRow();
            $('#totalAmount').val(calculateTotal());
            btnActive();
        });

        function addRow() {
            $('.select2').each(function() {
                if ($(this).hasClass("select2-hidden-accessible")) {
                    $(this).select2('destroy');
                }
            });

            var newRow = $(".dynamic-row:first").clone();

            $(".select2").select2();

            newRow.find('input').val(appointment_amount - calculateTotal());
            newRow.find('.addbtn')
                .removeClass('btn-success addbtn')
                .addClass('btn-danger removebtn')
                .text('-');

            $("#payment-body").append(newRow);
            newRow.find('.select2').select2();
        }

        $(document).on('click', '.removebtn', function() {
            $(this).closest('tr').remove();
            $('#totalAmount').val(calculateTotal());
            btnActive();
        });

        function btnActive() {
            if (appointment_amount == calculateTotal()) {
                $('#pay-btn').prop('disabled', false);
            } else {
                $('#pay-btn').prop('disabled', true);
            }
        }
    });
</script>
<!-- ========================
   End Page Content
  ========================= -->


@include('layouts.footer')