@extends('layouts.app')

@section('content')
<style>
    :root {
        --ura-primary: #17479E;
        --ura-gradient: linear-gradient(135deg, #17479E 0%, #00BCD4 100%);
        --ura-shadow: 0 8px 25px rgba(23, 71, 158, 0.15);
        --ura-shadow-hover: 0 12px 35px rgba(23, 71, 158, 0.25);
    }

    .file-detail-header {
        background: var(--ura-gradient);
        padding: 2rem;
        border-radius: 16px;
        margin-bottom: 2rem;
        color: white;
    }

    .folio-list-item {
        background: white;
        border-radius: 12px;
        box-shadow: var(--ura-shadow);
        transition: all 0.3s ease;
        margin-bottom: 1rem;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid transparent;
    }

    .folio-list-item:hover {
        transform: translateX(8px);
        box-shadow: var(--ura-shadow-hover);
        border-color: var(--ura-primary);
    }

    .folio-list-header {
        padding: 1.2rem 1.5rem;
        display: grid;
        grid-template-columns: 150px 1fr auto;
        gap: 2rem;
        align-items: center;
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.05) 0%, rgba(0, 188, 212, 0.05) 100%);
    }

    .folio-number {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--ura-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .folio-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.5rem;
    }

    .folio-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .folio-list-header {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .folio-details {
            grid-template-columns: 1fr 1fr;
        }

        .folio-actions {
            justify-content: flex-start;
        }
    }

    .detail-item {
        display: flex;
        flex-direction: column;
    }

    .detail-label {
        font-size: 0.8rem;
        color: #6c757d;
        font-weight: 600;
        text-transform: uppercase;
    }

    .detail-value {
        font-size: 0.95rem;
        color: #2c3e50;
        font-weight: 500;
    }

    .view-preview-btn {
        background: var(--ura-gradient);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .view-preview-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
        color: white;
    }

    .modal-xl {
        max-width: 90%;
    }

    .pdf-viewer-modal {
        width: 100%;
        height: 75vh;
        border: none;
        border-radius: 8px;
    }

    .pagination-wrapper .pagination {
        --bs-pagination-color: var(--ura-primary);
        --bs-pagination-border-color: rgba(23, 71, 158, 0.2);
        --bs-pagination-hover-color: white;
        --bs-pagination-hover-bg: var(--ura-primary);
        --bs-pagination-active-bg: var(--ura-primary);
        --bs-pagination-active-border-color: var(--ura-primary);
    }
</style>

<div class="container-fluid">
    {{-- PAGE HEADER WITH BREADCRUMB --}}
    <div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
        <div class="card-body py-3">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="icon-wrapper">
                        <i class="bx bx-folder-open text-primary fs-4" style="color: #17479E !important;"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">File Details</h5>
                </div>

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}" class="text-decoration-none" style="color: #17479E;">
                                <i class="fas fa-home me-1"></i> Dashboard
                            </a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('files.index') }}" class="text-decoration-none" style="color: #17479E;">
                                Files
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <span class="badge bg-primary" style="font-size: 90%; font-weight: 500;">
                                {{ $file->reference_number }}
                            </span>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- File Detail Header --}}
    <div class="file-detail-header">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <h2 class="mb-2 text-white"><i class="bx bx-folder me-2"></i>{{ $file->reference_number }}</h2>
                <p class="mb-3">{{ $file->file_subject }}</p>
                <div class="d-flex gap-4">
                    <span><i class="bx bx-file me-1"></i><strong>{{ $file->folios()->count() }}</strong> Total Folios</span>
                    <span><i class="bx bx-calendar me-1"></i>{{ $file->created_at->format('d M Y') }}</span>
                    @if($file->department)
                        <span><i class="bx bx-building me-1"></i>{{ $file->department->name }}</span>
                    @endif
                </div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('files.index') }}" class="btn btn-light">
                    <i class="bx bx-arrow-back"></i> Back
                </a>
                <a href="{{ route('files.edit', $file) }}" class="btn btn-light">
                    <i class="bx bx-edit"></i> Edit
                </a>
            </div>
        </div>
    </div>

    {{-- Folios List --}}
    @if($folios->count() > 0)
        @php
            $totalFolios = $file->folios()->count();
            $currentPage = $folios->currentPage();
            $perPage = $folios->perPage();
        @endphp

        @foreach($folios as $index => $folio)
            @php
                $folioNumber = $totalFolios - (($currentPage - 1) * $perPage + $index);
            @endphp

            <div class="folio-list-item">
                <div class="folio-list-header">
                    <div class="folio-number">
                        <i class="bx bx-file"></i>
                        Folio {{ $folioNumber }}
                    </div>

                    <div class="folio-details">
                        <div class="detail-item">
                            <span class="detail-label">Enquirer</span>
                            <span class="detail-value">{{ $folio->folioable ? $folio->folioable->full_name : 'N/A' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Check Number</span>
                            <span class="detail-value">{{ $folio->folioable ? $folio->folioable->check_number : 'N/A' }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">File Name</span>
                            <span class="detail-value">{{ basename($folio->file_path) }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Date</span>
                            <span class="detail-value">{{ $folio->created_at->format('d M Y') }}</span>
                        </div>
                    </div>

                    <div class="folio-actions">
                        <button class="view-preview-btn" data-bs-toggle="modal" data-bs-target="#folioModal{{ $folio->id }}">
                            <i class="bx bx-show"></i> View
                        </button>
                        <a href="{{ asset('/' . $folio->file_path) }}" class="view-preview-btn" download>
                            <i class="bx bx-download"></i>
                        </a>
                    </div>
                </div>
            </div>

            {{-- Modal for Preview --}}
            <div class="modal fade" id="folioModal{{ $folio->id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="bx bx-file me-2"></i>
                                Folio {{ $folioNumber }} - {{ basename($folio->file_path) }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            @php
                                $extension = strtolower(pathinfo($folio->file_path, PATHINFO_EXTENSION));
                            @endphp

                            @if($extension === 'pdf')
                                <object data="{{ asset('/' . $folio->file_path) }}" type="application/pdf" class="pdf-viewer-modal">
                                    <div class="alert alert-info">
                                        <i class="bx bx-info-circle"></i>
                                        Your browser does not support PDF preview.
                                        <a href="{{ asset('/' . $folio->file_path) }}" target="_blank" class="alert-link">Click here to download the PDF</a>.
                                    </div>
                                </object>
                            @elseif(in_array($extension, ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                <img src="{{ asset('/' . $folio->file_path) }}" alt="Document" class="img-fluid rounded">
                            @else
                                <div class="alert alert-secondary text-center py-5">
                                    <i class="bx bx-file" style="font-size: 4rem;"></i>
                                    <h5 class="mt-3">Preview not available for this file type</h5>
                                    <a href="{{ asset('/' . $folio->file_path) }}" target="_blank" class="btn btn-primary mt-2">
                                        <i class="bx bx-download me-1"></i>
                                        Download File
                                    </a>
                                </div>
                            @endif
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <a href="{{ asset('/' . $folio->file_path) }}" class="btn btn-primary" download>
                                <i class="bx bx-download me-1"></i> Download
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

        {{-- Pagination --}}
        <div class="pagination-wrapper d-flex justify-content-center mt-4">
              <div class="card-footer bg-info">
    <div class="d-flex justify-content-center mt-4 pagination-wrapper">
         {{ $folios->links('pagination::bootstrap-5') }}
    </div>
    </div>
        </div>
    @else
        <div class="text-center py-5">
            <i class="bx bx-folder-open" style="font-size: 4rem; color: #ccc;"></i>
            <h5 class="text-muted mt-3">No Folios Yet</h5>
            <p class="text-muted">This file doesn't have any folios attached yet.</p>
        </div>
    @endif
</div>
@endsection