@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">
                        <!-- [ breadcrumb ] start -->
                        <div class="page-header">
                            <div class="page-block">
                                <div class="row align-items-center">
                                    <div class="col-md-12">                                                      
                                        <div class="page-header-title">
                                            <h5 class="m-b-10">KPJ SEREMBAN</h5>
                                        </div>
                                        <ul class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                                        class="feather icon-home"></i></a></li>
                                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Pending Payment</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- [ breadcrumb ] end -->

                        {{-- table index start --}}
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col">
                                            <h5>Pending Payment</h5>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="card-body">

                                    @if ($message = Session::get('success'))
                                    <div class="alert alert-success" role="alert">
                                        {{ $message }}
                                    </div>
                                    @endif

                                    @if ($message = Session::get('error'))
                                        <div class="alert alert-danger" role="alert">
                                            {{ $message }}
                                        </div>
                                    @endif

                                    @if ($errors->any())
                                        <div class="alert alert-danger" role="alert">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    @php
                                        $reports = [
                                           [
                                                'id' => 1,
                                                'mrn' => '12345678',
                                                'patient_name' => 'John Doe',
                                                'request_name' => 'Mohd Haris',
                                                'report_type' => 'Full report',
                                                'date_received' => '10 MAY 2025',
                                                'deposit' => 'YES',
                                                'status' => 'pending_payment',
                                                'duration' => '14 days',
                                                'assigned_staff' => 'Mr. Ahmad',
                                                'price' => '150.00',
                                                'remarks' => 'Complete medical report with all test results included.',
                                                'receipt_uploaded' => false,
                                            ],
                                            [
                                                'id' => 2,
                                                'mrn' => '87654321',
                                                'patient_name' => 'Jane Smith',
                                                'request_name' => 'Abu Bakar',
                                                'report_type' => 'Form report',
                                                'date_received' => '11 MAY 2025',
                                                'deposit' => 'YES',
                                                'status' => 'pending_payment',
                                                'duration' => '10 days',
                                                'assigned_staff' => 'Ms. Siti Aminah',
                                                'price' => '80.00',
                                                'remarks' => 'Standard form report as requested.',
                                                'receipt_uploaded' => false,
                                            ],
                                            
                                        ];
                                    @endphp

                                    <div class="dt-responsive table-responsive">
                                        <table id="dom-table" class="table table-striped table-bordered nowrap">
                                            <thead>
                                                <tr>
                                                    <th>No.</th>
                                                    <th>MRN</th>
                                                    <th>Patient Name</th>
                                                    <th>Request Name</th>
                                                    <th>Type Report</th>
                                                    <th>Date Received</th>
                                                    <th>Deposit</th>
                                                    <th>Status</th>
                                                    <th>Duration</th>
                                                    <th>Assign Staff</th>
                                                    <th>Price (RM)</th>
                                                    <th>Remarks</th>
                                                    <th class="col-2 text-center">Report</th>
                                                    <th class="col-2 text-center">Receipt</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php $counter = 1 @endphp
                                                @foreach ($reports as $report)
                                                    @if($report['status'] === 'pending_payment')
                                                        <tr>
                                                            <td class="col-1">{{ $counter++ }}</td>
                                                            <td>{{ $report['mrn'] }}</td>
                                                            <td>{{ $report['patient_name'] }}</td>
                                                            <td>{{ $report['request_name'] }}</td>
                                                            <td>
                                                                <a href="{{ route('reportdetails') }}">
                                                                    {{ $report['report_type'] }}
                                                                </a>
                                                            </td>
                                                            <td>{{ $report['date_received'] }}</td>
                                                            <td>{{ $report['deposit'] }}</td>
                                                            <td>
                                                                <span class="text-uppercase badge badge-warning">
                                                                    PENDING PAYMENT
                                                                </span>
                                                            </td>
                                                            <td>{{ $report['duration'] }}</td>
                                                            <td>
                                                                <span class="text-success font-weight-bold">
                                                                    {{ $report['assigned_staff'] }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <span class="font-weight-bold text-primary">
                                                                    RM {{ number_format($report['price'], 2) }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <span class="text-muted" style="max-width: 200px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" 
                                                                      title="{{ $report['remarks'] }}">
                                                                    {{ $report['remarks'] }}
                                                                </span>
                                                            </td>
                                                            <td class="col-2 text-center">
                                                                <button type="button" class="btn btn-info btn-sm" 
                                                                        onclick="viewReport({{ $report['id'] }}, '{{ $report['mrn'] }}', '{{ $report['patient_name'] }}')">
                                                                    <i class="feather icon-eye mr-1"></i>View
                                                                </button>
                                                            </td>
                                                            <td class="col-2 text-center">
                                                                <button type="button" class="btn btn-success btn-sm" 
                                                                        onclick="viewReceipt({{ $report['id'] }}, '{{ $report['mrn'] }}', '{{ $report['patient_name'] }}')">
                                                                    <i class="feather icon-file-text mr-1"></i>View Receipt
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- table index end --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- View Receipt Modal -->
<div class="modal fade" id="viewReceiptModal" tabindex="-1" role="dialog" aria-labelledby="viewReceiptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewReceiptModalLabel">Payment Receipt</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Patient Information -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <strong>MRN:</strong> <span id="receiptModalMrn" class="ml-2"></span>
                    </div>
                    <div class="col-md-6">
                        <strong>Patient Name:</strong> <span id="receiptModalPatientName" class="ml-2"></span>
                    </div>
                </div>

                <hr class="mb-4">

                <!-- Receipt Image Container -->
                <div class="text-center">
                    <div class="receipt-image-container" style="max-height: 70vh; overflow-y: auto;">
                        <img id="receiptImage" 
                             src="https://www.solving-finance.com/wp-content/uploads/2023/10/Example-of-a-Receipt.jpg" 
                             alt="Payment Receipt" 
                             class="img-fluid border rounded shadow-sm"
                             style="max-width: 100%; height: auto; cursor: zoom-in;">
                    </div>
                </div>

                <!-- Receipt Details -->
                <div class="mt-4 p-3 bg-light rounded">
                    <div class="row">
                        <div class="col-md-4">
                            <small class="text-muted">Payment Method:</small>
                            <div class="font-weight-bold">Credit Card</div>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Payment Date:</small>
                            <div class="font-weight-bold">25 JUN 2025</div>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Transaction ID:</small>
                            <div class="font-weight-bold">TXN123456789</div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <small class="text-muted">Amount Paid:</small>
                            <div class="font-weight-bold text-success" id="receiptAmount"></div>
                        </div>
                        <div class="col-md-8">
                            <small class="text-muted">Payment Status:</small>
                            <div class="font-weight-bold text-success">
                                <span class="badge badge-success">PAID</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="feather icon-x mr-1"></i>Close
                </button>
                <button type="button" class="btn btn-primary" onclick="downloadReceipt()">
                    <i class="feather icon-download mr-1"></i>Download Receipt
                </button>
            </div>
        </div>
    </div>
</div>

<!-- View Report Modal -->
<div class="modal fade" id="viewReportModal" tabindex="-1" role="dialog" aria-labelledby="viewReportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewReportModalLabel">Medical Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Patient Information -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <strong>MRN:</strong> <span id="viewModalMrn" class="ml-2"></span>
                    </div>
                    <div class="col-md-6">
                        <strong>Patient Name:</strong> <span id="viewModalPatientName" class="ml-2"></span>
                    </div>
                </div>

                <hr class="mb-4">

                <!-- Report Image Container -->
                <div class="text-center">
                    <div class="report-image-container" style="max-height: 70vh; overflow-y: auto;">
                        <img id="reportImage" 
                             src="https://i.pinimg.com/736x/6b/47/24/6b4724856700942db806a92603b53ad8.jpg" 
                             alt="Medical Report" 
                             class="img-fluid border rounded shadow-sm"
                             style="max-width: 100%; height: auto;">
                    </div>
                </div>

                <!-- Report Details -->
                <div class="mt-4 p-3 bg-light rounded">
                    <div class="row">
                        <div class="col-md-4">
                            <small class="text-muted">Report Type:</small>
                            <div class="font-weight-bold" id="viewReportType"></div>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Date Received:</small>
                            <div class="font-weight-bold" id="viewDateReceived"></div>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Assigned Staff:</small>
                            <div class="font-weight-bold text-success" id="viewAssignedStaff"></div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <small class="text-muted">Price:</small>
                            <div class="font-weight-bold text-primary" id="viewPrice"></div>
                        </div>
                        <div class="col-md-8">
                            <small class="text-muted">Remarks:</small>
                            <div class="font-weight-bold" id="viewRemarks"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="feather icon-x mr-1"></i>Close
                </button>
                <button type="button" class="btn btn-primary" onclick="downloadReport()">
                    <i class="feather icon-download mr-1"></i>Download Report
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function viewReport(reportId, mrn, patientName) {
    // Set the report data in modal
    document.getElementById('viewModalMrn').textContent = mrn;
    document.getElementById('viewModalPatientName').textContent = patientName;
    
    // Get report data from the PHP array (in real app, this would be from database)
    const reports = @json($reports ?? []);
    const report = reports.find(r => r.id === reportId);
    
    if (report) {
        document.getElementById('viewReportType').textContent = report.report_type;
        document.getElementById('viewDateReceived').textContent = report.date_received;
        document.getElementById('viewAssignedStaff').textContent = report.assigned_staff;
        document.getElementById('viewPrice').textContent = 'RM ' + parseFloat(report.price).toFixed(2);
        document.getElementById('viewRemarks').textContent = report.remarks;
    }
    
    // Show modal
    $('#viewReportModal').modal('show');
}

function viewReceipt(reportId, mrn, patientName) {
    // Set the receipt data in modal
    document.getElementById('receiptModalMrn').textContent = mrn;
    document.getElementById('receiptModalPatientName').textContent = patientName;
    
    // Get report data to show the amount
    const reports = @json($reports ?? []);
    const report = reports.find(r => r.id === reportId);
    
    if (report) {
        document.getElementById('receiptAmount').textContent = 'RM ' + parseFloat(report.price).toFixed(2);
    }
    
    // Show modal
    $('#viewReceiptModal').modal('show');
}

function downloadReport() {
    // In a real application, this would download the actual report file
    showAlert('info', 'Report download will be implemented in the backend.');
}

function downloadReceipt() {
    // In a real application, this would download the actual receipt file
    showAlert('info', 'Receipt download will be implemented in the backend.');
}

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    `;
    
    // Insert the alert at the top of the card body
    const cardBody = document.querySelector('.card-body');
    cardBody.insertBefore(alertDiv, cardBody.firstChild);
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// Image zoom functionality for report
document.getElementById('reportImage').addEventListener('click', function() {
    if (this.style.transform === 'scale(1.5)') {
        this.style.transform = 'scale(1)';
        this.style.cursor = 'zoom-in';
    } else {
        this.style.transform = 'scale(1.5)';
        this.style.cursor = 'zoom-out';
    }
    this.style.transition = 'transform 0.3s ease';
});

// Image zoom functionality for receipt
document.getElementById('receiptImage').addEventListener('click', function() {
    if (this.style.transform === 'scale(1.5)') {
        this.style.transform = 'scale(1)';
        this.style.cursor = 'zoom-in';
    } else {
        this.style.transform = 'scale(1.5)';
        this.style.cursor = 'zoom-out';
    }
    this.style.transition = 'transform 0.3s ease';
});

// Reset zoom when modals are closed
$('#viewReportModal').on('hidden.bs.modal', function () {
    const reportImage = document.getElementById('reportImage');
    reportImage.style.transform = 'scale(1)';
    reportImage.style.cursor = 'zoom-in';
});

$('#viewReceiptModal').on('hidden.bs.modal', function () {
    const receiptImage = document.getElementById('receiptImage');
    receiptImage.style.transform = 'scale(1)';
    receiptImage.style.cursor = 'zoom-in';
});

// Initialize image cursors
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('reportImage').style.cursor = 'zoom-in';
    document.getElementById('receiptImage').style.cursor = 'zoom-in';
});
</script>

<style>
.report-image-container, .receipt-image-container {
    position: relative;
}

.report-image-container img, .receipt-image-container img {
    transition: transform 0.3s ease;
}

.badge-warning {
    background-color: #fd7e14;
    color: white;
}

.badge-success {
    background-color: #28a745;
    color: white;
}

/* Tooltip for long text */
[title]:hover {
    position: relative;
}

/* Custom scrollbar for image containers */
.report-image-container::-webkit-scrollbar, .receipt-image-container::-webkit-scrollbar {
    width: 8px;
}

.report-image-container::-webkit-scrollbar-track, .receipt-image-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.report-image-container::-webkit-scrollbar-thumb, .receipt-image-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.report-image-container::-webkit-scrollbar-thumb:hover, .receipt-image-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}
</style>

@endsection