@extends('layouts.app')
@section('title', 'Chantiers')
@section('breadcrumb', 'Opérations / Chantiers')

@php
$oldFormData = [
    'form_mode'  => old('_form_mode',  'create'),
    'id'         => old('_chantier_id',''),
    'nom'        => old('nom',         ''),
    'code'       => old('code',        ''),
    'client_id'  => old('client_id',   ''),
    'statut'     => old('statut',      'demarrage'),
    'budget'     => old('budget',      '0'),
    'date_debut' => old('date_debut',  ''),
    'date_fin'   => old('date_fin',    ''),
    'notes'      => old('notes',       ''),
];
@endphp

@section('content')

<div
    x-data="{
        showForm: false,
        showPreview: false,
        showStatutModal: false,
        newStatut: '',
        previewUrl: '',
        previewCh: {nom:'', code:'', id:'', statut:''},
        formMode: 'create',
        ch: {id:'', nom:'', code:'', client_id:'', statut:'demarrage', budget:'0', date_debut:'', date_fin:'', notes:''},

        openCreate() {
            this.formMode = 'create';
            this.ch = {id:'', nom:'', code:'', client_id:'', statut:'demarrage', budget:'0', date_debut:'', date_fin:'', notes:''};
            this.showForm = true;
        },
        openEdit(data) {
            this.formMode = 'edit';
            this.ch = data;
            this.showForm = true;
        },
        openPreview(url, data) {
            this.previewUrl = url;
            this.previewCh = data;
            this.showPreview = true;
        },
        closePreview() {
            this.showPreview = false;
            this.previewUrl = '';
        },
        openStatutModal() {
            this.newStatut = this.previewCh.statut;
            this.showStatutModal = true;
        }
    }"
    x-init='
        $watch("showForm",       v => document.body.style.overflow = (v || showPreview || showStatutModal) ? "hidden" : "");
        $watch("showPreview",    v => document.body.style.overflow = (v || showForm    || showStatutModal) ? "hidden" : "");
        $watch("showStatutModal",v => document.body.style.overflow = (v || showForm    || showPreview)     ? "hidden" : "");
        @if($errors->isNotEmpty())
        (function() {
            var d = @json($oldFormData);
            formMode = d.form_mode;
            ch = {id:d.id, nom:d.nom, code:d.code, client_id:d.client_id, statut:d.statut, budget:d.budget, date_debut:d.date_debut, date_fin:d.date_fin, notes:d.notes};
            showForm = true;
        })();
        @endif
    '
>

{{-- ── PAGE HEADER ──────────────────────────────────────────── --}}
<div class="page-header">
    <div><h1 class="page-title"><i class="fas fa-hard-hat" style="color:var(--warning)"></i> Chantiers</h1></div>
    <button type="button" @click="openCreate()" class="btn btn-primary">
        <i class="fas fa-plus"></i> Nouveau chantier
    </button>
</div>

{{-- ── STATS ────────────────────────────────────────────────── --}}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon orange"><i class="fas fa-hard-hat"></i></div>
        <div><div class="stat-value">{{ $stats['en_cours'] }}</div><div class="stat-label">En cours</div></div>
    </div>
    <div class="stat-card">
        <div class="stat-icon green"><i class="fas fa-check-circle"></i></div>
        <div><div class="stat-value">{{ $stats['cloture'] }}</div><div class="stat-label">Clôturés</div></div>
    </div>
    <div class="stat-card">
        <div class="stat-icon cyan"><i class="fas fa-wrench"></i></div>
        <div><div class="stat-value">{{ $stats['sav'] }}</div><div class="stat-label">SAV / Maintenance</div></div>
    </div>
    <div class="stat-card">
        <div class="stat-icon purple"><i class="fas fa-pause-circle"></i></div>
        <div><div class="stat-value">{{ $stats['pause'] }}</div><div class="stat-label">En pause</div></div>
    </div>
</div>

{{-- ── FILTRES ──────────────────────────────────────────────── --}}
<div class="card" style="margin-bottom:16px;"><div class="card-body" style="padding:12px 16px;">
    <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Nom du chantier..." style="max-width:220px;">
        <select name="statut" class="form-control" style="max-width:140px;">
            <option value="">Tous statuts</option>
            @foreach(['demarrage'=>'Démarrage','en_cours'=>'En cours','pause'=>'Pause','cloture'=>'Clôturé','sav'=>'SAV'] as $s=>$l)
                <option value="{{ $s }}" {{ request('statut')===$s?'selected':'' }}>{{ $l }}</option>
            @endforeach
        </select>
        <select name="client_id" class="form-control" style="max-width:180px;">
            <option value="">Tous les clients</option>
            @foreach($clients as $c)
                <option value="{{ $c->id }}" {{ request('client_id') == $c->id ? 'selected' : '' }}>{{ $c->nom }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
        <a href="{{ route('chantiers.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
    </form>
</div></div>

{{-- ── TABLEAU ──────────────────────────────────────────────── --}}
<div class="card">
    <div class="table-wrap">
        <table class="table">
            <thead>
                <tr>
                    <th>Code</th><th>Nom</th><th>Client</th><th>Statut</th>
                    <th>Budget</th><th>Début</th><th>Fin</th><th>Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($chantiers as $ch)
                @php
                    $sc = ['demarrage'=>'badge-info','en_cours'=>'badge-success','pause'=>'badge-warning','cloture'=>'badge-muted','sav'=>'badge-danger'];
                    $chData = [
                        'id'         => $ch->id,
                        'nom'        => $ch->nom,
                        'code'       => $ch->code ?? '',
                        'client_id'  => (string)($ch->client_id ?? ''),
                        'statut'     => $ch->statut,
                        'budget'     => (string)$ch->budget,
                        'date_debut' => $ch->date_debut?->format('Y-m-d') ?? '',
                        'date_fin'   => $ch->date_fin?->format('Y-m-d') ?? '',
                        'notes'      => $ch->notes ?? '',
                    ];
                @endphp
                <tr>
                    <td><code>{{ $ch->code }}</code></td>
                    <td>
                        <a href="javascript:void(0)" style="color:var(--primary);font-weight:500;"
                           @click='openPreview("{{ route('chantiers.show', $ch) }}?bare=1", @json($chData))'>
                            {{ $ch->nom }}
                        </a>
                    </td>
                    <td>{{ $ch->client?->nom ?? '-' }}</td>
                    <td><span class="badge-pill {{ $sc[$ch->statut]??'badge-info' }}">{{ ucfirst(str_replace('_',' ',$ch->statut)) }}</span></td>
                    <td>{{ number_format($ch->budget,3,',',' ') }}</td>
                    <td>{{ $ch->date_debut?->format('d/m/Y') ?? '-' }}</td>
                    <td>{{ $ch->date_fin?->format('d/m/Y') ?? '-' }}</td>
                    <td>
                        <div class="table-actions">
                            <button type="button" class="action-btn" title="Consulter"
                                @click='openPreview("{{ route('chantiers.show', $ch) }}?bare=1", @json($chData))'>
                                <i class="fas fa-eye"></i>
                            </button>
                            <button type="button" class="action-btn" title="Modifier"
                                @click='openEdit(@json($chData))'>
                                <i class="fas fa-pen"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="empty-state">Aucun chantier</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($chantiers->hasPages())
        <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $chantiers->links() }}</div>
    @endif
</div>

{{-- ══════════════════════════════════════════════════════════
     OVERLAY
══════════════════════════════════════════════════════════ --}}
<div class="modal-overlay" :class="{ 'open': showForm || showPreview || showStatutModal }"></div>

{{-- ══════════════════════════════════════════════════════════
     MODAL FORMULAIRE : NOUVEAU / MODIFIER
══════════════════════════════════════════════════════════ --}}
<div class="modal" :class="{ 'open': showForm }" x-cloak>

    <div class="modal-header">
        <h3>
            <i class="fas fa-hard-hat" style="color:var(--warning);"></i>
            <span x-text="formMode === 'create' ? 'Nouveau chantier' : 'Modifier : ' + ch.nom"></span>
        </h3>
        <button type="button" class="modal-close" @click="showForm = false" title="Fermer">
            <i class="fas fa-xmark"></i>
        </button>
    </div>

    <div class="modal-body">

        @if($errors->isNotEmpty())
        <div class="alert alert-danger" style="margin-bottom:16px;">
            @foreach($errors->all() as $e)
                <div><i class="fas fa-exclamation-circle"></i> {{ $e }}</div>
            @endforeach
        </div>
        @endif

        <form
            :action="formMode === 'create'
                ? '{{ route('chantiers.store') }}'
                : '{{ url('chantiers') }}/' + ch.id"
            method="POST"
            id="chantierForm"
        >
            @csrf
            <template x-if="formMode === 'edit'">
                <input type="hidden" name="_method" value="PUT">
            </template>
            <input type="hidden" name="_form_mode"   :value="formMode">
            <input type="hidden" name="_chantier_id" :value="ch.id">

            <div class="form-grid form-grid-2">
                <div class="form-group">
                    <label class="form-label">Nom <span style="color:var(--danger)">*</span></label>
                    <input type="text" name="nom" class="form-control" x-model="ch.nom" required autofocus>
                </div>
                <div class="form-group">
                    <label class="form-label">Code</label>
                    <input type="text" name="code" class="form-control" x-model="ch.code" placeholder="Auto si vide">
                </div>
                <div class="form-group">
                    <label class="form-label">Client</label>
                    <select name="client_id" class="form-control" x-model="ch.client_id">
                        <option value="">-- Aucun --</option>
                        @foreach($clients as $c)
                            <option value="{{ $c->id }}">{{ $c->nom }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Statut</label>
                    <select name="statut" class="form-control" x-model="ch.statut">
                        @foreach(['demarrage'=>'Démarrage','en_cours'=>'En cours','pause'=>'Pause','cloture'=>'Clôturé','sav'=>'SAV'] as $s=>$l)
                            <option value="{{ $s }}">{{ $l }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Budget (TND)</label>
                    <input type="number" name="budget" class="form-control" step="0.001" min="0" x-model="ch.budget">
                </div>
                <div class="form-group">
                    <label class="form-label">Date début</label>
                    <input type="date" name="date_debut" class="form-control" x-model="ch.date_debut">
                </div>
                <div class="form-group">
                    <label class="form-label">Date fin prévue</label>
                    <input type="date" name="date_fin" class="form-control" x-model="ch.date_fin">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Notes</label>
                <textarea name="notes" class="form-control" rows="3" x-model="ch.notes"></textarea>
            </div>
        </form>
    </div>

    <div class="modal-footer">
        <button type="button" @click="showForm = false" class="btn btn-secondary">
            <i class="fas fa-times"></i> Annuler
        </button>
        <button type="submit" form="chantierForm" class="btn btn-primary">
            <i class="fas fa-save"></i>
            <span x-text="formMode === 'create' ? 'Créer le chantier' : 'Enregistrer les modifications'"></span>
        </button>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════
     MODAL APERÇU / CONSULTER
══════════════════════════════════════════════════════════ --}}
<div class="modal modal-xl" :class="{ 'open': showPreview }" x-cloak>

    <div class="modal-header">
        <h3>
            <i class="fas fa-hard-hat" style="color:var(--warning);"></i>
            <span x-text="previewCh.nom + (previewCh.code ? ' — ' + previewCh.code : '')"></span>
        </h3>
        <button type="button" class="modal-close" @click="closePreview()" title="Fermer">
            <i class="fas fa-xmark"></i>
        </button>
    </div>

    <div class="modal-body modal-body-iframe">
        <iframe :src="showPreview ? previewUrl : 'about:blank'"></iframe>
    </div>

    <div class="modal-footer">
        <button type="button" @click="closePreview()" class="btn btn-secondary">
            <i class="fas fa-times"></i> Fermer
        </button>
        <button type="button" @click="openStatutModal()" class="btn btn-warning">
            <i class="fas fa-rotate"></i> Changer statut
        </button>
        <button type="button" @click="closePreview(); $nextTick(() => openEdit(previewCh))" class="btn btn-warning">
            <i class="fas fa-edit"></i> Modifier
        </button>
        <a :href="previewUrl.replace('?bare=1', '')" target="_blank" class="btn btn-info">
            <i class="fas fa-external-link-alt"></i> Ouvrir
        </a>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════
     MODAL CHANGER STATUT
══════════════════════════════════════════════════════════ --}}
<div class="modal modal-sm" :class="{ 'open': showStatutModal }" x-cloak>
    <div class="modal-header">
        <h3><i class="fas fa-rotate" style="color:var(--warning);"></i> Changer le statut</h3>
        <button type="button" class="modal-close" @click="showStatutModal = false" title="Fermer">
            <i class="fas fa-xmark"></i>
        </button>
    </div>
    <div class="modal-body">
        <form id="statutForm"
              :action="'{{ url('chantiers') }}/' + previewCh.id + '/statut'"
              method="POST">
            @csrf
            <input type="hidden" name="_method" value="PATCH">
            <div class="form-group">
                <label class="form-label">Nouveau statut</label>
                <select name="statut" class="form-control" x-model="newStatut">
                    @foreach(['demarrage'=>'Démarrage','en_cours'=>'En cours','pause'=>'Pause','cloture'=>'Clôturé','sav'=>'SAV / Maintenance'] as $s=>$l)
                        <option value="{{ $s }}">{{ $l }}</option>
                    @endforeach
                </select>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" @click="showStatutModal = false" class="btn btn-secondary">
            <i class="fas fa-times"></i> Annuler
        </button>
        <button type="submit" form="statutForm" class="btn btn-primary">
            <i class="fas fa-check"></i> Confirmer
        </button>
    </div>
</div>

</div>{{-- /x-data --}}
@endsection