@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 (Combined) -->
                                <td>
                                    <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#documentSelfieImageModal"
                                            data-bs-document="{{ asset($appointment->file_path_document) }}"
                                            data-bs-selfie="{{ asset($appointment->file_path_selfie) }}">
                                        View Document & Selfie
                                    </button>
                                </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