@extends('layouts.admin')
@section('title', 'Collaborateurs - ' . getRadioUsers()->name)
@section('style_2')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
    <div class="row g-4 mb-4">
        <div class="p-5 bg-linear-gradient mt-0">
            <div class="container-fluid text-white text-center">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <h2 class="fw-bold mb-4" style="font-size: clamp(1.1rem, 2.5vw + 0.7rem, 2.1875rem);">Liste des collaborateurs</h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-custom px-4">
            <div class="bg-white rounded-4 shadow-sm p-4">
                <div class="header-section">
                    <div
                        class="d-flex flex-column flex-md-row justify-content-start align-items-stretch align-items-md-center mb-4">
                        <button class="btn gradient-btn mb-3 mb-md-0" data-bs-toggle="modal" data-bs-target="#addCollaboModal">
                            Ajouter un collaborateur
                        </button>
                       {{--  <form action="{{ route('user.collabos') }}" method="get">
                            <div class="input-group bg-white" style="width: 400px!important">
                                @csrf
                                <input type="search" name="search" class="form-control border-1 border-black rounded-3"
                                    placeholder="Rechercher un collaborateur..." aria-label="Rechercher un sondage"
                                    aria-describedby="search-addon" />
                                <button class="btn" type="submit" id="search-addon">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                        </form> --}}
                    </div>
                </div>
                @if (count($collabos) > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped align-middle w-100" id="datatable-buttons">
                            <thead class="table-white">
                                <tr>
                                    <th>#</th>
                                    <th>Nom</th>
                                    <th>Prénom</th>
                                    <th>Email</th>
                                    <th>Téléphone</th>
                                    <th>Rôle</th>
                                    <th>Statut</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($collabos as $collabo)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $collabo->lastname }}</td>
                                        <td>{{ $collabo->firstname }}</td>
                                        <td>{{ $collabo->email }}</td>
                                        <td>{{ $collabo->mobile }}</td>
                                        <td>
                                            <span
                                                class="badge {{ $collabo->leader ? 'text-bg-primary' : 'text-bg-secondary' }}">
                                                {{ $collabo->leader ? 'Administrateur' : 'Associé' }}
                                            </span>
                                        </td>
                                        <td>
                                            <span
                                                class="badge {{ $collabo->status == 1 ? 'text-bg-primary' : 'text-bg-secondary' }}">
                                                {{ $collabo->status == 1 ? 'Validé' : 'En attente' }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <button type="button" class="btn" data-bs-toggle="modal"
                                                    data-bs-target="#editCollaboModal{{ $collabo->id }}">
                                                    <i class="bi bi-pencil-square"></i>
                                                </button>
                                                <button type="button" class="btn text-danger" data-bs-toggle="modal"
                                                    data-bs-target="#deleteCollaboModal{{ $collabo->id }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <div class="modal fade" id="editCollaboModal{{ $collabo->id }}" tabindex="-1"
                                        aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Modification du collaborateur</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <form id="updateCollaboForm{{ $collabo->id }}" method="POST"
                                                    action="{{ route('user.updateCollabo', ['collaboId' => $collabo->id]) }}">
                                                    @csrf
                                                    @method('PATCH')
                                                    <div class="modal-body">
                                                        <input type="hidden" name="radio_id" value="{{ $radio->id }}">

                                                        <div class="row mb-3">
                                                            <div class="col-md-6">
                                                                <label for="lastname{{ $collabo->id }}" class="form-label">Nom</label>
                                                                <input type="text"
                                                                    class="form-control @error('lastname') is-invalid @enderror"
                                                                    id="lastname{{ $collabo->id }}"
                                                                    name="lastname"
                                                                    value="{{ $collabo->lastname }}" required>
                                                                @error('lastname')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                            </div>

                                                            <div class="col-md-6">
                                                                <label for="firstname{{ $collabo->id }}" class="form-label">Prénom</label>
                                                                <input type="text"
                                                                    class="form-control @error('firstname') is-invalid @enderror"
                                                                    id="firstname{{ $collabo->id }}"
                                                                    name="firstname"
                                                                    value="{{ $collabo->firstname }}" required>
                                                                @error('firstname')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                            </div>
                                                        </div>


                                                        <div class="mb-3">
                                                            <label for="email{{ $collabo->id }}"
                                                                class="form-label">Email</label>
                                                            <input type="email"
                                                                class="form-control @error('email') is-invalid @enderror"
                                                                id="email{{ $collabo->id }}" name="email"
                                                                value="{{ $collabo->email }}" required>
                                                            @error('email')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                        <div class="mb-3">
                                                            <label for="mobile{{ $collabo->id }}"
                                                                class="form-label">Téléphone</label>
                                                            <input type="tel"
                                                                class="form-control @error('mobile') is-invalid @enderror"
                                                                id="mobile{{ $collabo->id }}" name="mobile"
                                                                value="{{ $collabo->mobile }}">
                                                            @error('mobile')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                        <button type="button" class="btn gradient-btn mb-3"
                                                            id="togglePasswordChange{{ $collabo->id }}">
                                                            <i class="bi bi-key"></i> Changer le mot de passe
                                                        </button>

                                                        <div class="password-change-section d-none"
                                                            id="passwordChangeSection{{ $collabo->id }}">
                                                            <div class="mb-3">
                                                                <label for="password{{ $collabo->id }}"
                                                                    class="form-label">Nouveau mot de passe</label>
                                                                <input type="password"
                                                                    class="form-control @error('password') is-invalid @enderror"
                                                                    id="password{{ $collabo->id }}" name="password"
                                                                    placeholder="******" minlength="6">
                                                                <div class="form-text">{{ __('frontWords.pass_length') }}
                                                                </div>
                                                                @error('password')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                            </div>

                                                            <div class="mb-3">
                                                                <label for="password_confirmation{{ $collabo->id }}"
                                                                    class="form-label">Confirmation</label>
                                                                <input type="password"
                                                                    class="form-control @error('password_confirmation') is-invalid @enderror"
                                                                    id="password_confirmation{{ $collabo->id }}"
                                                                    name="password_confirmation" placeholder="******">
                                                                <div class="form-text">
                                                                    {{ __('adminWords.cnf_not_match') }}
                                                                </div>
                                                                @error('password_confirmation')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Fermer</button>
                                                        <button type="submit"
                                                            class="btn gradient-btn">Enregistrer</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade" id="deleteCollaboModal{{ $collabo->id }}" tabindex="-1"
                                        aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Suppression du collaborateur</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body text-center">
                                                    <p class="mb-0 fw-semibold">
                                                        Êtes-vous sûr de vouloir supprimer le collaborateur ?
                                                    </p>
                                                    <p class="text-danger mt-2">
                                                        <strong>« {{ $collabo->name }} »</strong>
                                                    </p>
                                                </div>
                                                <form id="deleteCollaboForm{{ $collabo->id }}" method="POST"
                                                    action="{{ route('user.deleteCollabo', ['collaboId' => $collabo->id]) }}">
                                                    @csrf
                                                    @method('DELETE')
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Annuler</button>
                                                        <button type="submit" class="btn btn-danger">Supprimer</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center fw-bold p-5">
                                            Aucun collaborateur trouvé
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="main-content-card">
                        <div>
                        <img src="{{ asset('assets/images/not-content.svg') }}" alt="aucun" />
                        </div>
                        <div>
                        <p class="h5">Pas de sondages</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="modal fade" id="addCollaboModal" tabindex="-1" aria-labelledby="addCollaboModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCollaboModalLabel">Ajout d'un collaborateur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="addCollaboForm" method="POST" action="{{ route('user.addCollabo') }}">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="radio_id" value="{{ $radio->id }}">

                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="name">Nom <span class="text-danger">*</span></label>
                                <input type="text" id="lastname"
                                    class="form-control border-gradient @error('lastname') is-invalid @enderror"
                                    name="lastname" placeholder="Entrez le nom du collaborateur"
                                    style="line-height: 2.5" />
                                @error('lastname')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="firstname">Prénoms <span
                                        class="text-danger">*</span></label>
                                <input type="text" id="firstname"
                                    class="form-control border-gradient @error('firstname') is-invalid @enderror"
                                    name="firstname" placeholder="Entrez le prénom du collaborateur"
                                    style="line-height: 2.5" />
                                @error('firstname')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="usePhoneSwitchCollabo"
                                name="use_phone" value="1">
                            <label class="form-check-label" for="usePhoneSwitchCollabo">Ajouter avec un numéro de
                                téléphone</label>
                        </div>

                        <div class="mb-3" id="email-group-collabo">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror"
                                id="email" name="email" placeholder="Entrez l'email du collaborateur">
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3 d-none" id="phone-group-collabo">
                            <label class="form-label" for="phone">Téléphone</label>
                            <div class="input-group mb-3 flex-nowrap">
                                <select id="country_code" name="country_code"
                                    class="form-select select2 border-gradient flex-shrink-0"
                                    style="width: 21%; height: 55px;" data-parent="#addCollaboModal">
                                    @foreach (DB::table('all_countries')->get() as $country)
                                        <option value="{{ $country->phonecode }}"
                                            @if ($country->phonecode == 229) selected @endif>
                                            +{{ $country->phonecode }} ({{ $country->nicename }})
                                        </option>
                                    @endforeach
                                </select>

                                <input type="tel" id="phone" name="phone" pattern="[0-9]+"
                                    inputmode="numeric"
                                    class="form-control border-gradient flex-fill @error('mobile') is-invalid @enderror"
                                    placeholder="XXXXXXXX" style="height:55px;" />
                            </div>
                            @error('mobile')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <input type="hidden" name="mobile" id="mobile-final">

                        <div class="mb-3">
                            <label for="password" class="form-label">Mot de passe</label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                id="password" name="password" placeholder="******" minlength="6" required>
                            <div class="form-text">{{ __('frontWords.pass_length') }}</div>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="password_confirmation" class="form-label">Confirmation du mot de
                                passe</label>
                            <input type="password"
                                class="form-control @error('password_confirmation') is-invalid @enderror"
                                id="password_confirmation" name="password_confirmation" placeholder="******" required>
                            <div class="form-text">{{ __('adminWords.cnf_not_match') }}</div>
                            @error('password_confirmation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                        <button type="submit" class="btn gradient-btn">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        document.querySelectorAll('[id^="togglePasswordChange"]').forEach(button => {
            button.addEventListener('click', function() {
                const collaboId = this.id.replace('togglePasswordChange', '');
                const section = document.getElementById(`passwordChangeSection${collaboId}`);
                section.classList.toggle('d-none');
            });
        });
    </script>

    @if ($errors->any())
        @if (Session::get('add_collabo'))
            <script>
                window.onload = () => {
                    const modal = new bootstrap.Modal(document.getElementById('addCollaboModal'));
                    modal.show();
                }
            </script>
        @endif
    @endif
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const switchInput = document.getElementById('usePhoneSwitchCollabo');
            const emailGroup = document.getElementById('email-group-collabo');
            const phoneGroup = document.getElementById('phone-group-collabo');

            const countryCode = document.getElementById('country_code_collabo');
            const phoneInput = document.getElementById('phone');
            const hiddenMobile = document.getElementById('mobile-final');

            function toggleFields() {
                if (switchInput.checked) {
                    emailGroup.classList.add('d-none');
                    phoneGroup.classList.remove('d-none');
                    document.getElementById('email').value = '';

                } else {
                    emailGroup.classList.remove('d-none');
                    phoneGroup.classList.add('d-none');
                    document.getElementById('email').value = '';
                }
            }

            // Appel initial pour bien afficher au chargement
            toggleFields();

            // À chaque changement de l’interrupteur
            switchInput.addEventListener('change', toggleFields);

            // Enregistrer le mobile combiné dans le champ hidden
            document.getElementById('addCollaboForm').addEventListener('submit', function() {
                if (switchInput.checked) {
                    hiddenMobile.value = countryCode.value + phoneInput.value;
                }
            });
        });
    </script>

@endsection

@section('script-select2')
    <!-- jQuery (nécessaire pour Select2) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.11/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.select2').each(function () {
                $('.select2').select2({
                    placeholder: 'Choisir un pays',
                    width: '30%',
                    dropdownParent: $($(this).data('parent'))
                });
            });
        });

    </script>
@endsection