@extends('layouts.app', ['title' => term('nav_formateria', 'Formatería')])

@section('header_actions')
<button class="btn btn-ghost" type="button" data-modal-open="modal-fmt-folder"><i class="fa-solid fa-folder-plus"></i><span class="hide-sm">Nueva carpeta</span></button>
<button class="btn btn-primary" type="button" data-modal-open="modal-fmt-upload"><i class="fa-solid fa-cloud-arrow-up"></i> Subir archivos</button>
@endsection

@push('styles')
<style>
.fmt-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.fmt-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.fmt-crumbs a{color:var(--muted);text-decoration:none;padding:3px 6px;border-radius:8px}
.fmt-crumbs a:hover{background:rgba(201,168,76,.12);color:var(--gold-dark)}
.fmt-crumbs .sep{color:var(--soft)}
.fmt-crumbs .cur{font-weight:700;color:var(--text)}
.fmt-meta{font-size:12px;color:var(--muted)}
.fmt-selbar{display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid rgba(229,72,77,.32);background:rgba(229,72,77,.07);border-radius:12px;margin-bottom:14px}
.fmt-selbar.show{display:flex}
.fmt-selbar strong{color:var(--danger)}
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.fmt-card{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .12s}
.fmt-card:hover{border-color:rgba(201,168,76,.45);box-shadow:0 14px 30px -20px rgba(15,23,42,.5)}
.fmt-card.selected{border-color:var(--danger);box-shadow:0 0 0 2px rgba(229,72,77,.25)}
.fmt-thumb{height:118px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(201,168,76,.06),rgba(15,23,42,.03));position:relative}
.fmt-thumb i{font-size:44px}
.fmt-thumb img{width:100%;height:100%;object-fit:cover}
.fmt-folder .fmt-thumb i{color:var(--gold)}
.ico-pdf{color:#e5484d}.ico-word{color:#2b6cb0}.ico-excel{color:#1f9d55}.ico-ppt{color:#dd6b20}.ico-zip{color:#8b5cf6}.ico-file{color:var(--muted)}
.fmt-body{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:3px}
.fmt-name{font-size:13px;font-weight:650;line-height:1.25;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fmt-name a{color:var(--text);text-decoration:none}.fmt-name a:hover{color:var(--gold-dark)}
.fmt-sub{font-size:11px;color:var(--muted)}
.fmt-actions{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line);background:rgba(0,0,0,.015)}
.fmt-actions .btn{flex:1;justify-content:center;padding:6px 4px;font-size:11.5px}
.fmt-check{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-strong);background:#fff;display:grid;place-items:center;cursor:pointer;z-index:3;color:#fff}
.fmt-check input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.fmt-check i{font-size:12px;opacity:0;transition:opacity .1s}
.fmt-card.selected .fmt-check{background:var(--danger);border-color:var(--danger)}
.fmt-card.selected .fmt-check i{opacity:1}
.fmt-open{position:absolute;inset:0 0 56px 0;cursor:pointer;z-index:1}
.fmt-empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--muted)}
.fmt-empty i{font-size:46px;color:var(--gold);opacity:.5;display:block;margin-bottom:12px}
@media(max-width:600px){.fmt-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
</style>
@endpush

@section('content')
<div class="fmt-bar">
    <div class="fmt-crumbs">
        <a href="{{ route('formateria.index') }}"><i class="fa-solid fa-cloud"></i> Formatería</a>
        @foreach($breadcrumb as $i => $c)
            <span class="sep">/</span>
            @if($i === count($breadcrumb) - 1)
                <span class="cur">{{ $c['name'] }}</span>
            @else
                <a href="{{ route('formateria.index', ['folder' => $c['id']]) }}">{{ $c['name'] }}</a>
            @endif
        @endforeach
    </div>
    <div class="fmt-meta">{{ $folderCount }} carpeta(s) · {{ $fileCount }} archivo(s)</div>
</div>

<div class="fmt-selbar" id="fmt-selbar">
    <div><strong id="fmt-selcount">0</strong> seleccionado(s)</div>
    <div style="display:flex;gap:8px">
        <button class="btn btn-ghost btn-sm" type="button" id="fmt-cancel"><i class="fa-solid fa-xmark"></i> Cancelar</button>
        <button class="btn btn-danger btn-sm" type="button" id="fmt-delete"><i class="fa-solid fa-trash-can"></i> Eliminar seleccionados</button>
    </div>
</div>

<form method="post" action="{{ route('formateria.destroy') }}" id="fmt-delete-form" style="display:none">@csrf @method('DELETE')</form>

<div class="fmt-grid">
    @forelse($items as $item)
        @if($item->isFolder())
            <div class="fmt-card fmt-folder" data-id="{{ $item->id }}" data-name="{{ $item->name }}">
                <label class="fmt-check" title="Seleccionar"><input type="checkbox" class="fmt-cb" value="{{ $item->id }}"><i class="fa-solid fa-check"></i></label>
                <a class="fmt-open" href="{{ route('formateria.index', ['folder' => $item->id]) }}" aria-label="Abrir carpeta"></a>
                <div class="fmt-thumb"><i class="fa-solid fa-folder"></i></div>
                <div class="fmt-body">
                    <div class="fmt-name"><a href="{{ route('formateria.index', ['folder' => $item->id]) }}">{{ $item->name }}</a></div>
                    <div class="fmt-sub">Carpeta</div>
                </div>
                <div class="fmt-actions">
                    <a class="btn btn-ghost btn-sm" href="{{ route('formateria.index', ['folder' => $item->id]) }}"><i class="fa-solid fa-folder-open"></i> Abrir</a>
                </div>
            </div>
        @else
            <div class="fmt-card fmt-file" data-id="{{ $item->id }}" data-name="{{ $item->name }}">
                <label class="fmt-check" title="Seleccionar"><input type="checkbox" class="fmt-cb" value="{{ $item->id }}"><i class="fa-solid fa-check"></i></label>
                <div class="fmt-thumb">
                    @if($item->file_kind === 'image')
                        <img src="{{ route('formateria.file', $item) }}" alt="{{ $item->name }}" loading="lazy">
                    @elseif($item->file_kind === 'pdf')
                        <i class="fa-solid fa-file-pdf ico-pdf"></i>
                    @elseif($item->file_kind === 'word')
                        <i class="fa-solid fa-file-word ico-word"></i>
                    @elseif($item->file_kind === 'excel')
                        <i class="fa-solid fa-file-excel ico-excel"></i>
                    @elseif($item->file_kind === 'ppt')
                        <i class="fa-solid fa-file-powerpoint ico-ppt"></i>
                    @elseif($item->file_kind === 'zip')
                        <i class="fa-solid fa-file-zipper ico-zip"></i>
                    @else
                        <i class="fa-solid fa-file-lines ico-file"></i>
                    @endif
                </div>
                <div class="fmt-body">
                    <div class="fmt-name" title="{{ $item->name }}">{{ $item->name }}</div>
                    <div class="fmt-sub">{{ strtoupper($item->ext) ?: 'Archivo' }} · {{ $item->size_human }}</div>
                </div>
                <div class="fmt-actions">
                    <a class="btn btn-ghost btn-sm" href="{{ route('formateria.file', $item) }}" target="_blank" rel="noopener" data-tip="Ver"><i class="fa-solid fa-eye"></i></a>
                    <button class="btn btn-ghost btn-sm" type="button" data-fmt-print="{{ route('formateria.file', $item) }}" data-image="{{ $item->file_kind === 'image' ? 1 : 0 }}" data-tip="Imprimir"><i class="fa-solid fa-print"></i></button>
                    <a class="btn btn-ghost btn-sm" href="{{ route('formateria.file.download', $item) }}" data-tip="Descargar"><i class="fa-solid fa-download"></i></a>
                </div>
            </div>
        @endif
    @empty
        <div class="fmt-empty">
            <i class="fa-solid fa-cloud-arrow-up"></i>
            <div class="card-title">Esta carpeta está vacía</div>
            <div class="sub">Sube documentos o crea una carpeta para organizarlos.</div>
        </div>
    @endforelse
</div>

{{-- Modal: nueva carpeta --}}
<div class="modal-backdrop" id="modal-fmt-folder"><div class="modal narrow"><div class="modal-head"><h3><i class="fa-solid fa-folder-plus text-gold"></i> Nueva carpeta</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
<form method="post" action="{{ route('formateria.folders.store') }}"><div class="modal-body">@csrf
    <input type="hidden" name="parent_id" value="{{ $folder->id ?? '' }}">
    <label>Nombre de la carpeta *<input name="name" maxlength="160" required placeholder="Ej. Contratos firmados" autofocus></label>
</div><div class="modal-foot"><button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button><button class="btn btn-primary" type="submit"><i class="fa-solid fa-folder-plus"></i> Crear carpeta</button></div></form></div></div>

{{-- Modal: subir archivos --}}
<div class="modal-backdrop" id="modal-fmt-upload"><div class="modal narrow"><div class="modal-head"><h3><i class="fa-solid fa-cloud-arrow-up text-gold"></i> Subir archivos</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
<form method="post" action="{{ route('formateria.upload') }}" enctype="multipart/form-data"><div class="modal-body">@csrf
    <input type="hidden" name="parent_id" value="{{ $folder->id ?? '' }}">
    <label>Archivos *<input name="files[]" type="file" multiple required><span class="sub">Puedes seleccionar varios. Máximo 50 MB por archivo.</span></label>
    @if($folder)<div class="sub" style="margin-top:8px">Se subirán a la carpeta <strong>{{ $folder->name }}</strong>.</div>@endif
</div><div class="modal-foot"><button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button><button class="btn btn-primary" type="submit"><i class="fa-solid fa-cloud-arrow-up"></i> Subir</button></div></form></div></div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const selbar = document.getElementById('fmt-selbar');
    const count = document.getElementById('fmt-selcount');
    const form = document.getElementById('fmt-delete-form');

    function selected() {
        return Array.from(document.querySelectorAll('.fmt-cb:checked'));
    }
    function refresh() {
        const sel = selected();
        count.textContent = sel.length;
        selbar.classList.toggle('show', sel.length > 0);
    }

    document.querySelectorAll('.fmt-cb').forEach(function (cb) {
        cb.addEventListener('change', function () {
            cb.closest('.fmt-card').classList.toggle('selected', cb.checked);
            refresh();
        });
    });

    document.getElementById('fmt-cancel').addEventListener('click', function () {
        document.querySelectorAll('.fmt-cb:checked').forEach(function (cb) {
            cb.checked = false;
            cb.closest('.fmt-card').classList.remove('selected');
        });
        refresh();
    });

    document.getElementById('fmt-delete').addEventListener('click', function () {
        const sel = selected();
        if (!sel.length) return;
        if (!confirm('¿Eliminar ' + sel.length + ' elemento(s) seleccionado(s)? Las carpetas se eliminan con todo su contenido. Esta acción no se puede deshacer.')) return;
        sel.forEach(function (cb) {
            const inp = document.createElement('input');
            inp.type = 'hidden'; inp.name = 'ids[]'; inp.value = cb.value;
            form.appendChild(inp);
        });
        form.submit();
    });

    // Imprimir: imágenes en ventana propia; PDF/otros abren su visor (Ctrl+P).
    document.querySelectorAll('[data-fmt-print]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const url = btn.dataset.fmtPrint;
            const isImg = btn.dataset.image === '1';
            if (isImg) {
                const w = window.open('', '_blank');
                if (!w) { window.open(url, '_blank'); return; }
                w.document.write('<html><head><title>Imprimir</title><style>html,body{margin:0}img{max-width:100%;display:block;margin:0 auto}</style></head><body><img src="' + url + '" onload="window.focus();window.print();"></body></html>');
                w.document.close();
            } else {
                const w = window.open(url, '_blank');
                if (w) { try { w.addEventListener('load', function () { w.focus(); w.print(); }); } catch (e) {} }
            }
        });
    });
});
</script>
@endpush