@extends('layout.app')

@section('title','Visites en cours')
@section('page_title','Suivi des visites en cours')

@section('content')
<div class="container-fluid">

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

{{-- HEADER --}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="fw-semibold text-primary">
        <i class="fa fa-clock"></i> Suivi en temps réel
    </h5>
</div>

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

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

    {{-- USER --}}
    <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>

    {{-- CITY --}}
    <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>

    {{-- STATUS --}}
    <!-- <div class="col-md-2">
        <select name="status" class="form-select">
            <option value="">Statut</option>
            <option value="in_progress" {{ request('status')=='in_progress'?'selected':'' }}>
                En cours
            </option>
            <option value="finished" {{ request('status')=='finished'?'selected':'' }}>
                Terminée
            </option>
            <option value="cancelled" {{ request('status')=='cancelled'?'selected':'' }}>
                Annulée
            </option>
        </select>
    </div> -->

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

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

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

</form>

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

{{-- TABLE --}}
<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>Début</th>
    <th>Fin</th>
    <th>Durée</th>
    <th>Statut</th>
    <th class="text-end">Actions</th>
</tr>
</thead>

<tbody>

@forelse($visits as $v)

<tr>

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

    {{-- USER --}}
    <td>{{ $v->user?->name ?? '-' }}</td>

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

    {{-- CLIENT --}}
    <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>

    {{-- START --}}
    <td>
        {{ $v->start_time?->format('d/m/Y H:i') ?? '-' }}
    </td>

    {{-- END --}}
    <td>
        {{ $v->end_time?->format('d/m/Y H:i') ?? '-' }}
    </td>

    {{-- DURATION --}}
    <td>
        <span class="badge bg-light text-dark">
            {{ $v->duration ?? '-' }}
        </span>
    </td>

    {{-- STATUS --}}
    <td>
        @switch($v->status)

            @case('in_progress')
                <span class="badge bg-primary">
                    En cours
                </span>
            @break

            @case('finished')
                <span class="badge bg-info text-dark">
                    Terminée (sans rapport)
                </span>
            @break

            @case('cancelled')
                <span class="badge bg-danger">
                    Annulée
                </span>
            @break

            @default
                <span class="badge bg-secondary">
                    -
                </span>

        @endswitch
    </td>

    {{-- ACTION --}}
    <td class="text-end">
        <a href="#"
           class="btn btn-sm btn-outline-primary">
            <i class="fa fa-eye"></i>
        </a>
    </td>

</tr>

@empty

<tr>
    <td colspan="9" class="text-center text-muted py-4">
        Aucune visite en cours trouvée
    </td>
</tr>

@endforelse

</tbody>
</table>
</div>

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

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