@extends('layouts.master')

@section('title')
    Responsables
@endsection

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

    <!-- Bouton Ajouter -->
    <div class="d-sm-flex align-items-center justify-content-end mb-4">
        <a href="#collapseAssign" class="btn btn-sm btn-primary shadow-sm" data-toggle="collapse">
            <i class="fas fa-plus fa-sm text-white-50"></i> Ajouter un responsable
        </a>
    </div>

    <!-- Formulaire -->
    <div class="row">
    <div class="col-sm-10 offset-sm-1">
        <div class="card shadow mb-4 collapse" id="collapseAssign">
            <div class="card-body">

                <form method="POST" action="{{ route('responsables.store') }}">
                    @csrf

                    <!-- Identité -->
                    <div class="form-group">
                        <div class="row">

                            <div class="col-sm-4">
                                <label>Nom</label>
                                <input type="text"
                                       name="nom"
                                       class="form-control @error('nom') is-invalid @enderror"
                                       value="{{ old('nom') }}"
                                       required>
                            </div>

                            <div class="col-sm-4">
                                <label>Prénoms</label>
                                <input type="text"
                                       name="prenoms"
                                       class="form-control @error('prenoms') is-invalid @enderror"
                                       value="{{ old('prenoms') }}"
                                       required>
                            </div>

                            <div class="col-sm-4">
                                <label>Rôle utilisateur</label>

                                <select id="user_id"
                                        name="user_id"
                                        class="form-control"
                                        required>

                                    <option value="">
                                        -- Sélectionner un rôle --
                                    </option>

                                    @foreach($users as $user)

                                        @if(in_array($user->role,[
                                            'chef_zone',
                                            'ctr',
                                            'chef_prog',
                                            'coordonnateurs',
                                            'service_demandeur'
                                        ]))

                                            <option value="{{ $user->id }}"
                                                    data-role="{{ $user->role }}">

                                                {{ $user->name }}

                                            </option>

                                        @endif

                                    @endforeach

                                </select>
                            </div>

                        </div>
                    </div>

                    <!-- Zone Service Demandeur -->
                    <div class="form-group d-none"
                         id="zone_service_demandeur">

                        <div class="row">

                            <div class="col-sm-6">

                                <label>Zone de rattachement</label>

                                <select name="chef_zone_id"
                                        id="chef_zone_id"
                                        class="form-control">

                                    <option value="">
                                        -- Sélectionner une zone --
                                    </option>

                                    @foreach($responsables as $chefZone)

                                        @if($chefZone->user->role == 'chef_zone')

                                            <option value="{{ $chefZone->id }}"
                                                    data-direction="{{ $chefZone->direction_id }}"
                                                    data-centre="{{ $chefZone->centrerespo_id }}"
                                                    data-entite="{{ $chefZone->entite_id }}">

                                                {{ $chefZone->centrerespo->libelle_long }}

                                            </option>

                                        @endif

                                    @endforeach

                                </select>

                            </div>

                        </div>

                    </div>

                    <!-- Affectations -->
                    <div class="form-group"
                         id="bloc_affectation">

                        <div class="row">

                            <div class="col-sm-4">

                                <label>Direction</label>

                                <select id="direction_id"
                                        name="direction_id"
                                        class="form-control"
                                        required>

                                    <option value="">
                                        -- Sélectionner une direction --
                                    </option>

                                    @foreach($directions as $direction)

                                        <option value="{{ $direction->id }}">
                                            {{ $direction->libelle }}
                                        </option>

                                    @endforeach

                                </select>

                            </div>

                            <div class="col-sm-4">

                                <label>Centre de responsabilité</label>

                                <select id="centrerespo_id"
                                        name="centrerespo_id"
                                        class="form-control"
                                        required>

                                    <option value="">
                                        -- Sélectionner un centre --
                                    </option>

                                    @foreach($centrerespos as $centre)

                                        <option value="{{ $centre->id }}"
                                                data-direction="{{ $centre->direction_id }}"
                                                data-entite="{{ $centre->entite_id }}">

                                            {{ $centre->libelle_long }}

                                        </option>

                                    @endforeach

                                </select>

                            </div>

                            <div class="col-sm-4">

                                <label>Entité</label>

                                <select id="entite_id_display"
                                        class="form-control"
                                        disabled>

                                    <option value="">
                                        -- Sélectionner une entité --
                                    </option>

                                    @foreach($entites as $entite)

                                        <option value="{{ $entite->id }}">
                                            {{ $entite->libelle }}
                                        </option>

                                    @endforeach

                                </select>

                                <input type="hidden"
                                       name="entite_id"
                                       id="entite_id">

                            </div>

                        </div>

                    </div>

                    <div class="row mt-4">
                        <div class="col-sm-6 offset-sm-3">

                            <button type="submit"
                                    class="btn btn-primary btn-block">

                                Enregistrer le responsable

                            </button>

                        </div>
                    </div>

                </form>

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

        <!-- 
        DataTales Example 
        L'affichage des données récupérées depuis la base de données
    -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Liste des Responsables</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="dataTable" width="100%" cellspacing="0" style="font-size: 0.8em;">
                    <thead class="thead-dark">
                        <tr>
                            <th>Nom</th>
                            <th>Prénoms</th>
                            <th>Rôle utilisateur</th>
                            <th>Direction</th>
                            <th>Centre de responsabilité</th>
                            <th>Enitité</th>
                            <th>Enregistré(e) le...</th>
                            <th>Editer</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($responsables as $responsable)
                        <tr>
                            <td>{{ $responsable->nom }}</td>
                            <td>{{ $responsable->prenoms }}</td>
                            <td>{{ $responsable->user->name }}</td>
                            <td>{{ $responsable->direction->code }} - {{ $responsable->direction->libelle }}</td>
                            <td>{{ $responsable->centrerespo->code }} - {{ $responsable->centrerespo->libelle_long }}</td>
                            <td>{{ $responsable->entite->libelle }}</td>
                            <td>{{ $responsable->created_at }}</td>
                            <td class="text-right">
                                <a href="{{ route('responsable.edit', ['responsable'=>$responsable->id]) }}" type="button" class="btn btn-warning btn-circle btn-sm"><i class="fas fa-edit"></i></a>
                                <a href="#" class="btn btn-danger btn-circle btn-sm" onclick="if(confirm('Voulez-vous vraiment supprimer ce responsable ?'))
                                {document.getElementById('form-{{$responsable->id}}').submit()}"><i class="fas fa-trash"></i></a>

                                <form id="form-{{$responsable->id}}" action="{{ route('responsable.supprimer', ['responsable'=>$responsable->id]) }}" method="post">
                                @csrf
                                <input type="hidden" name="_method" value="delete">
                                </form> 
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function () {

    const roleSelect = document.getElementById('user_id');
    const blocAffectation = document.getElementById('bloc_affectation');
    const zoneService = document.getElementById('zone_service_demandeur');

    const chefZone = document.getElementById('chef_zone_id');

    const direction = document.getElementById('direction_id');
    const centre = document.getElementById('centrerespo_id');
    const entiteDisplay = document.getElementById('entite_id_display');
    const entiteHidden = document.getElementById('entite_id');

    const centreOptions = Array.from(centre.options);

    /*
    ====================================
    LOGIQUE NORMALE
    ====================================
    */

    direction.addEventListener('change', function () {

        let directionId = this.value;

        centre.innerHTML =
            '<option value="">-- Sélectionner un centre --</option>';

        centreOptions.forEach(option => {

            if (option.dataset.direction == directionId) {
                centre.appendChild(option.cloneNode(true));
            }

        });

        entiteDisplay.value = "";
        entiteHidden.value = "";
    });

    centre.addEventListener('change', function () {

        let selectedOption =
            this.options[this.selectedIndex];

        let entiteId =
            selectedOption.dataset.entite;

        if (entiteId) {

            entiteDisplay.value = entiteId;
            entiteHidden.value = entiteId;

        } else {

            entiteDisplay.value = "";
            entiteHidden.value = "";
        }
    });

    /*
    ====================================
    SERVICE DEMANDEUR
    ====================================
    */

    roleSelect.addEventListener('change', function () {

        let option =
            this.options[this.selectedIndex];

        let role =
            option.dataset.role;

        if (role === 'service_demandeur') {

            blocAffectation.classList.add('d-none');
            zoneService.classList.remove('d-none');

            direction.required = false;
            centre.required = false;

        }
        else {

            blocAffectation.classList.remove('d-none');
            zoneService.classList.add('d-none');

            direction.required = true;
            centre.required = true;
        }

    });

    chefZone.addEventListener('change', function () {

        let option =
            this.options[this.selectedIndex];

        if (!option.value) {
            return;
        }

        direction.value =
            option.dataset.direction;

        centre.value =
            option.dataset.centre;

        entiteHidden.value =
            option.dataset.entite;

        entiteDisplay.value =
            option.dataset.entite;
    });

});
</script>