@extends('layouts.app')

@section('content')
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        
                        <!-- Header -->
                        <div class="mb-4 mt-4">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h3 class="fw-bold mb-1 text-dark">Patient Report Details</h3>
                                    
                                </div>
                            </div>
                        </div>

                        <div class="container-fluid">
                            <div class="row g-4">
                                
                                <!-- Left Column: Patient Information and Payment Deposit -->
                                <div class="col-lg-6">
                                    <!-- Patient Information -->
                                    <div class="info-card mb-4">
                                        <div class="card-header">
                                            <div class="d-flex align-items-center">
                                                <h5 class="mb-0 fw-semibold">Patient Information</h5>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="info-row">
                                                <span class="label">Name</span>
                                                <span class="value">John Doe</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">NRIC</span>
                                                <span class="value">900101-14-5678</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">IC Image</span>
                                                <a href="#" onclick="openImageModal('https://3.bp.blogspot.com/-RL_KnBo56HA/TjSUvVyfS_I/AAAAAAAAB9M/3P3uoSd7QPw/s1600/ic1.jpg', 'Patient IC Image')" class="view-link">
                                                    View Image
                                                </a>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">MRN No</span>
                                                <span class="value badge-highlight">12345678</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Email</span>
                                                <span class="value">john.doe@example.com</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Phone</span>
                                                <span class="value">+6012-3456789</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Payment Deposit -->
                                    <div class="info-card">
                                        <div class="card-header">
                                            <div class="d-flex align-items-center">
                                                <h5 class="mb-0 fw-semibold">Payment Deposit</h5>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="info-row">
                                                <span class="label">Deposit Price</span>
                                                <span class="value badge-success">RM 50.00</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Estimate Price</span>
                                                <span class="value">RM 150.00</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Payment Method</span>
                                                <span class="value badge-info">Online</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Right Column: Requestor Information -->
                                <div class="col-lg-6">
                                    <div class="info-card">
                                        <div class="card-header">
                                            <div class="d-flex align-items-center">
                                                <h5 class="mb-0 fw-semibold">Requestor Information</h5>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="info-row">
                                                <span class="label">Name</span>
                                                <span class="value">Sarah</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">NRIC</span>
                                                <span class="value">880909-10-1122</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">IC Image</span>
                                                <a href="#" onclick="openImageModal('https://originaldocumentservices.com/wp-content/uploads/2021/08/Malaysian-ID-card.jpg', 'Requestor IC Image')" class="view-link">
                                                    View Image
                                                </a>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Requesting for</span>
                                                <span class="value">Father</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">To</span>
                                                <span class="value">Pro Office Sdn Bhd</span>
                                            </div>
                                            <div class="info-row address-row">
                                                <span class="label">Delivery Address</span>
                                                <div class="address-text">
                                                    No 4811-1-43A Jalan Perdana CBD2<br>
                                                    Persiaran Flora Cyber 12, Cyberjaya,<br>
                                                    63000 Cyberjaya, Selangor
                                                </div>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Purpose</span>
                                                <span class="value">Insurance claims</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Delivery Method</span>
                                                <span class="value">Prooffice@Demigroup.com (via email)</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Supporting Document</span>
                                                <a href="#" onclick="openImageModal('https://practiceofthepractice.com/wp-content/uploads/2016/09/Screen-Shot-2016-09-25-at-9.36.35-PM.png', 'Supporting Document')" class="view-link">
                                                    View Document
                                                </a>
                                            </div>
                                            <div class="info-row">
                                                <span class="label">Review Before Send</span>
                                                <span class="value badge-primary">Yes</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Consent & Signatures -->
                                <div class="col-12 mt-4">
                                    <div class="info-card">
                                        <div class="card-header">
                                            <div class="d-flex align-items-center">
                                                <h5 class="mb-0 fw-semibold">Digital Consent & Signatures</h5>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="row g-4">
                                                <!-- Patient Consent -->
                                                <div class="col-md-6">
                                                    <div class="consent-section">
                                                        <h6 class="section-title">
                                                            Patient Consent
                                                        </h6>
                                                        <div class="info-row">
                                                            <span class="label">Signature</span>
                                                            <a href="#" onclick="openImageModal('https://static.vecteezy.com/system/resources/previews/025/866/358/non_2x/fake-autograph-samples-hand-drawn-signatures-examples-of-documents-certificates-and-contracts-with-inked-and-handwritten-lettering-vector.jpg', 'Patient Signature')" class="view-link">
                                                                View Signature
                                                            </a>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">Name</span>
                                                            <span class="value">John Doe</span>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">NRIC</span>
                                                            <span class="value">900101-14-5678</span>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">Relation</span>
                                                            <span class="value">Self</span>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">Date</span>
                                                            <span class="value">13 June 2025</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Witness Verification -->
                                                <div class="col-md-6">
                                                    <div class="consent-section">
                                                        <h6 class="section-title">
                                                            Witness Verification
                                                        </h6>
                                                        <div class="info-row">
                                                            <span class="label">Signature</span>
                                                            <a href="#" onclick="openImageModal('https://www.jsign.com/wp-content/uploads/2022/06/graphic-signature-completeness.png', 'Witness Signature')" class="view-link">
                                                                View Signature
                                                            </a>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">Name</span>
                                                            <span class="value">Amir</span>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">NRIC</span>
                                                            <span class="value">851212-08-9999</span>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">Relation</span>
                                                            <span class="value">Doctor</span>
                                                        </div>
                                                        <div class="info-row">
                                                            <span class="label">Date</span>
                                                            <span class="value">13 June 2025</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="col-12 mt-4">
                                    <div class="text-center">
                                        <div class="d-flex gap-3 justify-content-center">
                                            <a href="{{ route('accepted') }}" class="btn btn-success btn-lg px-5">
                                                Accept
                                            </a>
                                            <button class="btn btn-danger btn-lg px-5" onclick="openRejectModal(1, 'John Doe')">
                                                Reject
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

<!-- Image Modal -->
<div id="imageModal" class="image-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h5 id="modalTitle">Image Viewer</h5>
            <span class="close-btn" onclick="closeImageModal()">&times;</span>
        </div>
        <div class="modal-body">
            <img id="modalImage" src="" alt="Document Image" />
        </div>
    </div>
</div>

<!-- Rejection Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rejectModalLabel">Reject Medical Record</h5>
                <button type="button" class="btn-close" onclick="closeRejectModal()" aria-label="Close">&times;</button>
            </div>
            <form method="GET" action="{{ route('rejected') }}">
                <div class="modal-body">
                    <p>Are you sure you want to reject the medical record for <strong id="patientName"></strong>?</p>
                    
                    <div class="mb-3">
                        <label for="rejectReason" class="form-label">Reason for Rejection <span class="text-danger">*</span></label>
                        <select name="reason" id="rejectReason" class="form-select" required onchange="toggleCustomReason()">
                            <option value="">-- Select a reason --</option>
                            <option value="Incomplete information">Incomplete information</option>
                            <option value="Incorrect diagnosis">Incorrect diagnosis</option>
                            <option value="Missing required documents">Missing required documents</option>
                            <option value="Invalid patient details">Invalid patient details</option>
                            <option value="Insufficient medical history">Insufficient medical history</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    
                    <div class="mb-3 d-none" id="customReasonDiv">
                        <label for="customReason" class="form-label">Please specify</label>
                        <textarea name="custom_reason" id="customReason" class="form-control" rows="3" placeholder="Enter your custom reason here..."></textarea>
                    </div>
                    
                    <input type="hidden" name="record_id" id="recordId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeRejectModal()">Cancel</button>
                    <button type="submit" class="btn btn-danger">Confirm Rejection</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Backdrop -->
<div class="modal-backdrop fade" id="modalBackdrop" style="display: none;"></div>

<style>
/* Simple but nice styling */

.info-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.card-header {
    background: #f8f9fa;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.card-body {
    padding: 1.25rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.info-row:last-child {
    border-bottom: none;
}

.address-row {
    align-items: flex-start;
}

.label {
    font-weight: 600;
    color: #495057;
    min-width: 130px;
}

.value {
    color: #212529;
}

.address-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: right;
}

.badge-highlight {
    background: #fff3cd;
    color: #856404;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.badge-success {
    background: #d4edda;
    color: #155724;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.badge-info {
    background: #d1ecf1;
    color: #0c5460;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.badge-primary {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.view-link {
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.view-link:hover {
    color: #004499;
}

.consent-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
}

.section-title {
    color: #495057;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
}

.btn-secondary {
    background: #6c757d;
    border: none;
    border-radius: 6px;
    font-weight: 500;
}

.btn-secondary:hover {
    background: #5a6268;
}

/* Action Buttons Styling */
.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-success {
    background: #28a745;
    border: none;
    color: white;
}

.btn-success:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-danger {
    background: #dc3545;
    border: none;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Image Modal Styles - Fixed width */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s ease-in-out;
}

.image-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal .modal-content {
    background-color: #fff;
    border-radius: 12px;
    width: 600px;
    max-width: 90%;
    max-height: 80%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
}

.image-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.image-modal .modal-header h5 {
    margin: 0;
    color: #495057;
    font-weight: 600;
}

.close-btn {
    font-size: 28px;
    font-weight: bold;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #495057;
}

.image-modal .modal-body {
    padding: 1.5rem;
    text-align: center;
    max-height: 60vh;
    overflow: auto;
}

.image-modal .modal-body img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Rejection Modal Styles */
.modal {
    z-index: 1050;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1.25rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.modal-title {
    font-weight: 600;
    color: #495057;
}

.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.btn-close:hover {
    color: #495057;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-select, .form-control {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-select:focus, .form-control:focus {
    border-color: #0066cc;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0;
    transition: opacity 0.15s linear;
}

.modal-backdrop.show {
    opacity: 0.5;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .address-text {
        text-align: left;
    }
    
    .label {
        min-width: auto;
    }

    .image-modal .modal-content {
        width: 95%;
        max-height: 90%;
    }

    .image-modal .modal-header {
        padding: 0.75rem 1rem;
    }

    .image-modal .modal-body {
        padding: 1rem;
    }

    .btn-lg {
        font-size: 1rem;
        padding: 0.6rem 1.5rem;
    }

    .d-flex.gap-3 {
        flex-direction: column;
        gap: 1rem !important;
    }
}
</style>

<script>
function openImageModal(imageUrl, title) {
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    const modalTitle = document.getElementById('modalTitle');
    
    modalImage.src = imageUrl;
    modalTitle.textContent = title;
    modal.classList.add('show');
    
    // Prevent body scroll when modal is open
    document.body.style.overflow = 'hidden';
}

function closeImageModal() {
    const modal = document.getElementById('imageModal');
    modal.classList.remove('show');
    
    // Restore body scroll
    document.body.style.overflow = 'auto';
}

function openRejectModal(recordId, patientName) {
    // Set record data
    document.getElementById('recordId').value = recordId;
    document.getElementById('patientName').textContent = patientName;
    
    // Reset form
    document.getElementById('rejectReason').value = '';
    document.getElementById('customReason').value = '';
    document.getElementById('customReasonDiv').classList.add('d-none');
    
    // Show modal
    const modal = document.getElementById('rejectModal');
    const backdrop = document.getElementById('modalBackdrop');
    
    modal.style.display = 'block';
    backdrop.style.display = 'block';
    
    // Add classes for animation
    setTimeout(() => {
        modal.classList.add('show');
        backdrop.classList.add('show');
    }, 10);
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
}

function closeRejectModal() {
    const modal = document.getElementById('rejectModal');
    const backdrop = document.getElementById('modalBackdrop');
    
    // Remove show classes
    modal.classList.remove('show');
    backdrop.classList.remove('show');
    
    // Hide modal after animation
    setTimeout(() => {
        modal.style.display = 'none';
        backdrop.style.display = 'none';
    }, 300);
    
    // Restore body scroll
    document.body.style.overflow = 'auto';
}

function toggleCustomReason() {
    const select = document.getElementById('rejectReason');
    const customDiv = document.getElementById('customReasonDiv');
    const customTextarea = document.getElementById('customReason');
    
    if (select.value === 'Other') {
        customDiv.classList.remove('d-none');
        customTextarea.required = true;
    } else {
        customDiv.classList.add('d-none');
        customTextarea.required = false;
        customTextarea.value = '';
    }
}

// Close image modal when clicking outside the content
document.getElementById('imageModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageModal();
    }
});

// Close rejection modal when clicking outside
document.addEventListener('click', function(event) {
    const modal = document.getElementById('rejectModal');
    const backdrop = document.getElementById('modalBackdrop');
    
    if (event.target === backdrop) {
        closeRejectModal();
    }
});

// Close modals with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        const imageModal = document.getElementById('imageModal');
        const rejectModal = document.getElementById('rejectModal');
        
        if (imageModal.classList.contains('show')) {
            closeImageModal();
        } else if (rejectModal.classList.contains('show')) {
            closeRejectModal();
        }
    }
});
</script>
@endsection