{{-- resources/views/pta/import.blade.php --}}
@extends('layouts.app')

@section('title', 'Import PTA')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6">

            <div class="d-flex align-items-center mb-4">
                <div class="me-3 p-3 rounded-3 bg-primary bg-opacity-10">
                    <i class="bi bi-file-earmark-arrow-up fs-3 text-primary"></i>
                </div>
                <div>
                    <h4 class="mb-0 fw-bold">Import du Plan de Travail Annuel</h4>
                    <small class="text-muted">Étape 1 sur 3 — Choisir le fichier</small>
                </div>
            </div>

            {{-- Indicateur d'étapes --}}
            <div class="d-flex align-items-center mb-4 gap-2">
                <span class="badge bg-primary rounded-pill px-3 py-2">1 Fichier</span>
                <div class="flex-grow-1 border-top border-2"></div>
                <span class="badge bg-light text-muted rounded-pill px-3 py-2">2 Aperçu</span>
                <div class="flex-grow-1 border-top border-2"></div>
                <span class="badge bg-light text-muted rounded-pill px-3 py-2">3 Confirmation</span>
                <div class="flex-grow-1 border-top border-2"></div>
                <span class="badge bg-light text-muted rounded-pill px-3 py-2">4 Résultat</span>
            </div>

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            @if(session('info'))
                <div class="alert alert-info alert-dismissible fade show">
                    <i class="bi bi-info-circle-fill me-2"></i>{{ session('info') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="card shadow-sm border-0">
                <div class="card-body p-4">
                    <form action="{{ route('pta.upload') }}" method="POST"
                          enctype="multipart/form-data" id="formImport">
                        @csrf

                        {{-- Année --}}
                        <div class="mb-4">
                            <label for="annee" class="form-label fw-semibold">
                                <i class="bi bi-calendar3 me-1 text-primary"></i>
                                Année de programmation <span class="text-danger">*</span>
                            </label>
                            <input type="number"
                                   class="form-control form-control-lg @error('annee') is-invalid @enderror"
                                   id="annee" name="annee"
                                   value="{{ old('annee', date('Y')) }}"
                                   min="2000" max="2100" required>
                            <div class="form-text">
                                Détermine l'année N pour les dates, prévisions et extrants.
                            </div>
                            @error('annee')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Zone upload --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-file-earmark-excel me-1 text-success"></i>
                                Fichier Excel PTA <span class="text-danger">*</span>
                            </label>

                            <input type="file" class="d-none" id="fichier" name="fichier"
                                   accept=".xlsx,.xls" required>

                            <label for="fichier" id="uploadZone"
                                   class="d-block border rounded-3 p-5 text-center w-100"
                                   style="border-style:dashed !important; cursor:pointer;
                                          border-color:#dee2e6; transition:all .25s;">
                                <i class="bi bi-cloud-upload fs-1 text-muted mb-2 d-block" id="uploadIcon"></i>
                                <p class="mb-1 fw-semibold fs-6" id="uploadText">
                                    Cliquez ou déposez votre fichier ici
                                </p>
                                <small class="text-muted">Formats : .xlsx, .xls — Max 20 Mo</small>
                            </label>

                            @error('fichier')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Format attendu --}}
                        <div class="alert alert-info border-0 bg-info bg-opacity-10 mb-4 small">
                            <strong><i class="bi bi-info-circle me-1"></i>Format du fichier :</strong>
                            Col A : Code &nbsp;|&nbsp; Col B : Libellé &nbsp;|&nbsp;
                            Col C : Extrant &nbsp;|&nbsp;
                            Col D : <code>Responsable / Partenaire1 ; Partenaire2</code> &nbsp;|&nbsp;
                            Col E–H : T1–T4 (<code>x</code>) &nbsp;|&nbsp;
                            Col I : Montant &nbsp;|&nbsp; Col J : Financement
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg" id="btnUpload">
                                <i class="bi bi-upload me-2"></i>Charger le fichier
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const zone      = document.getElementById('uploadZone');
const input     = document.getElementById('fichier');
const text      = document.getElementById('uploadText');
const icon      = document.getElementById('uploadIcon');

function setFile(name) {
    text.textContent      = name;
    icon.className        = 'bi bi-file-earmark-check fs-1 text-success mb-2 d-block';
    zone.style.borderColor     = '#198754';
    zone.style.backgroundColor = 'rgba(25,135,84,.06)';
}

input.addEventListener('change', function () {
    if (this.files.length) setFile(this.files[0].name);
});

['dragenter','dragover'].forEach(ev => zone.addEventListener(ev, e => {
    e.preventDefault(); e.stopPropagation();
    zone.style.borderColor     = '#0d6efd';
    zone.style.backgroundColor = 'rgba(13,110,253,.06)';
}));

zone.addEventListener('dragleave', e => {
    zone.style.borderColor = '#dee2e6';
    zone.style.backgroundColor = '';
});

zone.addEventListener('drop', e => {
    e.preventDefault(); e.stopPropagation();
    if (e.dataTransfer.files.length) {
        const dt = new DataTransfer();
        dt.items.add(e.dataTransfer.files[0]);
        input.files = dt.files;
        setFile(e.dataTransfer.files[0].name);
    }
});

document.getElementById('formImport').addEventListener('submit', function () {
    const btn = document.getElementById('btnUpload');
    btn.disabled  = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Chargement…';
});
</script>
@endpush