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

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

<script src="{{ asset('js/pharmacy.js') }}" type="text/javascript"></script>


<style>
    div#sidebar {
        display: none;
    }

    .page-wrapper {
        margin: 0;
        width: 100%;
    }

    header.navbar-header {
        margin: 0 !important;
    }

    header.navbar-header {
        display: none;
    }

    .footer.text-center.bg-white.p-2.border-top {
        display: none;
    }
</style>

<div class="page-wrapper">

    <script>
        document.addEventListener("DOMContentLoaded", function() {

            function updateDateTime() {
                const now = new Date();

                // Format Date: 30/04/2026, SUNDAY
                const dayName = now.toLocaleDateString('en-GB', {
                    weekday: 'long'
                }).toUpperCase();
                const date = now.toLocaleDateString('en-GB');
                const fullDate = `${date}, ${dayName}`;

                // Format Time: 02:45:30 PM
                const time = now.toLocaleTimeString('en-US', {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: true
                });

                document.getElementById('currentDate').textContent = fullDate;
                document.getElementById('currentTime').textContent = time;
            }

            updateDateTime();
            setInterval(updateDateTime, 1000);

        });
    </script>

    <!-- Start Content -->
    <div class="content" id="pharmacy-billing">

        <!-- Start Page Header -->
        <div class='header-strp'>

            <div style="width: 30%;">
                <img  src="{{ asset('assets/img/curesuite-white.svg') }}" alt="">
            </div>
            <h4>PHARMACY BILLING</h4>
            <div class="shortcuts">
                <span class="short-refresh">
                    <div class="icon">
                        <i class="ti ti-reload"></i>
                    </div>
                    <p> Refresh</p>
                </span>
                <span class="short-hold">
                    <div class="icon">
                        <i class="ti ti-player-pause-filled"></i>
                    </div>
                    <p> Hold's</p>
                </span>
                <span class="short-draft">
                    <div class="icon">
                        <i class="ti ti-clipboard-text"></i>
                    </div>
                    <p> Drafts</p>
                </span>
                <span class="short-exit">
                    <div class="icon">
                        <i class="ti ti-logout"></i>
                    </div>
                    <p> Exit</p>
                </span>
            </div>
        </div>
        <!-- End Page Header -->

        <div class="card">
            <div class="card-body" id="detail-bar">
                <table class="table-bar">
                    <tr>
                        <td>
                            <table class="w-100 table table-bordered">
                                <tr>
                                    <td><label for="">PATIENT ID:</label></td>
                                    <td><input type="text" class="form-control input_patient_code"
                                            value="{{ $walkin->patient_code }}" disabled>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label for="">NAME:</label></td>
                                    <td><input type="text" class="form-control input_patient_name fw-bold text-info"
                                            value="{{ $walkin->name }}" disabled>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table class="w-100 table table-bordered">
                                <tr>
                                    <td><label for="">AGE:</label></td>
                                    <td><input type="text" class="form-control input_patient_age"
                                            value="{{ $walkin->age }}" disabled>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label for="">PHONE:</label></td>
                                    <td><input type="text" class="form-control input_patient_phone"
                                            value="{{ $walkin->phone }}" disabled>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table class="w-100 table table-bordered">
                                <tr>
                                    <td><label for="">CITY:</label></td>
                                    <td><input type="text" class="form-control input_patient_city"
                                            value="{{ $walkin->city }}" disabled>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label for="">DOCTOR:</label></td>
                                    <td><input type="text" class="form-control input_doctor_name" value="--"
                                            disabled>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table class="w-100 table table-bordered">
                                <tr>
                                    <ul class="actions-options">
                                        <li><a href="javascript:void(0);" id="findPatientModelBtn"
                                                class="btn btn-success"><i class="ti ti-user-search"></i></a></li>
                                    </ul>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>
            </div>
        </div>

        @include('pharmacy::billing-layouts.find-patient')
        @include('pharmacy::billing-layouts.billing-table')
        @include('pharmacy::billing-layouts.total-area')

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


<!-- ========================
   End Page Content
  ========================= -->


<script>
    $('.pharm-item-input').focus();



    function showfindPatientModel() {
        $('#findPatientModel').modal('show');
    }

    // Open modal on button click
    $('#findPatientModelBtn').on('click', function() {
        showfindPatientModel();
    });

    // Keyboard shortcuts (combined in ONE handler)
    $(document).on('keydown', function(e) {

        // Shift + N → open modal
        if (e.shiftKey && e.key.toLowerCase() === 'n') {
            e.preventDefault();
            showfindPatientModel();
        }

        if (e.shiftKey && e.key.toLowerCase() === 'd') {
            e.preventDefault();
            let mrp = $('#gross-total-input').val();
            if (mrp == 0) return;
            $('#billDiscountModal').modal('show');
        }

        // ESC → close modal
        if (e.key === "Escape") {
            $('.modal').modal('hide');
        }
    });
</script>

@include('layouts.footer')