@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') }}">In Progress</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>In Progress</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',
                                                'patient_IC' => 'YES',
                                                'status' => 'pending',
                                                'duration' => '14 days',
                                                'assigned_staff' => null,
                                            ],
                                            [
                                                'id' => 2,
                                                'mrn' => '87654321',
                                                'patient_name' => 'Jane Smith',
                                                'request_name' => 'Abu Bakar',
                                                'report_type' => 'Form report',
                                                'date_received' => '11 MAY 2025',
                                                'deposit' => 'YES',
                                                'patient_IC' => 'YES',
                                                'status' => 'pending',
                                                'duration' => '10 days',
                                                'assigned_staff' => 'Mr. Ahmad',
                                            ],
                                            [
                                                'id' => 3,
                                                'mrn' => '01020304',
                                                'patient_name' => 'Ahmad Ali',
                                                'request_name' => 'Haris',
                                                'report_type' => 'Full report',
                                                'date_received' => '12 MAY 2025',
                                                'deposit' => 'YES',
                                                'patient_IC' => 'Yes',
                                                'status' => 'pending',
                                                'duration' => '8 days',
                                                'assigned_staff' => null,
                                            ],
                                            [
                                                'id' => 4,
                                                'mrn' => '01020304',
                                                'patient_name' => 'Ahmad Ali',
                                                'request_name' => 'Haris',
                                                'report_type' => 'Full report',
                                                'date_received' => '12 MAY 2025',
                                                'deposit' => 'YES',
                                                'patient_IC' => 'Yes',
                                                'status' => 'pending',
                                                'duration' => '8 days',
                                                'assigned_staff' => null,
                                            ],
                                            [
                                                'id' => 5,
                                                'mrn' => '01020304',
                                                'patient_name' => 'Ahmad Ali',
                                                'request_name' => 'Haris',
                                                'report_type' => 'Full report',
                                                'date_received' => '12 MAY 2025',
                                                'deposit' => 'YES',
                                                'patient_IC' => 'Yes',
                                                'status' => 'pending',
                                                'duration' => '8 days',
                                                'assigned_staff' => null,
                                            ],
                                            
                                        ];

                                        $staff_list = [
                                            'Mr. Ahmad Razak',
                                            'Ms Siti Aminah',
                                            'Mr Lim Wei Ming',
                                            'Mr Priya Sharma',
                                            'Mr Hassan Ibrahim',
                                            'Mr Chen Li Hua',
                                            'Ms Fatimah Zahra'
                                        ];
                                    @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>IC</th>
                                                    <th>Status</th>
                                                    <th>Duration</th>
                                                    <th>Assign Staff</th>
                                                    <th class="col-2 text-center">Report</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php $counter = 1 @endphp
                                                @foreach ($reports as $report)
                                                    @if($report['status'] === 'pending')
                                                        <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>{{ $report['patient_IC'] }}</td>
                                                            <td>
                                                                <span class="text-uppercase" style="color: #fd7e14;">
                                                                    {{ $report['status'] }}
                                                                </span>
                                                            </td>
                                                            <td>{{ $report['duration'] }}</td>
                                                            <td>
                                                                <div class="staff-assignment" data-report-id="{{ $report['id'] }}">
                                                                    @if($report['assigned_staff'])
                                                                        <span class="assigned-staff-name text-success" 
                                                                              onclick="reassignStaff({{ $report['id'] }})" 
                                                                              style="cursor: pointer; font-weight: 500;"
                                                                              title="Click to reassign">
                                                                            {{ $report['assigned_staff'] }}
                                                                        </span>
                                                                    @else
                                                                        <select class="form-control form-control-sm staff-select" 
                                                                                onchange="assignStaff({{ $report['id'] }}, this.value)"
                                                                                style="min-width: 180px;">
                                                                            <option value="">-- Select Staff --</option>
                                                                            @foreach($staff_list as $staff)
                                                                                <option value="{{ $staff }}">{{ $staff }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            <td class="col-2 text-center">
                                                                <button type="button" class="btn btn-primary btn-sm" 
                                                                        onclick="openUploadModal({{ $report['id'] }}, '{{ $report['mrn'] }}', '{{ $report['patient_name'] }}')">
                                                                    Upload
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- table index end --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadModalLabel">Upload Report</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="uploadForm" onsubmit="return handleUpload(event)">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="reportId" name="report_id" value="">
                    
                    <!-- Patient Information -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <strong>MRN:</strong> <span id="modalMrn" class="ml-2"></span>
                        </div>
                        <div class="col-md-6">
                            <strong>Patient Name:</strong> <span id="modalPatientName" class="ml-2"></span>
                        </div>
                    </div>

                    <hr class="mb-4">

                    <!-- Form Fields -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="price" class="form-label">Price <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">RM</span>
                                    <input type="number" class="form-control" id="price" name="price" 
                                           step="0.01" min="0" required placeholder="0.00">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="reportFile" class="form-label">Upload Report/Image <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" id="reportFile" name="report_file" 
                                       accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" required>
                                <small class="form-text text-muted">
                                    PDF, JPG, PNG, DOC (Max: 10MB)
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="remarks" class="form-label">Remarks</label>
                                <textarea class="form-control" id="remarks" name="remarks" 
                                          rows="3" placeholder="Enter any additional remarks..."></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3" id="filePreview" style="display: none;">
                        <div class="col-md-12">
                            <label class="form-label">File Preview:</label>
                            <div id="previewContainer" class="border p-3 rounded">
                                <!-- Image preview will be shown here -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="feather icon-upload mr-1"></i>Upload Report
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Staff Assignment Confirmation Modal -->
<div class="modal fade" id="staffAssignModal" tabindex="-1" role="dialog" aria-labelledby="staffAssignModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staffAssignModalLabel">Confirm Staff Assignment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to assign <strong id="staffName"></strong> to this report?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="confirmStaffAssignment()">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script>
let pendingAssignment = null;

function openUploadModal(reportId, mrn, patientName) {
    // Set the report data in modal
    document.getElementById('reportId').value = reportId;
    document.getElementById('modalMrn').textContent = mrn;
    document.getElementById('modalPatientName').textContent = patientName;
    
    // Reset form
    document.getElementById('uploadForm').reset();
    document.getElementById('reportId').value = reportId; // Reset clears this, so set it again
    document.getElementById('filePreview').style.display = 'none';
    
    // Show modal
    $('#uploadModal').modal('show');
}

// Staff assignment functions
function assignStaff(reportId, staffName) {
    if (staffName === '') return;
    
    pendingAssignment = {
        reportId: reportId,
        staffName: staffName
    };
    
    document.getElementById('staffName').textContent = staffName;
    $('#staffAssignModal').modal('show');
}

function confirmStaffAssignment() {
    if (!pendingAssignment) return;
    
    const { reportId, staffName } = pendingAssignment;
    
    // Update the UI - just show the staff name as clickable text
    const staffAssignmentDiv = document.querySelector(`[data-report-id="${reportId}"]`);
    if (staffAssignmentDiv) {
        staffAssignmentDiv.innerHTML = `
            <span class="assigned-staff-name text-success" 
                  onclick="reassignStaff(${reportId})" 
                  style="cursor: pointer; font-weight: 500;"
                  title="Click to reassign">
                ${staffName}
            </span>
        `;
    }
    
    // Here you would typically make an AJAX call to update the database
    // Example:
    // fetch(`/assign-staff/${reportId}`, {
    //     method: 'POST',
    //     headers: {
    //         'Content-Type': 'application/json',
    //         'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    //     },
    //     body: JSON.stringify({ staff_name: staffName })
    // });
    
    // Show success message
    showAlert('success', `Staff "${staffName}" has been assigned successfully!`);
    
    $('#staffAssignModal').modal('hide');
    pendingAssignment = null;
}

function reassignStaff(reportId) {
    const staffAssignmentDiv = document.querySelector(`[data-report-id="${reportId}"]`);
    if (staffAssignmentDiv) {
        // Get the staff list from PHP
        const staffList = @json($staff_list ?? []);
        
        let selectOptions = '<option value="">-- Select Staff --</option>';
        staffList.forEach(staff => {
            selectOptions += `<option value="${staff}">${staff}</option>`;
        });
        
        staffAssignmentDiv.innerHTML = `
            <select class="form-control form-control-sm staff-select" 
                    onchange="assignStaff(${reportId}, this.value)"
                    style="min-width: 180px;">
                ${selectOptions}
            </select>
        `;
        
        // Auto-focus the dropdown for better UX
        const selectElement = staffAssignmentDiv.querySelector('select');
        if (selectElement) {
            selectElement.focus();
        }
    }
}

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);
}

// File preview functionality
document.getElementById('reportFile').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const previewContainer = document.getElementById('previewContainer');
    const filePreview = document.getElementById('filePreview');
    
    if (file) {
        filePreview.style.display = 'block';
        
        // Clear previous preview
        previewContainer.innerHTML = '';
        
        // Show image preview if it's an image
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = document.createElement('img');
                img.src = event.target.result;
                img.style.maxWidth = '100%';
                img.style.maxHeight = '200px';
                img.className = 'img-thumbnail';
                previewContainer.appendChild(img);
            };
            reader.readAsDataURL(file);
        } else {
            // For non-image files, just show file name
            const fileInfo = document.createElement('p');
            fileInfo.textContent = `Selected file: ${file.name}`;
            previewContainer.appendChild(fileInfo);
        }
    } else {
        filePreview.style.display = 'none';
    }
});

// Handle form submission and redirect to completed page
function handleUpload(event) {
    event.preventDefault();
    
    const price = document.getElementById('price').value;
    const reportFile = document.getElementById('reportFile').files[0];
    
    if (!price || parseFloat(price) <= 0) {
        alert('Please enter a valid price.');
        return false;
    }
    
    if (!reportFile) {
        alert('Please select a file to upload.');
        return false;
    }
    
    // Check file size (10MB limit)
    if (reportFile.size > 10 * 1024 * 1024) {
        alert('File size must be less than 10MB.');
        return false;
    }
    
    // Show loading state
    const submitBtn = document.querySelector('#uploadForm button[type="submit"]');
    submitBtn.innerHTML = '<i class="feather icon-loader mr-1"></i>Uploading...';
    submitBtn.disabled = true;
    
    // Simulate upload process and redirect to completed page
    setTimeout(function() {
        // Close modal
        $('#uploadModal').modal('hide');
        
        // Redirect to completed page
        window.location.href = "{{ route('pendingpayment') }}";
        
    }, 2000); // 2 second delay to simulate upload
    
    return false;
}

// Reset form when modal is closed
$('#uploadModal').on('hidden.bs.modal', function () {
    document.getElementById('uploadForm').reset();
    document.getElementById('filePreview').style.display = 'none';
    
    // Reset submit button
    const submitBtn = document.querySelector('#uploadForm button[type="submit"]');
    submitBtn.innerHTML = '<i class="feather icon-upload mr-1"></i>Upload Report';
    submitBtn.disabled = false;
});

// Reset staff assignment modal when closed
$('#staffAssignModal').on('hidden.bs.modal', function () {
    pendingAssignment = null;
});
</script>

@endsection