@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>Brochures</h3>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Brochures</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Flash Messages --}}
            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show">
                        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show">
                        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                </div>
            @endif

            @if($errors->any())
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                </div>
            @endif

            {{-- ── Upload cards ── --}}
            <div class="container-fluid mb-4">
                <div class="row">

                    {{-- Single upload --}}
                    <div class="col-md-4 mb-3">
                        <div class="card h-100" style="border-left:4px solid #dc3545;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3" style="gap:12px;">
                                    <div style="width:48px;height:48px;border-radius:10px;background:#fff5f5;
                                    display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <i class="fas fa-file-pdf" style="font-size:22px;color:#dc3545;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700;font-size:15px;">Upload Single Brochure</div>
                                        <div style="font-size:13px;color:#6c757d;">PDF only — up to 500MB</div>
                                    </div>
                                </div>
                                <form action="{{ route('brochure.store') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group mb-2">
                                        <select name="project_id" class="form-control form-control-sm" required>
                                            <option value="">— Select Project —</option>
                                            @foreach($projects as $project)
                                                <option value="{{ $project->id }}">{{ $project->project_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group mb-2">
                                        <input type="text" name="title" class="form-control form-control-sm"
                                            placeholder="Title (optional)">
                                    </div>
                                    <div class="form-group mb-2">
                                        <label style="flex:1;margin:0;cursor:pointer;width:100%;">
                                            <div id="csv-label-brochure-single" style="border:2px dashed #ced4da;border-radius:6px;padding:8px 14px;
                                            font-size:13px;color:#6c757d;white-space:nowrap;
                                            overflow:hidden;text-overflow:ellipsis;">
                                                <i class="fas fa-paperclip mr-1"></i> Choose PDF...
                                            </div>
                                            <input type="file" name="brochure_file" accept=".pdf" required
                                                style="display:none;"
                                                onchange="document.getElementById('csv-label-brochure-single').innerHTML=
                                           '<i class=\'fas fa-file-pdf mr-1\' style=\'color:#dc3545\'></i> '+this.files[0].name">
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-danger btn-sm w-100">
                                        <i class="fas fa-upload mr-1"></i> Upload Brochure
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Bulk upload --}}
                    <div class="col-md-8 mb-3">
                        <div class="card h-100" style="border-left:4px solid #ffc107;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3" style="gap:12px;">
                                    <div style="width:48px;height:48px;border-radius:10px;background:#fffdf0;
                                    display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <i class="fas fa-layer-group" style="font-size:22px;color:#ffc107;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700;font-size:15px;">Bulk Upload Brochures</div>
                                        <div style="font-size:13px;color:#6c757d;">Upload multiple PDFs at once — up to
                                            500MB each</div>
                                    </div>
                                </div>
                                <div class="form-group mb-2">
                                    <select id="bulk_project_id" class="form-control form-control-sm">
                                        <option value="">— Select Project —</option>
                                        @foreach($projects as $project)
                                            <option value="{{ $project->id }}">{{ $project->project_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <label style="width:100%;cursor:pointer;">
                                    <div id="csv-label-brochure-bulk" style="border:2px dashed #ced4da;border-radius:6px;padding:8px 14px;
                                    font-size:13px;color:#6c757d;margin-bottom:10px;">
                                        <i class="fas fa-paperclip mr-1"></i> Choose PDFs...
                                    </div>
                                    <input type="file" id="bulk_brochures" class="file_input" accept=".pdf" multiple
                                        style="display:none;"
                                        onchange="prepareBrochureUploads(this); updateBulkLabel(this)">
                                </label>
                                <div id="brochure_file_list" class="mb-2"></div>
                                <button type="button" id="start_bulk_upload" class="btn btn-warning btn-sm"
                                    onclick="startChunkedUploads()" style="display:none;">
                                    <i class="fas fa-upload mr-1"></i> Upload All
                                </button>
                                <div id="overall_progress_wrap" class="mt-3" style="display:none;">
                                    <small class="font-weight-bold">Overall Progress</small>
                                    <div class="progress mt-1" style="height:8px;">
                                        <div id="overall_progress_bar"
                                            class="progress-bar bg-warning progress-bar-striped progress-bar-animated"
                                            style="width:0%"></div>
                                    </div>
                                    <small id="overall_progress_text" class="text-muted mt-1 d-block"></small>
                                </div>
                                <div id="upload_summary" class="mt-3" style="display:none;"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- ── Brochures Table ─────────────────────────── --}}
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-list mr-2"></i>
                            All Brochures
                            <span class="badge badge-danger ml-2">{{ $brochures->count() }}</span>
                        </h5>
                        <input type="text" id="br_search" class="form-control form-control-sm" style="max-width:220px;"
                            placeholder="Search...">
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-bordered mb-0" id="br_table">
                                <thead class="thead-light">
                                    <tr>
                                        <th width="50">#</th>
                                        <th>Project</th>
                                        <th>Title</th>
                                        <th class="text-center" width="120">Preview</th>
                                        <th>Filename</th>
                                        <th width="120">Added</th>
                                        <th class="text-center" width="140">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($brochures as $i => $brochure)
                                        <tr>
                                            <td class="align-middle">{{ $i + 1 }}</td>
                                            <td class="align-middle">
                                                {{ $brochure->projects->project_name ?? '—' }}
                                            </td>
                                            <td class="align-middle">
                                                {{ $brochure->title ?? '—' }}
                                            </td>
                                            <td class="align-middle text-center">
                                                <a href="{{ asset('storage/brochures/' . $brochure->brochure_file) }}"
                                                    target="_blank" class="btn btn-sm btn-outline-danger">
                                                    <i class="fas fa-file-pdf mr-1"></i> View
                                                </a>
                                            </td>
                                            <td class="align-middle">
                                                <small class="text-muted" style="word-break:break-all; font-size:12px;">
                                                    {{ $brochure->brochure_file }}
                                                </small>
                                            </td>
                                            <td class="align-middle">
                                                <small class="text-muted">
                                                    {{ $brochure->created_at->format('d M Y') }}
                                                </small>
                                            </td>
                                            <td class="align-middle text-center">
                                                <a href="/brochure/{{ $brochure->id }}/edit"
                                                    class="btn btn-sm btn-warning mr-1" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a href="{{ asset('storage/brochures/' . $brochure->brochure_file) }}"
                                                    download class="btn btn-sm btn-info mr-1" title="Download">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                                <form action="/brochure/{{ $brochure->id }}/delete" method="POST"
                                                    class="d-inline"
                                                    onsubmit="return confirm('Delete this brochure? This cannot be undone.')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center text-muted py-5">
                                                <i class="fas fa-file-pdf fa-2x d-block mb-2"></i>
                                                No brochures uploaded yet.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

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

<script>
    // ── Search filter ─────────────────────────────
    document.getElementById('br_search').addEventListener('input', function () {
        const q = this.value.toLowerCase();
        const rows = document.querySelectorAll('#br_table tbody tr');
        rows.forEach(row => {
            row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });

    // ── Single file name display ──────────────────
    function showSingleFilename(input) {
        const el = document.getElementById('single_pdf_name');
        if (input.files && input.files[0]) {
            const sizeMB = (input.files[0].size / 1024 / 1024).toFixed(1);
            el.textContent = '✓ ' + input.files[0].name + ' (' + sizeMB + ' MB)';
        }
    }

    // ── Chunked upload config ─────────────────────
    const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB per chunk
    let filesToUpload = [];

    // ── Prepare bulk file list with progress bars ──
    function prepareBrochureUploads(input) {
        filesToUpload = Array.from(input.files);
        const list = document.getElementById('brochure_file_list');
        list.innerHTML = '';

        if (filesToUpload.length === 0) {
            document.getElementById('start_bulk_upload').style.display = 'none';
            return;
        }

        filesToUpload.forEach((file, i) => {
            const sizeMB = (file.size / 1024 / 1024).toFixed(1);
            list.innerHTML += `
                <div class="mb-2 p-2 border rounded bg-light" id="file_item_${i}">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span style="font-size:13px; font-weight:600; word-break:break-all;">
                            <i class="fas fa-file-pdf text-danger mr-1"></i>${file.name}
                        </span>
                        <span class="badge badge-secondary ml-2" style="white-space:nowrap;">
                            ${sizeMB} MB
                        </span>
                    </div>
                    <div class="progress" style="height:6px;">
                        <div id="progress_${i}"
                             class="progress-bar bg-warning progress-bar-striped progress-bar-animated"
                             style="width:0%">
                        </div>
                    </div>
                    <small id="status_${i}" class="text-muted">Waiting...</small>
                </div>
            `;
        });

        document.getElementById('start_bulk_upload').style.display = 'inline-block';
    }

    // ── Start uploading all files ─────────────────
    async function startChunkedUploads() {
        const projectId = document.getElementById('bulk_project_id').value;

        if (!projectId) {
            alert('Please select a project first.');
            return;
        }

        if (filesToUpload.length === 0) {
            alert('Please select at least one PDF file.');
            return;
        }

        // Hide button, show progress
        document.getElementById('start_bulk_upload').style.display = 'none';
        document.getElementById('overall_progress_wrap').style.display = 'block';

        let completed = 0;
        let failed = 0;
        const summary = [];

        for (let i = 0; i < filesToUpload.length; i++) {
            const file = filesToUpload[i];
            const result = await uploadFileInChunks(file, i, projectId);

            if (result.success) {
                completed++;
                summary.push(`
                    <li class="text-success">
                        <i class="fas fa-check-circle mr-1"></i>
                        ${file.name}
                    </li>
                `);
            } else {
                failed++;
                summary.push(`
                    <li class="text-danger">
                        <i class="fas fa-times-circle mr-1"></i>
                        ${file.name}: ${result.error}
                    </li>
                `);
            }

            // Update overall progress
            const pct = Math.round(((i + 1) / filesToUpload.length) * 100);
            document.getElementById('overall_progress_bar').style.width = pct + '%';
            document.getElementById('overall_progress_text').textContent =
                `${i + 1} of ${filesToUpload.length} files processed`;
        }

        // Show final summary
        const summaryEl = document.getElementById('upload_summary');
        summaryEl.style.display = 'block';
        summaryEl.innerHTML = `
            <div class="alert ${failed === 0 ? 'alert-success' : 'alert-warning'}">
                <strong>
                    <i class="fas fa-${failed === 0 ? 'check' : 'exclamation-triangle'} mr-1"></i>
                    ${completed} uploaded successfully${failed > 0 ? ', ' + failed + ' failed' : ''}
                </strong>
                <ul class="mb-0 mt-2">${summary.join('')}</ul>
            </div>
        `;

        // Reload page after 2s to show new entries
        if (completed > 0) {
            setTimeout(() => location.reload(), 2000);
        }
    }

    // ── Upload single file in chunks ──────────────
    async function uploadFileInChunks(file, fileIndex, projectId) {
        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
        const statusEl = document.getElementById(`status_${fileIndex}`);
        const progressEl = document.getElementById(`progress_${fileIndex}`);

        statusEl.textContent = 'Starting...';
        statusEl.className = 'text-warning';

        try {
            for (let chunk = 0; chunk < totalChunks; chunk++) {
                const start = chunk * CHUNK_SIZE;
                const end = Math.min(start + CHUNK_SIZE, file.size);
                const blob = file.slice(start, end);

                const formData = new FormData();
                formData.append('file', blob);
                formData.append('chunk', chunk);
                formData.append('chunks', totalChunks);
                formData.append('filename', file.name);
                formData.append('project_id', projectId);
                formData.append('_token', '{{ csrf_token() }}');

                const response = await fetch('{{ route("brochure.chunk-upload") }}', {
                    method: 'POST',
                    body: formData,
                });

                if (!response.ok) {
                    const err = await response.json().catch(() => ({}));
                    throw new Error(err.message || `Server error ${response.status}`);
                }

                const pct = Math.round(((chunk + 1) / totalChunks) * 100);
                progressEl.style.width = pct + '%';
                statusEl.textContent = `Uploading... ${pct}%`;
            }

            // Done
            progressEl.classList.remove(
                'progress-bar-animated', 'progress-bar-striped', 'bg-warning'
            );
            progressEl.classList.add('bg-success');
            progressEl.style.width = '100%';
            statusEl.textContent = '✓ Upload complete';
            statusEl.className = 'text-success font-weight-bold';

            return { success: true };

        } catch (error) {
            progressEl.classList.remove(
                'progress-bar-animated', 'progress-bar-striped', 'bg-warning'
            );
            progressEl.classList.add('bg-danger');
            statusEl.textContent = '✗ ' + error.message;
            statusEl.className = 'text-danger';

            return { success: false, error: error.message };
        }
    }

    function updateBulkLabel(input) {
        var el = document.getElementById('csv-label-brochure-bulk');
        if (input.files && input.files.length > 0) {
            el.innerHTML = '<i class="fas fa-file-pdf mr-1" style="color:#dc3545"></i> '
                + input.files.length + ' file(s) selected';
        }
    }
</script>

@include('Partials.footer')