@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <a href="{{route('installations.index')}}" class="class="fas fa-forward">Retour</a>
            <div class="card-header bg-primary text-white">
                <h4><i class="fas fa-calendar-alt"></i> Détails de l'installation - N°:{{ $installation->ordre_installation }}</h4>
                <h6><strong>Numéro d'ordre :</strong> {{ $installation->order_number }}</h6>
                <h6><strong>Modalité :</strong> {{ $installation->modalite->name }}</h6>
            </div>
            <div class="card-body">
                
                <!-- Entête avec infos générales -->
                <div class="installation-header mb-5">
                    <div class="row">
                        <div class="col-md-4">
                            <p><strong>Client :</strong> {{ $installation->client->name }}</p>
                            <p><strong>Équipement :</strong> {{ $installation->equipement }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Statut :</strong> <span class="badge badge-{{ $installation->etat === 'Terminé' ? 'success' : 'warning' }}">{{ $installation->etat }}</span></p>
                            <p><strong>Coût total :</strong> {{ number_format($installation->cout_total, 2) }} TND</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Responsable :</strong> {{ $installation->user->name }}</p>
                            <p><strong>Dates :</strong> {{date('d/m/Y', strtotime($installation->date_debut_prevu))}} - 
                                {{date('d/m/Y', strtotime($installation->date_fin_prevu))}}</p>
                        </div>
                    </div>
                </div>

                <!-- Section des journées -->
                <h5 class="mb-3"><i class="fas fa-calendar-day"></i> Journées d'installation</h5>
                
                @forelse($installation->journees->sortBy('date_debut') as $journee)
                <div class="journee-card mb-4 p-3 border rounded">
                    <h6 class="text-muted">Journée #{{ $loop->iteration }}</h6>
                    <p class="text-primary">
                        <i class="fas fa-clock"></i> {{ $journee->date_debut }} - {{ $journee->date_fin }}
                    </p>
                    
                    @foreach($journee->users as $technicien)
                    <div class="technicien-card mb-3 p-3 border rounded bg-light">
                        <div class="row">
                            <div class="col-md-4">
                                <p><strong>Ingenieur/Technicien :</strong> <i class="fas fa-user-tie"></i> {{ $technicien->name }}</p>
                                <p class="fas fa-clock"><strong>Date/Heure début :</strong>{{date('d/m/Y h:i', strtotime($journee->date_debut))}}</p>
                                <p class="fas fa-clock"><strong>Date/Heure fin :</strong>{{date('d/m/Y h:i', strtotime($journee->date_fin))}}</p>
                            </div>     
                            
                            <div class="col-md-4">
                                <p><strong>Tâches :</strong></p>
                                <div class="taches-box bg-white p-2 rounded border">
                                    {!! nl2br(e($journee->taches)) !!}
                                </div>
                            </div>

                            <div class="col-md-4">
                                <p><strong>Dépenses :</strong> {{ number_format($journee->depenses, 2) }} TND</p>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
                @empty
                <div class="alert alert-info">
                    Aucune journée enregistrée pour cette installation.
                </div>
                @endforelse

                <!-- Section commentaires -->
                @if($installation->commentaires)
                <div class="commentaires mt-5 p-3 bg-light rounded">
                    <h5><i class="fas fa-comments"></i> Commentaires</h5>
                    <p class="mb-0">{!! nl2br(e($installation->commentaires)) !!}</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('page-css')
<style>

.journee-card {
        background: #fff;
        transition: transform 0.2s;
        position: relative;
        border-left: 5px solid #007bff;
        padding-left: 15px;
    }

    .technicien-card {
        background: #f8f9fa;
        border-left: 4px solid #6c757d;
    }

    .journee-card:hover {
        transform: translateX(5px);
        box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    }


    .technicien-card:hover {
        transform: translateX(10px);
        box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    }
   

    /* Ajout d'une ligne chronologique */
    .journees-container::before {
        content: '';
        position: absolute;
        left: 40px;
        top: 20px;
        bottom: 20px;
        width: 2px;
        background: #dee2e6;
    }

    .journee-card::before {
        content: '';
        position: absolute;
        left: -25px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #4e73df;
        border: 2px solid #fff;
    }

    .journee-card:hover {
        transform: translateX(10px);
        box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    }
</style>
@endpush