@extends('layouts.yellow')
@section('content')
<div class="container-fluid">
    <!-- Debug information section -->
    @if(config('app.debug'))
    <div class="row mb-2">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-header">
                    <a class="collapsed" data-bs-toggle="collapse" href="#debugInfo" role="button" aria-expanded="false" aria-controls="debugInfo">
                        Debug Information (Click to expand)
                    </a>
                </div>
                <div class="collapse" id="debugInfo">
                    <div class="card-body">
                        <h5>Document IDs:</h5>
                        <ul>
                            @foreach($documents as $doc)
                            <li>ID: {{ $doc->id }} | File: {{ $doc->original_name }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <div>
                <h2 class="text-primary font-weight-bold mb-0">{{ $model->firstname . " " . $model->lastname }}</h2>
                <p class="text-muted mb-0"><i class="bi bi-folder-fill me-2"></i>{{ __('patient-documents.title') }}</p>
            </div>
            <div>
                @if(isset($source) && $source == 'appointment' && isset($sourceId))
                    <a href="{{ route('/admin/detail-appointment', ['id' => $sourceId]) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i> {{ __('patient-documents.backToAppointment') }}
                    </a>
                @else
                    <a href="{{ route('/admin/detail-patient', ['id' => $patientId]) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i> {{ __('patient-documents.backToPatient') }}
                    </a>
                @endif
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>
    @endif

    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card shadow border-0 h-100" style="border-radius: 15px; overflow: hidden;">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-cloud-arrow-up-fill me-2"></i>{{ __('patient-documents.upload') }}</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('patient.documents.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="patientId" value="{{ $patientId }}">
                        
                        <div class="mb-4">
                            <label for="document" class="form-label fw-bold">{{ __('patient-documents.selectDocument') }}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light"><i class="bi bi-file-earmark"></i></span>
                                <input type="file" class="form-control @error('document') is-invalid @enderror" id="document" name="document" required>
                            </div>
                            @error('document')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-4">
                            <label for="description" class="form-label fw-bold">{{ __('patient-documents.description') }}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light"><i class="bi bi-pencil"></i></span>
                                <input type="text" class="form-control @error('description') is-invalid @enderror" id="description" name="description" placeholder="{{ __('patient-documents.description') }}">
                            </div>
                            @error('description')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-cloud-arrow-up me-2"></i> {{ __('patient-documents.upload') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-8">
            <div class="card shadow border-0" style="border-radius: 15px; overflow: hidden;">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-files me-2"></i>{{ __('patient-documents.documentsList') }}</h5>
                    <span class="badge bg-light text-primary rounded-pill">{{ $documents->count() }}</span>
                </div>
                <div class="card-body">
                    @if($documents->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('patient-documents.fileName') }}</th>
                                        <th>{{ __('patient-documents.description') }}</th>
                                        <th>{{ __('patient-documents.fileType') }}</th>
                                        <th>{{ __('patient-documents.fileSize') }}</th>
                                        <th>{{ __('patient-documents.uploadDate') }}</th>
                                        <th class="text-end">{{ __('patient-documents.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($documents as $document)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="file-icon me-2">
                                                        @php
                                                            $extension = pathinfo($document->original_name, PATHINFO_EXTENSION);
                                                            $iconClass = 'bi-file-earmark';
                                                            
                                                            if (in_array($extension, ['pdf'])) {
                                                                $iconClass = 'bi-file-earmark-pdf';
                                                            } elseif (in_array($extension, ['doc', 'docx'])) {
                                                                $iconClass = 'bi-file-earmark-word';
                                                            } elseif (in_array($extension, ['xls', 'xlsx'])) {
                                                                $iconClass = 'bi-file-earmark-excel';
                                                            } elseif (in_array($extension, ['jpg', 'jpeg', 'png', 'gif'])) {
                                                                $iconClass = 'bi-file-earmark-image';
                                                            }
                                                        @endphp
                                                        <i class="bi {{ $iconClass }} fs-4 text-primary"></i>
                                                    </div>
                                                    <div class="file-name">
                                                        <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ $document->original_name }}">{{ $document->original_name }}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ $document->description ?? '-' }}">
                                                    {{ $document->description ?? '-' }}
                                                </span>
                                            </td>
                                            <td><span class="badge bg-light text-dark">{{ Str::upper(pathinfo($document->original_name, PATHINFO_EXTENSION)) }}</span></td>
                                            <td>{{ round($document->file_size / 1024, 2) }} KB</td>
                                            <td>{{ $document->created_at->format('d/m/Y H:i') }}</td>
                                            <td>
                                                <!-- Debug: Document ID = {{ $document->id }} -->
                                                <div class="btn-group float-end" role="group">
                                                    <a href="/admin/patient/documents/{{ $document->id }}" class="btn btn-sm btn-outline-primary" target="_blank" title="{{ __('patient-documents.view') }}">
                                                        <i class="bi bi-eye"></i>
                                                    </a>
                                                    <a href="/admin/patient/documents/{{ $document->id }}/download" class="btn btn-sm btn-outline-success" title="{{ __('patient-documents.download') }}">
                                                        <i class="bi bi-download"></i>
                                                    </a>
                                                    <form action="/admin/patient/documents/{{ $document->id }}" method="POST" class="d-inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="{{ __('patient-documents.delete') }}" onclick="return confirm('{{ __('patient-documents.confirmDelete') }}')">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="bi bi-folder2-open text-muted" style="font-size: 4rem;"></i>
                            <p class="text-muted mt-3 mb-0">{{ __('patient-documents.noDocuments') }}</p>
                            <p class="small text-muted">{{ __('patient-documents.uploadYourFirst') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .table th, .table td {
        padding: 1rem;
    }
    
    .table thead th {
        font-weight: 600;
        border-top: none;
    }
    
    .btn-group .btn {
        margin-right: 2px;
        border-radius: 4px !important;
    }
    
    .card {
        transition: transform 0.2s;
    }
    
    .card:hover {
        transform: translateY(-5px);
    }
    
    .card-header {
        border-bottom: none;
        padding: 1rem 1.5rem;
    }
    
    .file-icon {
        min-width: 30px;
    }
</style>
@endsection