@extends('backend.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    Awards
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-lg-4">
                            <form method="get">
                                <div class="d-flex">
                                    <input type="text" name="search" id="search" placeholder="Search..."
                                        class="form-control">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="thead-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>Patient</th>
                                    <th>Doctor</th>
                                    <th>Test</th>
                                    <th>Appointment Time</th>
                                    <th>Appointment Date</th>
                                    <th>Payment Status</th>
                                    <th>Status</th>
                                    <th>Note</th>
                                    <th>Test Type</th>
                                    <th>Test Result</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($appointments as $appointment)
                                    <tr>
                                        <td>{{ $appointment->id }}</td>
                                        <td>{{ $appointment->patient->first_name }}
                                            {{ $appointment->patient->middle_initial }}.
                                            {{ $appointment->patient->last_name }}
                                        </td>
                                        <td>Dr. {{ $appointment->doctor->name }}</td>
                                        <td>{{ $appointment->test_names }}</td>
                                        <td>{{ $appointment->appointment_time }}</td>
                                        <td>{{ $appointment->appointment_date }}</td>
                                        <td>{{ $appointment->payment_status }}</td>
                                        <td>{{ $appointment->status }}</td>
                                        <td>{{ $appointment->note }}</td>
                                        <td>{{ $appointment->test_type }}</td>
                                        <td>{!! $appointment->test_result !!}</td>

                                        <!-- View Image Button -->
                                        <td>
                                            <button class="btn btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#viewImageModal"
                                                data-bs-image="{{ asset($appointment->file_path) }}">
                                                View Image
                                            </button>
                                        </td>

                                        <!-- View Document and Selfie Image Button -->
                                        <td>
                                            @if ($appointment->file_path_document || $appointment->file_path_selfie)
                                                <button class="btn btn-secondary" data-bs-toggle="modal"
                                                    data-bs-target="#documentSelfieImageModal"
                                                    data-bs-document="{{ $appointment->file_path_document ? asset($appointment->file_path_document) : '' }}"
                                                    data-bs-selfie="{{ $appointment->file_path_selfie ? asset($appointment->file_path_selfie) : '' }}">
                                                    View Document & Selfie
                                                </button>
                                            @else
                                                No Image Uploaded
                                            @endif
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>


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

    <!-- Modal for View Image -->
    <div class="modal fade" id="viewImageModal" tabindex="-1" aria-labelledby="viewImageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewImageModalLabel">View Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img id="viewImage" src="" alt="View Image" class="img-fluid">
                </div>
            </div>
        </div>
    </div>



    <!-- Modal for Document and Selfie Image -->
    <div class="modal fade" id="documentSelfieImageModal" tabindex="-1" aria-labelledby="documentSelfieImageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentSelfieImageModalLabel">Document & Selfie Images</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Document Image -->
                    <h5>Document Image</h5>
                    <img id="documentImage" src="" alt="Document Image" class="img-fluid mb-3">

                    <!-- Selfie Image -->
                    <h5>Selfie Image</h5>
                    <img id="selfieImage" src="" alt="Selfie Image" class="img-fluid">
                </div>
            </div>
        </div>
    </div>


    <script>
        // View Image Modal
        var viewImageModal = document.getElementById('viewImageModal');
        viewImageModal.addEventListener('show.bs.modal', function(event) {
            var button = event.relatedTarget; // Button that triggered the modal
            var imageUrl = button.getAttribute('data-bs-image'); // Get the image URL from the button
            var viewImage = document.getElementById('viewImage'); // Image element in modal
            viewImage.src = imageUrl; // Set the image source
        });

        // Document and Selfie Image Modal (Combined)
        var documentSelfieImageModal = document.getElementById('documentSelfieImageModal');
        documentSelfieImageModal.addEventListener('show.bs.modal', function(event) {
            var button = event.relatedTarget; // Button that triggered the modal
            var documentImageUrl = button.getAttribute('data-bs-document'); // Get the document image URL
            var selfieImageUrl = button.getAttribute('data-bs-selfie'); // Get the selfie image URL

            var documentImage = document.getElementById('documentImage'); // Image element in modal
            var selfieImage = document.getElementById('selfieImage'); // Image element in modal

            documentImage.src = documentImageUrl; // Set the document image source
            selfieImage.src = selfieImageUrl; // Set the selfie image source
        });
    </script>
@endsection
@section('js')
    <script>
        $("#search").on("input", function() {
            $(this).quicksearch('table tbody tr');
        });
    </script>
@endsection