@extends('admin.layouts.app')

@push('page-css')
    <!-- Datetimepicker CSS -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datetimepicker.min.css') }}">
@endpush

@push('page-header')
    <div class="col-sm-12">
        <h3 class="page-title">Gestion Installations</h3>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de Bord</a></li>
            <li class="breadcrumb-item active">Éditer Installation</li>
        </ul>
    </div>
@endpush

@section('content')

<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body custom-edit-service">
                <div class="card-header">
                    <h4 class="card-title">Éditer une installation</h4>
                </div>
                <div class="card-body">
                    <div class="p-5">
                        <form method="POST" enctype="multipart/form-data" autocomplete="on" action="{{ route('installations.update', $installation->id) }}">
                            @csrf
                            @method('PUT')
                            
                            <div class="service-fields mb-3">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Client <span class="text-danger">*</span></label>
                                            <select class="select2 form-select form-control" name="client_id" required>
                                                <option value="">Sélectionner un client</option>
                                                @foreach ($clients as $client)
                                                    <option value="{{ $client->id }}" {{ $installation->client_id == $client->id ? 'selected' : '' }}>
                                                        {{ $client->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Equipement <span class="text-danger">*</span></label>
                                            <input type="text" name="equipement" class="form-control" value="{{ $installation->equipement }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Modalité, responsable, dates, et autres champs -->
                            <div class="service-fields mb-3">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Modalité<span class="text-danger">*</span></label>
                                            <select class="select2 form-select form-control" name="modalite_id" required>
                                                <option value="">Sélectionner une modalité</option>
                                                @foreach ($modalites as $modalite)
                                                    <option value="{{ $modalite->id }}" {{ $installation->modalite_id == $modalite->id ? 'selected' : '' }}>
                                                        {{ $modalite->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Responsable<span class="text-danger">*</span></label>
                                            <select class="select2 form-select form-control" name="modalite_id" required>
                                                <option value="">Sélectionner un responsable</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}" {{ $installation->user_id == $user->id ? 'selected' : '' }}>
                                                        {{ $user->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="service-fields mb-3">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Date de début prévu</label>
                                            <input class="form-control" type="date" name="date_debut_prevu" value="{{ $installation->date_debut_prevu}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Date de début réel</label>
                                            <input type="date" name="date_debut_reel" class="form-control" value="{{ $installation->date_debut_reel}}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="service-fields mb-3">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Date de fin prévu</label>
                                            <input class="form-control" type="date" name="date_fin_prevu" value="{{ $installation->date_fin_prevu}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Date de fin réel</label>
                                            <input type="date" name="date_fin_reel" class="form-control" value="{{ $installation->date_fin_reel}}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="service-fields mb-3">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Numéro d'ordre</label>
                                            <input class="form-control" type="text" name="order_number" placeholder="Saisir un numéro d'ordre" value="{{ $installation->order_number}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Ordre d'installation</label>
                                            <input type="text" name="ordre_installation" class="form-control" placeholder="Saisir un ordre d'installation" value="{{ $installation->ordre_installation}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="journees-container">
                                @foreach($installation->journees ?? [] as $index => $journee)
                                    <div class="journee-block border p-3 mb-3">
                                        <h5>Journée {{ $index + 1 }}</h5>
                                        <label>Date début :</label>
                                        <input type="date" name="journees[{{ $index }}][techniciens][0][date_debut]" value="{{ $journee->date_debut }}" class="form-control">
                                        
                                        <label>Date fin :</label>
                                        <input type="date" name="journees[{{ $index }}][techniciens][0][date_fin]" value="{{ $journee->date_fin }}" class="form-control">
                                        
                                        <label>Tâches :</label>
                                        <textarea name="journees[{{ $index }}][techniciens][0][taches]" class="form-control">{{ $journee->taches }}</textarea>
                                        
                                        <label>Dépenses :</label>
                                        <input type="number" name="journees[{{ $index }}][techniciens][0][depenses]" value="{{ $journee->depenses }}" class="form-control">
                                
                                        <h6>Techniciens :</h6>
                                        <div class="techniciens-container">
                                            @foreach($journee->techniciens as $tIndex => $technicien)
                                                <div class="technicien-row d-flex align-items-center">
                                                    <select name="journees[{{ $index }}][techniciens][{{ $tIndex }}][user_id]" class="form-control">
                                                        @foreach($users as $user)
                                                            <option value="{{ $user->id }}" {{ $technicien->id == $user->id ? 'selected' : '' }}>
                                                                {{ $user->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <button type="button" class="btn btn-danger btn-sm remove-technicien">-</button>
                                                </div>
                                            @endforeach
                                        </div>
                                
                                        <button type="button" class="btn btn-primary btn-sm add-technicien" data-index="{{ $index }}">+ Ajouter un technicien</button>
                                    </div>
                                @endforeach
                            </div>

                            <div class="service-fields mb-3">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Coût total (TND)</label>
                                            <input type="text" id="cout-total" class="form-control"  value="{{ $installation->cout_total}}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Etat<span class="text-danger">*</span></label>
                                                <select class="select2 form-select form-control" name="etat">
                                                    <option>Sélectionner l'etat de l'installation</option>
                                                    <option value="En cours">En cours</option>
                                                    <option value="Mise en attente">Mise en attente</option>
                                                    <option value="Clôturé">Clôturé</option>
                                                </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <button type="button" id="add-journee" class="btn btn-success btn-sm">+ Ajouter une journée</button>
                            <button type="submit" class="btn btn-primary mt-4">Mettre à jour l'installation</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('page-js')
	<!-- Datetimepicker JS -->
	<script src="{{asset('assets/js/moment.min.js')}}"></script>
	<script src="{{asset('assets/js/bootstrap-datetimepicker.min.js')}}"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    let journeeIndex = document.querySelectorAll(".journee-block").length;

    // Ajouter une nouvelle journée
    document.getElementById("add-journee").addEventListener("click", function () {
        ajouterJournee();
    });

    function ajouterJournee() {
        const container = document.getElementById("journees-container");
        const newJournee = document.createElement("div");
        newJournee.classList.add("journee-block", "border", "p-3", "mb-3");
        newJournee.dataset.index = journeeIndex;

        newJournee.innerHTML = `
            <h5>Journée ${journeeIndex + 1}</h5>
            <label>Date début :</label>
            <input type="date" name="journees[${journeeIndex}][date_debut]" class="form-control">
            
            <label>Date fin :</label>
            <input type="date" name="journees[${journeeIndex}][date_fin]" class="form-control">
            
            <label>Tâches :</label>
            <textarea name="journees[${journeeIndex}][taches]" class="form-control"></textarea>
            
            <label>Dépenses :</label>
            <input type="number" name="journees[${journeeIndex}][depenses]" class="form-control">
            
            <h6>Techniciens :</h6>
            <div class="techniciens-container"></div>
            <button type="button" class="btn btn-primary btn-sm add-technicien" data-journee="${journeeIndex}">+ Ajouter un technicien</button>
        `;

        container.appendChild(newJournee);

        // Ajouter un événement pour le bouton d'ajout de techniciens
        newJournee.querySelector(".add-technicien").addEventListener("click", function () {
            ajouterTechnicien(journeeIndex);
        });

        journeeIndex++;
    }

    function ajouterTechnicien(journeeIndex) {
        const journeeContainer = document.querySelector(`.journee-block[data-index="${journeeIndex}"] .techniciens-container`);
        const technicienIndex = journeeContainer.children.length;

        const newTechnicienRow = document.createElement("div");
        newTechnicienRow.classList.add("technicien-row", "border", "p-2", "mb-2");

        newTechnicienRow.innerHTML = `
            <label>Technicien :</label>
            <select name="journees[${journeeIndex}][techniciens][${technicienIndex}][user_id]" class="form-control">
                @foreach($users as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>

            <label>Date début :</label>
            <input type="date" name="journees[${journeeIndex}][techniciens][${technicienIndex}][date_debut]" class="form-control">

            <label>Date fin :</label>
            <input type="date" name="journees[${journeeIndex}][techniciens][${technicienIndex}][date_fin]" class="form-control">

            <label>Tâches :</label>
            <textarea name="journees[${journeeIndex}][techniciens][${technicienIndex}][taches]" class="form-control"></textarea>

            <label>Dépenses :</label>
            <input type="number" name="journees[${journeeIndex}][techniciens][${technicienIndex}][depenses]" class="form-control">

            <button type="button" class="btn btn-danger btn-sm remove-technicien">- Supprimer</button>
        `;

        journeeContainer.appendChild(newTechnicienRow);

        // Ajouter un écouteur d'événement pour la suppression
        newTechnicienRow.querySelector(".remove-technicien").addEventListener("click", function () {
            newTechnicienRow.remove();
        });
    }
});

</script>

@endpush