@extends('layout.app')

@section('title','Visites')
@section('page_title','Liste des visites')

@section('content')

<div class="container-fluid">

<div class="card shadow-sm border-0 rounded-4">
<div class="card-body">

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="fw-semibold text-primary">
        <i class="fa fa-stethoscope"></i> Suivi des visites
    </h5>

```
<a href="{{ route('admin.visits.export', request()->query()) }}" class="btn btn-success">
    <i class="fa fa-file-excel"></i> Télécharger XLS filtré
</a>
```

</div>

{{-- FILTRES --}}

<form method="GET" class="row g-2 mb-4">

```
<div class="col-md-3">
    <input type="text" name="search" class="form-control"
           value="{{ request('search') }}"
           placeholder="Nom délégué / client">
</div>

<div class="col-md-2">
    <select name="user_id" class="form-select">
        <option value="">Tous les délégués</option>
        @foreach($users as $user)
            <option value="{{ $user->id }}" {{ request('user_id')==$user->id ? 'selected' : '' }}>
                {{ $user->name }}
            </option>
        @endforeach
    </select>
</div>

<div class="col-md-2">
    <select name="city_id" class="form-select">
        <option value="">Tous les secteurs</option>
        @foreach($cities as $city)
            <option value="{{ $city->id }}" {{ request('city_id')==$city->id ? 'selected' : '' }}>
                {{ $city->name }}
            </option>
        @endforeach
    </select>
</div>

<div class="col-md-2">
    <select name="visite_type" class="form-select">
        <option value="">Type</option>
        <option value="face to face" {{ request('visite_type')=='face to face'?'selected':'' }}>Face à face</option>
        <option value="en double" {{ request('visite_type')=='en double'?'selected':'' }}>En double</option>
        <option value="accompagné" {{ request('visite_type')=='accompagné'?'selected':'' }}>Accompagné</option>
    </select>
</div>

<div class="col-md-2">
    <select name="status" class="form-select">
        <option value="">Statut</option>
        <option value="valide" {{ request('status')=='valide'?'selected':'' }}>Valide</option>
        <option value="invalide" {{ request('status')=='invalide'?'selected':'' }}>Invalide</option>
        <option value="double" {{ request('status')=='double'?'selected':'' }}>Double</option>
        <option value="non_realisee" {{ request('status')=='non_realisee'?'selected':'' }}>Non réalisée</option>
    </select>
</div>

<div class="col-md-2">
    <input type="date" name="from" value="{{ request('from') }}" class="form-control">
</div>

<div class="col-md-2">
    <input type="date" name="to" value="{{ request('to') }}" class="form-control">
</div>

<div class="col-md-1">
    <button class="btn btn-primary w-100">
        <i class="fa fa-filter"></i>
    </button>
</div>
```

</form>

@if(session('success')) <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="table-responsive">
<table class="table table-hover align-middle text-nowrap">
<thead class="table-light">
<tr>
    <th>#</th>
    <th>Délégué</th>
    <th>Secteur</th>
    <th>Client</th>
    <th>Accompagnant</th>
    <th>Type</th>
    <th>Date</th>
    <th>Durée</th>
    <th>Statut</th>
    <th>Localisation</th>
    <th class="text-end">Actions</th>
</tr>
</thead>

<tbody>
@forelse($visits as $v)

<tr>

```
<td class="fw-semibold">{{ $v->id }}</td>

<td>{{ optional($v->user)->name ?? '-' }}</td>

<td>
    <div class="small">
        <div class="fw-semibold text-dark">
            {{ optional(optional($v->listing)->city)->name ?? '-' }}
        </div>
        <div class="text-muted">
            {{ optional(optional($v->listing)->city)->region ?? '' }}
        </div>
    </div>
</td>

<td>            
    <div class="fw-semibold text-dark">
        {{ $v->listing?->name ?? '-' }}
    </div>
    <div class="text-muted">
        {{ optional($v->listing)->type ?? '-' }} /
        {{ optional($v->listing)->specialty ?? '' }}
    </div>
</td>

<td>{{ optional($v->userAccompagnant)->name ?? '-' }}</td>

<td>
    <span class="badge bg-info text-dark">
        {{ $v->visite_type }}
    </span>
</td>

<td>
    {{ $v->date_visit ? \Carbon\Carbon::parse($v->date_visit)->format('d/m/Y H:i') : '-' }}
</td>

<td>
    @php
        $seconds = $v->elapsed_time ?? 0;
        $h = floor($seconds / 3600);
        $m = floor(($seconds % 3600) / 60);
        $s = $seconds % 60;
    @endphp
    <span class="badge bg-light text-dark">
        {{ sprintf('%02d:%02d:%02d', $h, $m, $s) }}
    </span>
</td>

<td>
    @switch($v->status)
        @case('valide')
            <span class="badge bg-success">Valide</span>
            @break
        @case('invalide')
            <span class="badge bg-danger">Invalide</span>
            @break
        @case('double')
            <span class="badge bg-warning text-dark">Double</span>
            @break
        @default
            <span class="badge bg-secondary">Non réalisée</span>
    @endswitch
</td>

{{-- 🔥 LOCALISATION MODERNE --}}
<td>
    @if($v->has_ticket)

        <span class="badge rounded-pill bg-danger-subtle text-danger fw-semibold px-3 py-2"
              data-bs-toggle="tooltip"
              title="Hors zone autorisée">
            <i class="fa fa-map-marker-alt me-1"></i>
            Hors zone
        </span>

    @else

        <span class="badge rounded-pill bg-success-subtle text-success fw-semibold px-3 py-2"
              data-bs-toggle="tooltip"
              title="Localisation valide">
            <i class="fa fa-check-circle me-1"></i>
            Conforme
        </span>

    @endif

    {{-- bouton map --}}
    @if($v->lat && $v->lng)
        <a href="https://maps.google.com/?q={{ $v->lat }},{{ $v->lng }}"
           target="_blank"
           class="btn btn-sm btn-light border ms-1">
            <i class="fa fa-map"></i>
        </a>
    @endif
</td>

<td class="text-end">
    <a href="{{ route('admin.visits.show', $v) }}"
       class="btn btn-sm btn-outline-primary">
        <i class="fa fa-eye"></i>
    </a>
</td>
```

</tr>

@empty

<tr>
    <td colspan="11" class="text-center text-muted py-4">
        Aucune visite trouvée
    </td>
</tr>
@endforelse
</tbody>
</table>
</div>

<div class="mt-3">
    {{ $visits->appends(request()->except('page'))->links('vendor.pagination.bootstrap-5-fa') }}
</div>

</div>
</div>
</div>

{{-- TOOLTIP --}}

<script>
document.addEventListener('DOMContentLoaded', function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
})
</script>

@endsection