@extends('admin.layout')

@section('title', 'Ajouter un chantier')

@section('content')

    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div>

    <section class="section contact">
        <div class="card p-4">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('plannings.chantiers.store') }}" method="post" id="planning-form">
                @csrf
                <div class="row gy-4">

                    {{-- ================= CLIENT ================= --}}
                    <div class="col-md-2">
                        <label>ID client</label>
                        <input type="number" name="client_id" id="client_id" class="form-control client-input"
                            enterkeyhint="done" required>
                        <small id="client_status" class="text-muted"></small>
                    </div>

                    <div class="col-md-4">
                        <label>Raison sociale</label>
                        <input type="text" id="raison_sociale" class="form-control" readonly>
                    </div>

                    <div class="col-md-3">
                        <label>Nom</label>
                        <input type="text" id="nom" class="form-control" readonly>
                    </div>

                    <div class="col-md-3">
                        <label>Prénom</label>
                        <input type="text" id="prenom" class="form-control" readonly>
                    </div>

                    <hr>

                    {{-- ================= DEVIS ================= --}}
                    <h5>Devis liés</h5>

                    <div id="devis-container">

                        <div class="devis-row row gy-4 mb-4">

                            <div class="col-md-2">
                                <label>ID devis</label>
                                <input type="number" name="devis_ids[]" class="form-control devis-input" enterkeyhint="done">
                                <small class="devis-status text-muted d-block"></small>
                            </div>


                            <div class="col-md-4">
                                <label>Raison sociale</label>
                                <input type="text" class="form-control devis-raison" readonly>
                            </div>

                            <div class="col-md-3">
                                <label>Nature</label>
                                <input type="text" class="form-control devis-nature" readonly>
                            </div>

                            <div class="col-md-3">
                                <label>Adresse</label>
                                <input type="text" class="form-control devis-adresse" readonly>
                            </div>

                            <div class="col-md-3">
                                <label>Code postal</label>
                                <input type="text" class="form-control devis-cp" readonly>
                            </div>

                            <div class="col-md-3">
                                <label>Ville</label>
                                <input type="text" class="form-control devis-ville" readonly>
                            </div>

                            <div class="col-md-3">
                                <label>Responsable devis</label>
                                <input type="text" class="form-control devis-resp" readonly>
                            </div>

                            <div class="col-md-1 d-flex align-items-end">
                                <button type="button" class="btn btn-outline-danger remove-devis d-none">
                                    ✕
                                </button>
                            </div>

                        </div>


                    </div>

                    <div class="col-md-12">
                        <button type="button" id="add-devis" class="btn btn-sm btn-outline-primary">
                            ➕ Ajouter un devis
                        </button>
                    </div>

                    <hr>

                    
                    {{-- ================= PLANNING ================= --}}
                    <div class="col-md-4">
                        <label>Date début</label>
                        <div class="d-flex gap-2">
                            <input type="date" name="date_debut" class="form-control" required>

                            <select name="heur_debut" class="form-control" required>
                                <option value="07:30:00">Matin</option>
                                <option value="12:30:00">Midi</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label>Date fin</label>
                        <div class="d-flex gap-2">
                            <input type="date" name="date_fin" class="form-control" required>

                            <select name="heur_fin" class="form-control" required>
                                <option value="12:00:00">Midi</option>
                                <option value="16:30:00">Soir</option>
                            </select>
                        </div>
                    </div>
                    <hr>

                    {{-- Message tant que la plage de dates n'est pas choisie --}}
                    <div class="employees-placeholder text-muted col-md-12">
                        Veuillez sélectionner une plage de dates pour choisir l'équipe et les employés.
                    </div>

                    {{-- Équipe + employés : révélés uniquement après la sélection de la plage de dates --}}
                    <div class="employees-container d-none col-md-12">

                    {{-- ================= ÉQUIPE ================= --}}
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label>Équipe</label>
                            <select name="equipe_id" class="form-control">
                                <option value="">--Sélectionner une équipe--</option>
                                @foreach ($equipes as $equipe)
                                    <option value="{{ $equipe->id }}">
                                        {{ $equipe->nom }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- ================= EMPLOYÉS ================= --}}
                    <div class="row">
                        <div class="col-md-12">
                            <label>Employés</label>

                            <div class="row">
                                @foreach ($users->chunk(ceil($users->count() / 2)) as $col)
                                    <div class="col-md-4">
                                        @foreach ($col as $user)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="user_ids[]"
                                                    value="{{ $user->id }}" id="user_{{ $user->id }}">
                                                <label class="form-check-label" for="user_{{ $user->id }}">
                                                    {{ $user->nom }} {{ $user->prenom }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    </div>{{-- /.employees-container --}}

                    <hr>

                    <div class="col-md-12">
                        <label>Observations</label>
                        <textarea name="observations" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="col-md-12">
                        <button class="btn btn-primary">Ajouter</button>
                    </div>

                </div>
            </form>

        </div>
    </section>
    <script src="{{ asset('js/api/clients.js') }}"></script>
    <script src="{{ asset('js/api/devis.js') }}"></script>



    <script>
        const datesBloquees = @json($datesBloquees);
    </script>
    <script src="{{ asset('js/plannings/dates.js') }}"></script>
    <script src="{{ asset('js/plannings/equipes.js') }}"></script>
    <script src="{{ asset('js/plannings/absences.js') }}"></script>
    <script src="{{ asset('js/plannings/users.js') }}"></script>



@endsection