@extends('layouts.app')
@section('title', 'Dépenses')
@section('breadcrumb', 'Finance / Dépenses')
@section('content')

@php
    $moisLabels = ['01'=>'Janvier','02'=>'Février','03'=>'Mars','04'=>'Avril','05'=>'Mai','06'=>'Juin','07'=>'Juillet','08'=>'Août','09'=>'Septembre','10'=>'Octobre','11'=>'Novembre','12'=>'Décembre'];
    $anneeActuelle = date('Y');
@endphp

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-receipt" style="color:var(--danger)"></i> Dépenses</h1>
        <p class="page-subtitle">{{ $depenses->total() }} enregistrement(s)</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('depenses.export', request()->query()) }}" class="btn btn-info"><i class="fas fa-download"></i> Export CSV</a>
        <button type="button" class="btn btn-success"
            onclick="window.dispatchEvent(new CustomEvent('open-dep-modal', { detail: { mode: 'create' } }))">
            <i class="fas fa-plus"></i> Nouvelle dépense
        </button>
    </div>
</div>

{{-- FILTRES --}}
<div class="card" style="margin-bottom:16px;">
    <div class="card-body" style="padding:12px 16px;">
        <form method="GET" id="depFilterForm" style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
            <input type="hidden" name="date_from" id="depDateFrom" value="{{ request('date_from') }}">
            <input type="hidden" name="date_to"   id="depDateTo"   value="{{ request('date_to') }}">
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Libellé..." style="max-width:180px;">
            <select name="categorie_id" class="form-control" style="max-width:150px;">
                <option value="">Catégorie</option>
                @foreach($categories as $c)
                    <option value="{{ $c->id }}" {{ request('categorie_id') == $c->id ? 'selected' : '' }}>{{ $c->label }}</option>
                @endforeach
            </select>
            <select name="chantier_id" class="form-control" style="max-width:160px;">
                <option value="">Tous chantiers</option>
                @foreach($chantiers as $ch)
                    <option value="{{ $ch->id }}" {{ request('chantier_id') == $ch->id ? 'selected' : '' }}>{{ $ch->nom }}</option>
                @endforeach
            </select>
            <select id="depMoisSel" class="form-control" style="max-width:130px;" onchange="applyDepMois(this)">
                <option value="">Mois...</option>
                @foreach($moisLabels as $m => $label)
                    <option value="{{ $m }}" {{ request('date_from') && substr(request('date_from'),5,2) === $m ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            <input type="number" id="depAnneeSel" class="form-control" placeholder="Année" min="2000" max="2099"
                value="{{ request('date_from') ? substr(request('date_from'),0,4) : $anneeActuelle }}"
                style="max-width:90px;" onchange="applyDepMois(document.getElementById('depMoisSel'))">
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
            <a href="{{ route('depenses.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
        </form>
    </div>
</div>

{{-- TABLE --}}
<div class="card">
    <div class="table-wrap">
        <table class="table">
            <thead>
                <tr>
                    <th>Numéro</th>
                    <th>Date</th>
                    <th>Libellé</th>
                    <th>Catégorie</th>
                    <th>Chantier</th>
                    <th>Montant HT</th>
                    <th>TVA</th>
                    <th>Montant TTC</th>
                    <th>Justificatif</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($depenses as $d)
                <tr>
                    <td><code>{{ $d->numero }}</code></td>
                    <td>{{ $d->date->format('d/m/Y') }}</td>
                    <td>{{ $d->libelle }}</td>
                    <td>{{ $d->categorie?->label ?? '-' }}</td>
                    <td>{{ $d->chantier?->nom ?? '-' }}</td>
                    <td>{{ number_format($d->montant_ht, 3, ',', ' ') }}</td>
                    <td>{{ number_format($d->tva, 3, ',', ' ') }}</td>
                    <td><strong>{{ number_format($d->montant_ttc, 3, ',', ' ') }}</strong></td>
                    <td>
                        @if($d->document)
                            <a href="{{ asset('storage/' . $d->document) }}" target="_blank" class="action-btn" title="Voir justificatif" style="color:var(--primary);">
                                <i class="fas fa-paperclip"></i>
                            </a>
                        @else
                            <span style="color:var(--text-muted);font-size:12px;">—</span>
                        @endif
                    </td>
                    <td>
                        <div class="table-actions">
                            <button type="button" class="action-btn" title="Modifier"
                                onclick="window.dispatchEvent(new CustomEvent('open-dep-modal', { detail: { mode: 'edit', id: {{ $d->id }}, url: '{{ route('depenses.update', $d) }}' } }))">
                                <i class="fas fa-pen"></i>
                            </button>
                            <button type="button" class="action-btn danger" title="Supprimer"
                                onclick="window.dispatchEvent(new CustomEvent('open-dep-delete', { detail: { id: {{ $d->id }}, libelle: '{{ addslashes($d->libelle) }}', url: '{{ route('depenses.destroy', $d) }}' } }))">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="10" class="empty-state">Aucune dépense</td></tr>
            @endforelse
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="7" style="text-align:right;font-weight:600;">Total TTC :</td>
                    <td colspan="3"><strong>{{ number_format($totalTtc, 3, ',', ' ') }} TND</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>
    @if($depenses->hasPages())
        <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $depenses->links() }}</div>
    @endif
</div>

{{-- ══════════════════════════════════════════════════════════
     MODAL CRÉER / MODIFIER DÉPENSE
     ══════════════════════════════════════════════════════════ --}}
<div x-data="depenseModal()" @open-dep-modal.window="open($event.detail)" @open-dep-delete.window="openDelete($event.detail)">

    {{-- Overlay create/edit --}}
    <div class="modal-overlay" :class="{ open: show }" @click="close()"></div>

    {{-- Modal create / edit --}}
    <div class="modal modal-sm" :class="{ open: show }">
        <div class="modal-header">
            <h3><i class="fas fa-receipt" style="color:var(--danger)"></i> <span x-text="isEdit ? 'Modifier la dépense' : 'Nouvelle dépense'"></span></h3>
            <button class="modal-close" @click="close()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div x-show="errMsg" class="alert alert-danger" x-text="errMsg" style="margin-bottom:12px;"></div>

            <div class="form-group">
                <label class="form-label">Libellé <span style="color:var(--danger)">*</span></label>
                <input type="text" class="form-control" x-model="libelle" :class="{ 'is-invalid': errors.libelle }">
                <span class="invalid-feedback" x-text="errors.libelle?.[0]"></span>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div class="form-group">
                    <label class="form-label">Date <span style="color:var(--danger)">*</span></label>
                    <input type="date" class="form-control" x-model="date" :class="{ 'is-invalid': errors.date }">
                </div>
                <div class="form-group">
                    <label class="form-label">Catégorie</label>
                    <select class="form-control" x-model="categorieId">
                        <option value="">— aucune —</option>
                        @foreach($categories as $c)
                            <option value="{{ $c->id }}">{{ $c->label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
                <div class="form-group">
                    <label class="form-label">Montant HT <span style="color:var(--danger)">*</span></label>
                    <input type="number" step="0.001" min="0" class="form-control" x-model="montantHt"
                        @input="calcTtc()" :class="{ 'is-invalid': errors.montant_ht }">
                </div>
                <div class="form-group">
                    <label class="form-label">TVA</label>
                    <select class="form-control" x-model="tvaTaux" @change="calcTtc()">
                        <option value="0">0 %</option>
                        @foreach($tvaList as $tv)
                            <option value="{{ $tv->taux }}">{{ $tv->taux }} %</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Montant TTC</label>
                    <input type="text" class="form-control" :value="fmtTtc" readonly style="background:var(--bg-sidebar);font-weight:600;">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div class="form-group">
                    <label class="form-label">Fournisseur</label>
                    <select class="form-control" x-model="fournisseurId">
                        <option value="">— aucun —</option>
                        @foreach($fournisseurs as $f)
                            <option value="{{ $f->id }}">{{ $f->nom }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Chantier</label>
                    <select class="form-control" x-model="chantierId">
                        <option value="">— aucun —</option>
                        @foreach($chantiers as $ch)
                            <option value="{{ $ch->id }}">{{ $ch->nom }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Justificatif</label>
                <input type="file" class="form-control" id="depFileInput" accept=".pdf,.jpg,.jpeg,.png">
                <template x-if="existingDocUrl">
                    <p style="margin-top:4px;font-size:12px;">
                        <a :href="existingDocUrl" target="_blank" style="color:var(--primary);"><i class="fas fa-paperclip"></i> Voir le fichier existant</a>
                    </p>
                </template>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" @click="close()" class="btn btn-secondary">Annuler</button>
            <button type="button" @click="submitForm()" class="btn btn-success" :disabled="loading">
                <span x-show="loading"><i class="fas fa-spinner fa-spin"></i></span>
                <span x-show="!loading" x-text="isEdit ? 'Enregistrer' : 'Créer'"></span>
            </button>
        </div>
    </div>

    {{-- Overlay delete --}}
    <div class="modal-overlay" :class="{ open: showDelete }" @click="closeDelete()"></div>

    {{-- Modal suppression --}}
    <div class="modal modal-sm" :class="{ open: showDelete }">
        <div class="modal-header">
            <h3><i class="fas fa-trash" style="color:var(--danger)"></i> Supprimer la dépense</h3>
            <button class="modal-close" @click="closeDelete()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <p>Supprimer <strong x-text="deleteLibelle"></strong> ?</p>
            <p style="color:var(--danger);font-size:13px;">Cette action est irréversible.</p>
        </div>
        <div class="modal-footer">
            <button type="button" @click="closeDelete()" class="btn btn-secondary">Annuler</button>
            <form method="POST" :action="deleteUrl" style="display:inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i> Supprimer</button>
            </form>
        </div>
    </div>
</div>

<script>
function applyDepMois(sel) {
    const mois  = document.getElementById('depMoisSel').value;
    const annee = document.getElementById('depAnneeSel').value || new Date().getFullYear();
    if (!mois) return;
    const lastDay = new Date(annee, parseInt(mois), 0).getDate();
    document.getElementById('depDateFrom').value = annee + '-' + mois + '-01';
    document.getElementById('depDateTo').value   = annee + '-' + mois + '-' + String(lastDay).padStart(2, '0');
    document.getElementById('depFilterForm').submit();
}

function depenseModal() {
    return {
        // create/edit state
        show: false,
        isEdit: false,
        loading: false,
        errMsg: '',
        errors: {},
        formUrl: '',
        // fields
        libelle: '',
        date: '{{ date('Y-m-d') }}',
        categorieId: '',
        fournisseurId: '',
        chantierId: '',
        montantHt: '',
        tvaTaux: '0',
        tvaAmount: 0,
        montantTtc: 0,
        existingDocUrl: null,
        // delete state
        showDelete: false,
        deleteUrl: '',
        deleteLibelle: '',

        get fmtTtc() {
            return this.montantTtc ? parseFloat(this.montantTtc).toLocaleString('fr-FR', { minimumFractionDigits: 3, maximumFractionDigits: 3 }) : '0,000';
        },

        calcTtc() {
            const ht   = parseFloat(this.montantHt) || 0;
            const taux = parseFloat(this.tvaTaux) || 0;
            this.tvaAmount  = Math.round(ht * taux / 100 * 1000) / 1000;
            this.montantTtc = Math.round((ht + this.tvaAmount) * 1000) / 1000;
        },

        open(d) {
            this.errors = {};
            this.errMsg = '';
            this.existingDocUrl = null;
            document.getElementById('depFileInput').value = '';

            if (d.mode === 'create') {
                this.isEdit       = false;
                this.formUrl      = '{{ route('depenses.store') }}';
                this.libelle      = '';
                this.date         = '{{ date('Y-m-d') }}';
                this.categorieId  = '';
                this.fournisseurId = '';
                this.chantierId   = '';
                this.montantHt    = '';
                this.tvaTaux      = '0';
                this.tvaAmount    = 0;
                this.montantTtc   = 0;
                this.show = true;
            } else {
                this.isEdit  = true;
                this.formUrl = d.url;
                this.loading = true;
                this.show    = true;
                fetch('/depenses/' + d.id + '/json-data', { headers: { 'Accept': 'application/json' } })
                    .then(r => r.json())
                    .then(data => {
                        this.libelle       = data.libelle;
                        this.date          = data.date;
                        this.categorieId   = data.categorie_id ? String(data.categorie_id) : '';
                        this.fournisseurId = data.fournisseur_id ? String(data.fournisseur_id) : '';
                        this.chantierId    = data.chantier_id ? String(data.chantier_id) : '';
                        this.montantHt     = data.montant_ht;
                        this.montantTtc    = data.montant_ttc;
                        this.tvaAmount     = data.tva;
                        // reverse-compute taux from stored tva amount
                        const ht = parseFloat(data.montant_ht) || 0;
                        if (ht > 0) {
                            const computedTaux = Math.round(data.tva / ht * 100 * 100) / 100;
                            this.tvaTaux = String(computedTaux);
                        } else {
                            this.tvaTaux = '0';
                        }
                        this.existingDocUrl = data.document_url;
                        this.loading = false;
                    });
            }
        },

        close() {
            this.show = false;
        },

        openDelete(d) {
            this.deleteUrl     = d.url;
            this.deleteLibelle = d.libelle;
            this.showDelete    = true;
        },

        closeDelete() {
            this.showDelete = false;
        },

        async submitForm() {
            this.loading = true;
            this.errors  = {};
            this.errMsg  = '';

            const fd = new FormData();
            fd.append('_token', '{{ csrf_token() }}');
            if (this.isEdit) fd.append('_method', 'PUT');
            fd.append('libelle',        this.libelle);
            fd.append('date',           this.date);
            fd.append('categorie_id',   this.categorieId);
            fd.append('fournisseur_id', this.fournisseurId);
            fd.append('chantier_id',    this.chantierId);
            fd.append('montant_ht',     this.montantHt);
            fd.append('tva',            this.tvaAmount);

            const fileInput = document.getElementById('depFileInput');
            if (fileInput.files.length > 0) {
                fd.append('document', fileInput.files[0]);
            }

            try {
                const r = await fetch(this.formUrl, {
                    method: 'POST',
                    body: fd,
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                });
                const data = await r.json();
                if (r.ok && data.success) {
                    this.close();
                    window.location.reload();
                } else if (data.errors) {
                    this.errors = data.errors;
                    this.errMsg = data.message || 'Erreur de validation.';
                } else {
                    this.errMsg = data.message || 'Une erreur est survenue.';
                }
            } catch (e) {
                this.errMsg = 'Erreur réseau.';
            }
            this.loading = false;
        }
    };
}
</script>

@endsection