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

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

<div class="page-wrapper" id="consultationSuite">

    <!-- Start Content -->
    <div class="content" style="background-color: #cdfff7">

        <!-- page header start -->
        <div class="mb-4">
            <h6 class="fw-bold mb-0 d-flex align-items-center"> <a href="{{ route('appointment.index') }}" class="text-dark"> <i
                        class="ti ti-chevron-left me-1"></i>Appointments</a></h6>
        </div>
        <!-- page header end -->

        <!-- card start -->
        <div class="card">
            <div class="row align-items-end">
                <div class="col-xl-9 col-lg-8">
                    <div class="d-sm-flex align-items-center position-relative z-0 overflow-hidden p-3">
                        <img src="{{ asset('assets/img/icons/shape-01.svg') }}" alt="img"
                            class="z-n1 position-absolute end-0 top-0 d-none d-lg-flex">
                        <a href="javascript:void(0);" class="avatar avatar-xxxl patient-avatar me-2 flex-shrink-0">
                            <img src="{{ asset('assets/img/users/user-08.jpg') }}" alt="product" class="rounded">
                        </a>
                        <div>
                            <p class="text-primary mb-1">#{{ $data->patient->patient_code }}</p>
                            <h5 class="mb-1"><a href="javascript:void(0);"
                                    class="fw-bold">{{ $data->patient->name }}</a>
                            </h5>
                            <p class="mb-3">{{ $data->patient->city }}</p>
                            <div class="d-flex align-items-center flex-wrap">
                                <p class="mb-0 d-inline-flex align-items-center"><i
                                        class="ti ti-phone me-1 text-dark"></i>Phone : <span
                                        class="text-dark ms-1">{{ $data->patient->phone }}</span></p>
                                <span class="mx-2 text-light">|</span>
                                <p class="mb-0 d-inline-flex align-items-center"><i
                                        class="ti ti-calendar-time me-1 text-dark"></i>Last Visited : <span
                                        class="text-dark ms-1">{{ lastVisit($data->id) }} </span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="p-3 text-lg-end">
                        <div class="mb-4">
                           <span class="text-dark fs-18">TOKEN: <span class="fs-18 badge bg-info">{{ $data->token_number}}</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- card end -->

        <form action="{{ route('prescription.store') }}" id="PresForm" method="POST">
            @csrf

            <input type="hidden" name="appointment_id" value="{{ $data->id }}">
            <input type="hidden" name="prescription_id" value="{{ $prescription ? $prescription->id : null }}">

            <!-- row start -->
            <div class="row">
                <div class="col-xl-12 d-flex">
                    <div class="card shadow-sm flex-fill w-100">
                        <div class="card-header">
                            <h5 class="fw-bold mb-0"><i class="ti ti-user-star me-1"></i>Physical Information</h5>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="mb-2">Blood Pressure (mmHg):</label>
                                        <input type="text" name="blood_pressure" class="form-control"
                                            placeholder="Ex: 120/80"
                                            value="{{ $vital_signs ? $vital_signs['blood_pressure'] : '' }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="mb-2">Heart Rate (BPM):</label>
                                        <input type="text" name="heart_rate" class="form-control"
                                            placeholder="Ex: 72"
                                            value="{{ $vital_signs ? $vital_signs['heart_rate'] : '' }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="mb-2">Temperature (°C):</label>
                                        <input type="text" name="temperature" class="form-control"
                                            placeholder="Ex: 98.6"
                                            value="{{ $vital_signs ? $vital_signs['temperature'] : '' }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="mb-2">Weight (kg):</label>
                                        <input type="text" name="weight" class="form-control" placeholder="Ex: 70"
                                            value="{{ $vital_signs ? $vital_signs['weight'] : '' }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12 d-flex">
                    <div class="card shadow-sm flex-fill w-100">
                        <div class="accordion accordion-bordered" id="BorderedaccordionExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="BorderedheadingOne">
                                    <button class="accordion-button collapsed" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#BorderedcollapseOne"
                                        aria-expanded="false" aria-controls="BorderedcollapseOne">
                                        <i class="ti ti-history me-1"></i>Others
                                    </button>
                                </h2>
                                <div id="BorderedcollapseOne"
                                    class="accordion-collapse collapse {{ $patient_additional && ($patient_additional->presenting_complaints || $patient_additional->past_illness || $patient_additional->general_examination) ? 'show' : '' }}"
                                    aria-labelledby="BorderedheadingOne" data-bs-parent="#BorderedaccordionExample">
                                    <div class="accordion-body">

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="mb-2">Presenting Complaints:</label>
                                                    <textarea name="presenting_complaints" class="form-control" cols="" rows="5">{{ $patient_additional ? $patient_additional->presenting_complaints : '' }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="mb-2">History of Past-Illness:</label>
                                                    <textarea name="history_of_past_illness" class="form-control" cols="" rows="5">{{ $patient_additional ? $patient_additional->past_illness : '' }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label class="mb-2">General Examination:</label>
                                                    <textarea name="general_examination" class="form-control" cols="" rows="5">{{ $patient_additional ? $patient_additional->general_examination : '' }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12 d-flex">
                    <div class="card shadow-sm flex-fill w-100">
                        <div class="card-header">
                            <h5 class="fw-bold mb-0"><i class="ti ti-report me-1"></i>Prescription</h5>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <textarea name="prescription_description" class="form-control fs-24" id="" cols="30" rows="10"
                                            placeholder="Problem Description"> {{ $prescription ? $prescription->prescription : '' }}</textarea>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" id="medicineArea">
                <div class="col-xl-12 d-flex">
                    <div class="card shadow-sm flex-fill w-100">
                        <div class="card-header">
                            <div class="d-flex">
                                <h5 class="fw-bold mb-0"><i class="ti ti-pill me-1"></i>Medicines</h5>
                                <button type="button" id="addMedicine"
                                    class=" btn btn-success rounded-pill ms-auto">
                                    <i class="ti ti-plus me-1"></i> Add Medicine
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="medicineRows">
                                <table class="table table-bordered mb-4 pb-4">
                                    <thead>
                                        <tr>
                                            <th width="30%">Medicine</th>
                                            <th width="10%">Dosage</th>
                                            <th width="10%">Time</th>
                                            <th width="10%">Duration</th>
                                            <th width="15%">Interval</th>
                                            <th width="20%">Comment</th>
                                            <th width="5%"></th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @if ($prescription && $prescription->medicines)
                                            @foreach ($prescription->medicines as $medicine)
                                                <tr class="medicine-row">
                                                    <td>
                                                        <input type="text" class="form-control medicine-input"
                                                            autocomplete="off" name="medicine[]"
                                                            placeholder="Type medicine name.."
                                                            value="{{ $medicine->name }}">
                                                        <div class="list-group suggestions"></div>
                                                    </td>
                                                    <td><input type="text" name="dosage[]"
                                                            class="form-control enter-next"
                                                            value="{{ $medicine->dose }}">
                                                    </td>
                                                    <td>
                                                        <select name="time[]"
                                                            class="form-control select2 dosage-input enter-next">
                                                            @foreach ($time as $k => $v)
                                                                <option value="{{ $k }}"
                                                                    {{ $medicine->time == $k ? 'selected' : '' }}>
                                                                    {{ $v }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select name="duration[]"
                                                            class="form-control  select2 enter-next">
                                                            @foreach ($duration as $k => $v)
                                                                <option value="{{ $k }}"
                                                                    {{ $medicine->duration == $k ? 'selected' : '' }}>
                                                                    {{ $v }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select name="interval[]"
                                                            class="form-control select2 enter-next">
                                                            @foreach ($interval as $k => $v)
                                                                <option value="{{ $k }}"
                                                                    {{ $medicine->interval == $k ? 'selected' : '' }}>
                                                                    {{ $v }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td><input type="text" name="comment[]" class="form-control"
                                                            value="{{ $medicine->comment }}">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn remove-row"
                                                            data-prescription-id={{ $prescription ? $prescription->id : null }}
                                                            data-medicine-id={{ $medicine->id }}><i
                                                                class="ti ti-trash me-1 text-danger"></i></button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr class="medicine-row">
                                                <td>
                                                    <input type="text" class="form-control medicine-input"
                                                        autocomplete="off" name="medicine[]"
                                                        placeholder="Type medicine name..">
                                                    <div class="list-group suggestions"></div>
                                                </td>
                                                <td><input type="text" name="dosage[]"
                                                        class="form-control enter-next">
                                                </td>
                                                <td>
                                                    <select name="time[]"
                                                        class="form-control select2 dosage-input enter-next">
                                                        @foreach ($time as $k => $v)
                                                            <option value="{{ $k }}">{{ $v }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="duration[]"
                                                        class="form-control  select2 enter-next">
                                                        @foreach ($duration as $k => $v)
                                                            <option value="{{ $k }}">{{ $v }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="interval[]" class="form-control select2 enter-next">
                                                        @foreach ($interval as $k => $v)
                                                            <option value="{{ $k }}">{{ $v }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td><input type="text" name="comment[]" class="form-control">
                                                </td>
                                                <td>
                                                    <button type="button" class="btn remove-row"><i
                                                            class="ti ti-trash me-1 text-danger"></i></button>
                                                </td>
                                            </tr>
                                        @endif

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

            <input type="hidden" name="submit_action" id="submit_action">

            <div class="d-flex justify-content-center" style="margin-top: 200px">
                <button class="btn btn-lg me-1 btn-primary" id="savePrescription">SAVE PRESCRIPTION</button>
                <button class="btn btn-lg ms-1  btn-success" id="saveNext">SAVE & NEXT</button>
            </div>

        </form>
    </div>

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


    <div id="print-area"></div>


    <script>
        let currentIndex = -1;

        // --------------------
        // INIT SELECT2
        // --------------------
        function initSelect2(context = document) {
            $(context).find('.select2').select2({
                width: '100%'
            });
        }

        $(document).ready(function() {
            initSelect2();
        });

        // --------------------
        // ENTER = NEXT CELL
        // --------------------
        $(document).on('keydown', '.enter-next', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();

                let row = $(this).closest('tr');
                let fields = row.find('input, select').filter(':visible');
                let index = fields.index(this);

                if (fields[index + 1]) {
                    fields[index + 1].focus();
                }
            }
        });

        // --------------------
        // ADD ROW
        // --------------------
        $('#addMedicine').on('click', function() {
            let row = $('.medicine-row:first').clone();

            row.find('input').val('');
            row.find('select').val(null).trigger('change');
            row.find('.suggestions').html('');

            // REMOVE OLD SELECT2
            row.find('.select2').removeClass('select2-hidden-accessible')
                .next('.select2').remove();

            $('#medicineRows tbody').append(row);

            // RE-INIT SELECT2
            initSelect2(row);

            $('.medicine-input').attr('required', true);
            $('.enter-next').attr('required', true);



            row.find('.medicine-input').focus();
        });

        // --------------------
        // REMOVE ROW
        // --------------------
        $(document).on('click', '.remove-row', function() {
            let prescriptionId = $(this).data('prescription-id');
            let medicineId = $(this).data('medicine-id');
            if (prescriptionId && medicineId) {
                console.log('Removing prescription ID:', prescriptionId, 'and medicine ID:', medicineId);


            }
            $(this).closest('tr').remove();
        });

        // --------------------
        // AUTOCOMPLETE
        // --------------------
        $(document).on('keyup', '.medicine-input', function(e) {
            let input = $(this);
            let query = input.val();
            let box = input.siblings('.suggestions');

            if (!query || [38, 40, 13].includes(e.keyCode)) return;

            $.post("{{ route('medicine.search') }}", {
                _token: $('meta[name="csrf-token"]').attr('content'),
                query: query
            }, function(data) {
                currentIndex = -1;
                let html = '';

                data.forEach(item => {
                    html +=
                        `<a href="javascript:void(0)" class="list-group-item suggest-item">${item.name}</a>`;
                });

                box.html(html);
            });
        });

        // --------------------
        // AUTOCOMPLETE NAV
        // --------------------
        $(document).on('keydown', '.medicine-input', function(e) {
            let items = $(this).siblings('.suggestions').find('.suggest-item');

            if (!items.length) return;

            if (e.keyCode === 40) currentIndex++;
            if (e.keyCode === 38) currentIndex--;

            currentIndex = Math.max(0, Math.min(currentIndex, items.length - 1));

            if (e.keyCode === 13 && currentIndex >= 0) {
                e.preventDefault();
                $(items[currentIndex]).click();
                return;
            }

            items.removeClass('active');
            $(items[currentIndex]).addClass('active');
        });

        // --------------------
        // SELECT MEDICINE
        // --------------------
        $(document).on('click', '.suggest-item', function() {
            let row = $(this).closest('tr');

            row.find('.medicine-input').val($(this).text());
            row.find('.suggestions').html('');
            row.find('.enter-next:first').focus();
        });

        // --------------------
        // CLICK OUTSIDE CLOSE
        // --------------------
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.medicine-input, .suggestions').length) {
                $('.suggestions').html('');
            }
        });

        $(document).ready(function() {
            $('#savePrescription').on('click', function(e) {
                e.preventDefault();
                $('#submit_action').val('save');
                var data = $('#PresForm').serialize();
                $.post("{{ route('prescription.store') }}", data, function(response) {
                    print(response);
                })

                setTimeout(function() {
                    var backUrl = "{{ url()->previous() }}";
                    window.location.href = backUrl;
                }, 1000);

            });

            $('#saveNext').on('click', function(e) {
                e.preventDefault();
                $('#submit_action').val('next');
                var data = $('#PresForm').serialize();
                var responseData;
                $.post("{{ route('prescription.store') }}", data, function(response) {
                    responseData = response;
                    print(responseData);
                })

                $('#comingAppointmentsModal').modal('show');

                // setTimeout(function() {
                //     var backUrl = responseData.next_url;
                //     window.location.href = backUrl;
                // }, 1000);
            });

        });


        function print(response) {
            if (response.success) {
                // Create hidden iframe
                let iframe = document.createElement('iframe');
                iframe.style.position = 'fixed';
                iframe.style.right = '0';
                iframe.style.bottom = '0';
                iframe.style.width = '0';
                iframe.style.height = '0';
                iframe.style.border = '0';

                document.body.appendChild(iframe);

                let doc = iframe.contentWindow.document;
                doc.open();
                doc.write(response.print);
                doc.close();

                iframe.onload = function() {
                    iframe.contentWindow.focus();
                    iframe.contentWindow.print();

                    // auto remove iframe after print
                    iframe.contentWindow.onafterprint = function() {
                        document.body.removeChild(iframe);
                    };
                };
            }

        }
        // }
    </script>

    @include('prescription::coming-appointments')
    @include('layouts.footer')