@extends('layouts.master')
@section('title') Formations @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Administration @endslot
@slot('title') Formations @endslot
@endcomponent

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center flex-wrap gap-2">
                <h5 class="card-title mb-0 flex-grow-1">JCF Formation</h5>
                <span class="badge bg-primary-subtle text-primary">{{ $counts['portfolio'] }} Portfolios</span>
                <span class="badge bg-info-subtle text-info">{{ $counts['area'] }} Branches</span>
                <span class="badge bg-secondary-subtle text-secondary">{{ $counts['division'] }} Divisions</span>
                <span class="badge bg-success-subtle text-success">{{ $counts['station'] }} Stations</span>
                <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target="#importModal"><i class="ri-upload-2-line align-bottom me-1"></i> Import CSV</button>
                <a href="{{ route('admin.formations.create') }}" class="btn btn-primary btn-sm"><i class="ri-add-line align-bottom me-1"></i> New Node</a>
            </div>
            <div class="card-body">
                <p class="text-muted mb-3">Portfolio → Area / Branch → Division → Station. Persons are placed on a <strong>Station</strong> node. Add a child with the buttons on each row, or edit/move any node.</p>

                <form method="GET" class="row g-2 mb-3">
                    <div class="col-md-3">
                        <select name="level" class="form-select" onchange="this.form.submit()">
                            <option value="">Tree view (all levels)</option>
                            @foreach(\App\Models\Formation::LEVELS as $key => $label)
                                <option value="{{ $key }}" @selected($filters['level'] === $key)>{{ $label }} only</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="parent" class="form-select" onchange="this.form.submit()">
                            <option value="">Any portfolio</option>
                            @foreach($portfolios as $p)
                                <option value="{{ $p->id }}" @selected((string) $filters['parent'] === (string) $p->id)>{{ $p->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="q" class="form-control" placeholder="Search name…" value="{{ $filters['q'] }}">
                    </div>
                    <div class="col-md-2 d-flex gap-2">
                        <button class="btn btn-soft-primary flex-grow-1">Filter</button>
                        <a href="{{ route('admin.formations.index') }}" class="btn btn-light">Reset</a>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        @if($filtering)
                        {{-- Flat filtered results --}}
                        <thead class="table-light"><tr><th>Name</th><th>Level</th><th>Path</th><th class="text-center">People</th><th class="text-end">Actions</th></tr></thead>
                        <tbody>
                            @forelse($formations as $f)
                            <tr>
                                <td class="fw-medium">{{ $f->name }}</td>
                                <td><span class="badge bg-secondary-subtle text-secondary">{{ $f->level_label }}</span></td>
                                <td><small class="text-muted">{{ $f->parent ? $f->parent->path : '—' }}</small></td>
                                <td class="text-center">{{ $f->users_count }}</td>
                                <td class="text-end">
                                    <a href="{{ route('admin.formations.edit', $f) }}" class="btn btn-sm btn-soft-primary">Edit</a>
                                    <form method="POST" action="{{ route('admin.formations.toggle', $f) }}" class="d-inline">@csrf
                                        <button class="btn btn-sm btn-soft-{{ $f->is_active ? 'danger' : 'success' }}">{{ $f->is_active ? 'Deactivate' : 'Activate' }}</button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted py-4">No formation nodes match.</td></tr>
                            @endforelse
                        </tbody>
                        @else
                        {{-- Full nested tree --}}
                        <thead class="table-light"><tr><th>Formation node</th><th class="text-end">Actions</th></tr></thead>
                        <tbody>
                            @forelse($byParent[''] ?? ($byParent[null] ?? collect()) as $root)
                                @include('admin.formations._node', ['node' => $root, 'byParent' => $byParent, 'depth' => 0])
                            @empty
                            <tr><td colspan="2" class="text-center text-muted py-4">No formation nodes yet.</td></tr>
                            @endforelse
                        </tbody>
                        @endif
                    </table>
                </div>
                @if($filtering)<div class="mt-3">{{ $formations->links('pagination::bootstrap-5') }}</div>@endif
            </div>
        </div>
    </div>
</div>

<!-- Import CSV modal -->
<div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('admin.formations.import') }}" enctype="multipart/form-data" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Import Formation from CSV</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-2">Export your JCF Formation Listing spreadsheet to <strong>CSV</strong> and upload it. Expected columns (a <em>Country</em> column is ignored):</p>
                <code class="d-block bg-light p-2 rounded small mb-3">Portfolio, Area/Branch, Division/Formation, Zone/Region/Location, Station, Unit</code>
                <div class="mb-3">
                    <label class="form-label">CSV file <span class="text-danger">*</span></label>
                    <input type="file" name="csv" class="form-control @error('csv') is-invalid @enderror" accept=".csv,text/csv" required>
                    @error('csv')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="truncate" value="1" id="truncate">
                    <label class="form-check-label text-danger" for="truncate">Replace the existing formation (delete all current nodes first)</label>
                </div>
                <p class="text-muted small mt-2 mb-0">Without replace, the import is additive and safe to re-run (existing nodes are matched, not duplicated).</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Import</button>
            </div>
        </form>
    </div>
</div>
@endsection