@extends('layouts.superadmin')
@section('title', __('adminWords.users'))
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
@endsection
@section('content')
    <!-- Main Body -->
    <!-- Page Title Start -->
    <div class="card-header rounded-top-5">
        <div class="row align-items-center">
            <div class="col-12">
                <h4>Toutes les radios</h4>
            </div>
            <div class="col-6">
                <div class="btn-right">
                </div>
            </div>
        </div>
    </div>

    <!-- Table Start -->
    <div class="row">
        <!-- Styled Table Card-->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card rounded-bottom-5 border-0 table-card">

                <div class="card-body">
                    <div class="chart-holder">

                        <table id="usersTable" class="table table-bordered table-striped align-middle  w-100">

                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Image</th>
                                    <th>Radio</th>
                                    <th>ID Radio</th>
                                    <th>Nom</th>
                                    <th>Email</th>
                                    <th>Créé le</th>
                                    <th>Status utilisateur</th>
                                    <th>Afficher/Masquer point de mountage</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    <tr>
                                        <td>
                                            {{ $loop->iteration }}
                                        </td>
                                        <td>
                                            @php
                                            $radio = getFirstRadioForUser($user->id);
                                                $src =
                                                    $user->image &&
                                                    file_exists(public_path('media/user/' . $user->image))
                                                        ? asset('media/user/' . $user->image)
                                                        : asset('assets/images/users/user1-1651222429.webp');
                                            @endphp
                                            <img src="{{ $src }}" alt="Image" class="rounded-circle"
                                                width="40" height="40">
                                        </td>
                                        <td>{{ $radio->name ?? 'Sans Radio' }}</td>
                                        <td>{{ $radio->id ?? 'Sans Radio' }}</td>
                                        <td>{{ $user->name }}</td>
                                        <td>{{ $user->email }}</td>

                                        <td>{{ $user->created_at->format('d-m-Y') }}</td>
                                        <td>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input updateStatus" type="checkbox"
                                                    {{ $user->status ? 'checked' : '' }}
                                                    data-url="{{ url('/user/updateStatus/' . $user->id) }}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input updateMount" type="checkbox"
                                                    {{ $radio->show_info == 1 ? 'checked' : '' }}
                                                    data-url="{{ url('/radio/updateMount/' . $radio->id) }}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-outline-primary dropdown-toggle"
                                                    type="button" id="dropdownMenuButton{{ $user->id }}"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    Actions
                                                </button>
                                                <ul class="dropdown-menu"
                                                    aria-labelledby="dropdownMenuButton{{ $user->id }}">
                                                    <li><a class="dropdown-item" href="{{ route('show.radio', $radio->id) }}"><i
                                                                class="far fa-eye me-2"></i>Voir détails radio</a></li>
                                                    <li><a class="dropdown-item" href="{{ url('edit/' . $user->id) }}"><i
                                                                class="far fa-edit me-2"></i>Modifier</a></li>
                                                    <li> <a href="#" 
                                                        class="dropdown-item text-danger generate-btn"
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#modalActionCalendar"
                                                        data-radio-id="{{ $radio->id }}" 
                                                        >
                                                        <i class="bi bi-calendar-day-fill"></i>Génerer la Grille de programme
                                                        </a></li>
                                                    <li>
                                                    <a href="#" 
                                                        class="dropdown-item text-danger"
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#modalAction"
                                                        data-user-id="{{ $user->id }}" 
                                                        data-action="supprimer">
                                                            <i class="far fa-trash-alt me-2"></i>Supprimer
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>


                    </div>


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

    <div class="modal fade" id="modalAction" tabindex="-1"
                                                aria-labelledby="modalLabel " aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalActionTitle">
                        Supprimer l'utilisateur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <p>Voulez-vous vraiment supprimer cet utilisateur ?</p>
                    <div class="d-flex justify-content-end gap-2">
                        <a href="#"  id="modalActionLink"
                            class="btn btn-primary">Supprimer</a>
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">Annuler</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <div class="modal fade" id="modalActionCalendar" tabindex="-1"
                                                aria-labelledby="modalLabel " aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title " id="modalActionTitle">
                        Grille de Programme Hebdomadaire</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <form method="GET" id="calendarForm">
                        @csrf
                        <div class="row">
                            <h5>Choissisez une date</h5>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <input type="date" class="form-control p-2 border-1 border-black" id="start_date"
                                    name="start_date" value="{{ now()->format('Y-m-d') }}" required>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="gradient-btn">Générer le PDF</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#usersTable').DataTable({
                responsive: true,
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                },
                responsive: true,
                initComplete: function () {
                    $('.dataTables_filter input[type="search"]').css({
                    'width': '180px',
                    'display': 'inline-block'
                    });
                },

                /* buttons: [
                    'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'
                ], */
                lengthMenu: [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "Tous"]
                ],
                pageLength: 5,
                lengthChange: true,
            });
        });
    </script>


<script>
$(document).ready(function () {
    $(document).on('change', '.updateStatus', function () {
        let checkbox = $(this);
        let url = checkbox.data('url');
        let status = checkbox.is(':checked') ? 1 : 0;

        $.ajax({
            url: url,
            method: 'PATCH',
            data: JSON.stringify({ status: status }),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function (response) {
                toastr.success(response.message || 'Statut mis à jour avec succès');
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
                toastr.error('Erreur lors de la mise à jour du statut');
            }
        });
    });
});
</script>

<script>
$(document).ready(function () {
    $(document).on('change', '.updateMount', function () {
        let checkbox = $(this);
        let url = checkbox.data('url');
        let info = checkbox.is(':checked') ? 1 : 0;

        console.log(info)

        $.ajax({
            url: url,
            method: 'PATCH',
            data: JSON.stringify({ info: info }),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function (response) {
                console.log(response)
                toastr.success(response.message || 'Statut mis à jour avec succès');
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
                toastr.error('Erreur lors de la mise à jour du statut');
            }
        });
    });
});
</script>



<script>
        const modal = document.getElementById('modalAction');
        modal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const userId = button.getAttribute('data-user-id');
        
            const action = button.getAttribute('data-action');

            const actionLink = modal.querySelector('#modalActionLink');
            const actionTitle = modal.querySelector('#modalActionTitle');
          
                actionLink.href = `destroy/${userId}`;
                actionLink.className = 'btn btn-success me-2';
                actionLink.textContent = 'Supprimer';
                actionTitle.textContent = "Supprimer l'utilisateur";            
        });
    </script>

    <script>
    $(document).on('click', '.generate-btn', function() {
        const radioId= $(this).data("radio-id");
        console.log(radioId);
        $("#calendarForm").attr("action", "/planning/generate/"+ radioId);
    })
    </script>
@endsection