@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 Installtions</h3>
	<ul class="breadcrumb">
		<li class="breadcrumb-item"><a href="{{route('dashboard')}}">Tableau de Bord</a></li>
		<li class="breadcrumb-item active">Ajouter 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 ">Ajouter une nouvelle installation</h4>
            </div>
            <div class="card-body">
                <div class="p-5">
                    <form method="POST" enctype="multipart/form-data" autocomplete="on" action="{{ route('installations.store') }}">
                        @csrf
                        <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">
                                            <option value="Sélectionner un client">Sélectionner un client</option> <!-- Valeur vide -->
                                            @foreach ($clients as $client)
                                                <option value="{{ $client->id }}" {{ old('client') == $client->id ? 'selected' : '' }} required>
                                                    {{ $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" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <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">
                                                    <option value="Sélectionner une modalité">Sélectionner une modalité</option>
                                                    @foreach ($modalites as $modalite)
                                                        <option value="{{$modalite->id}}">{{$modalite->name}}</option>
                                                    @endforeach
                                                </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Responsable</label>
                                                <select class="select2 form-select form-control" name="user_id">
                                                    <option value="Sélectionner un responsable">Sélectionner un responsable</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{$user->id}}">{{$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">
                                        </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">
                                        </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">
                                        </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">
                                        </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">
                                        </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">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        

                        <div id="journees-container"></div>
                           
                            <button type="button" onclick="ajouterJournee()" class="btn btn-primary mb-4">
                                <i class="fas fa-plus"></i> Ajouter une Journée
                            </button>

                        <br></br>
                        <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" 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>

                        <div class="service-fields mb-3">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>Date de PV de réception</label>
                                        <input class="form-control" type="date" name="date_pv_reception">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>Commentaire(s)</label>
                                        <textarea type="textarea" name="commentaires" class="form-control" placeholder="Saisir un commentaire(s)"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                       
                        <div class="submit-section">
                            <a href="{{route('installations.index')}}" class="btn btn-danger submit-btn">Annuler</a>
                            <button class="btn btn-primary submit-btn" type="submit" >Valider</button>
                        </div>

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



	<!-- Datetimepicker JS -->
<script src="{{asset('assets/js/moment.min.js')}}"></script>
<script src="{{asset('assets/js/bootstrap-datetimepicker.min.js')}}"></script>
<script>
    let journeeCount = 0;
    const users = @json($users);

    function ajouterJournee() {
        journeeCount++;
        const journeeHTML = `
        <div class="journee-card" id="journee-${journeeCount}">
            <div class="dynamic-header">
                <h4>Journée ${journeeCount}</h4>
                <button type="button" class="btn btn-danger btn-sm" onclick="supprimerJournee(${journeeCount})">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            
            <div class="row g-3">
                <div class="col-12" id="techniciens-container-${journeeCount}">
                    <button type="button" class="btn btn-secondary btn-sm" onclick="ajouterTechnicien(${journeeCount})">
                        <i class="fas fa-user-plus"></i> Ajouter Technicien
                    </button>
                </div>
            </div>
        </div>`;
        
        document.getElementById('journees-container').insertAdjacentHTML('beforeend', journeeHTML);
    }

    function supprimerJournee(supprimeId) {
        if(confirm('Supprimer cette journée et tous ses techniciens ?')) {
            document.getElementById(`journee-${supprimeId}`).remove();
            
            // Réindexation de toutes les journées restantes
            const journees = document.querySelectorAll('.journee-card');
            let nouvelIndex = 1;
            
            journees.forEach(journee => {
                const ancienId = journee.id.split('-')[1];
                
                // Mise à jour des éléments de la journée
                journee.id = `journee-${nouvelIndex}`;
                journee.querySelector('h4').textContent = `Journée ${nouvelIndex}`;
                journee.querySelector('.btn-danger').setAttribute('onclick', `supprimerJournee(${nouvelIndex})`);
                
                // Mise à jour du conteneur des techniciens
                const container = journee.querySelector(`#techniciens-container-${ancienId}`);
                container.id = `techniciens-container-${nouvelIndex}`;
                
                // Mise à jour du bouton d'ajout de technicien
                journee.querySelector('.btn-secondary').setAttribute('onclick', `ajouterTechnicien(${nouvelIndex})`);
                
                // Mise à jour des noms des champs formulaire
                journee.querySelectorAll('select, input').forEach(element => {
                    element.name = element.name
                        .replace(`[${ancienId}]`, `[${nouvelIndex}]`);
                });

                nouvelIndex++;
            });
            
            // Mise à jour du compteur global
            journeeCount = nouvelIndex - 1;
            calculerTotal();
        }
    }

    function ajouterTechnicien(journeeId) {
        const technicienCount = document.querySelectorAll(`#journee-${journeeId} .technicien-card`).length;
        const technicienHTML = `
        <div class="technicien-card mt-3">
            <div class="dynamic-header">
                <h5>Technicien ${technicienCount + 1}</h5>
                <button type="button" class="btn btn-danger btn-sm" onclick="this.parentElement.parentElement.remove(); calculerTotal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="row g-2">
                <div class="col-md-6">
                    <label>Technicien</label>
                    <select name="journees[${journeeId}][techniciens][${technicienCount}][user_id]" class="select2 form-select form-control" required>
                        <option value="">Choisir...</option>
                        ${users.map(user => `
                            <option value="${user.id}">${user.name}</option>
                        `).join('')}
                    </select>
                </div>
                
                <div class="col-md-3">
                    <label>Heure début</label>
                    <input type="datetime-local" name="journees[${journeeId}][techniciens][${technicienCount}][date_debut]" class="form-control" required>
                </div>
                
                <div class="col-md-3">
                    <label>Heure fin</label>
                    <input type="datetime-local" name="journees[${journeeId}][techniciens][${technicienCount}][date_fin]" class="form-control" required>
                </div>
                
                <div class="col-md-8">
                    <label>Tâches effectuées</label>
                    <input type="text" name="journees[${journeeId}][techniciens][${technicienCount}][taches]" class="form-control" required>
                </div>
                
                <div class="col-md-4">
                    <label>Coût (TND)</label>
                    <input type="number" step="0.01" name="journees[${journeeId}][techniciens][${technicienCount}][depenses]" 
                        class="form-control depense-input" oninput="calculerTotal()" required>
                </div>
            </div>
        </div>`;
        
        document.getElementById(`techniciens-container-${journeeId}`).insertAdjacentHTML('beforeend', technicienHTML);
    }

    function calculerTotal() {
        let total = 0;
        document.querySelectorAll('.depense-input').forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        document.getElementById('cout-total').value = total.toFixed(2);
    }
</script>

<link rel="stylesheet" href="{{asset('assets/css/bootstrap-datetimepicker.min.css')}}">
<style>
    .journee-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        background: #f8f9fa;
    }
    .technicien-card {
        background: white;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .dynamic-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
</style>
    

@endsection

@push('page-js')
@endpush