@extends('layouts.superadmin')
@section('title', 'Demandeurs d\'adhésion')

@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>Demandeurs d'adhésion</h4>
            </div>
            {{-- <div class="col-6">
                        <div class="btn-right">
                            <a href="{{route('create')}}" class="effect-btn btn btn-primary mt-2 mr-2"><i class="feather icon-plus mr-2"></i>{{ __('adminWords.create').' '.__('adminWords.user') }}</a>
                            <button type="button" class="effect-btn btn btn-danger mt-2 mr-2" id="bulkDelete" data-msg="{{ __('adminWords.atleast').' '.__('adminWords.user').' '.__('adminWords.must_selected') }}" data-url="{{route('bulkDelete')}}"><i class="far fa-trash-alt mr-2 "></i> {{ __('adminWords.delete_selected') }}</button> 
                        </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">

                        <div class="table-responsive" style="overflow-x: hidden!important;">
                            <form method="post" id="usersForm">
                                <table class="table table-bordered table-striped align-middle  w-100"
                                    id="datatable-buttons" data-method="post" data-url="{{ route('newUsersData') }}">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Nom de la radio</th>
                                            <th>Email du demandeur</th>
                                            <th>Contact du demandeur</th>
                                            <th>Ajouté le :</th>
                                            <th>{{ __('adminWords.action') }}</th>
                                        </tr>
                                    </thead>

                                    <tbody>

                                        @foreach ($allUsers as $newUser)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $newUser['radio_name'] }}</td>
                                                <td>{{ $newUser['email'] }}</td>
                                                <td>{{ $newUser['mobile'] }}</td>
                                                <td>{{ date('d-m-Y', strtotime(explode(' ', $newUser['created_at'])[0])) }}
                                                </td>
                                                <td>
                                                    <div class="d-flex gap-2 justify-content-center">
                                                        <a class="btn btn-outline-primary btn-sm" title="Voir"
                                                            href="{{ route('newuser.show', ['newUser' => $newUser['id'], 'type' => $newUser['type']]) }}">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                        <button type="button" class="btn btn-outline-success btn-sm"
                                                            data-bs-toggle="modal" data-bs-target="#modalAction"
                                                            data-user-id="{{ $newUser['id'] }}"
                                                            data-user-type="{{ $newUser['type'] }}" data-action="validate">
                                                            <i class="fa fa-check-square"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-outline-danger btn-sm"
                                                            data-bs-toggle="modal" data-bs-target="#modalAction"
                                                            data-user-id="{{ $newUser['id'] }}"
                                                            data-user-type="{{ $newUser['type'] }}" data-action="reject">
                                                            <i class="far fa-trash-alt"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </form>
                        </div>
                    </div>

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

    <!-- Modal unique -->
    <div class="modal fade" id="modalAction" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-3 shadow-sm">
                <div class="modal-body text-center py-4">
                    <h5 class="mb-4" id="modalActionTitle">Confirmez l'action</h5>
                    <a href="#" id="modalActionLink" class="btn btn-success me-2">Valider</a>
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
                </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 src="{{ asset('assets/js/musioo-custom.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#datatable-buttons').DataTable({
                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,
                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>'
                    }
                }
            });
        });
    </script>


    <script>
        if (@json(session()->has('success'), JSON_PRETTY_PRINT)) {
            if (!@json(session('success'), JSON_PRETTY_PRINT)) {
                toastr.error(@json(session('msg')), 'Echec de la validation', {
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut",
                    timeOut: 5000
                })
            } else {
                toastr.success(@json(session('msg')), 'Validation réussie', {
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut",
                    timeOut: 5000
                })
            }
        }
    </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 userType = button.getAttribute('data-user-type');
            const action = button.getAttribute('data-action');

            const actionLink = modal.querySelector('#modalActionLink');
            const actionTitle = modal.querySelector('#modalActionTitle');

            if (action === 'validate') {
                actionLink.href = `/validate/${userId}/${userType}`;
                actionLink.className = 'btn btn-success me-2';
                actionLink.textContent = 'Valider';
                actionTitle.textContent = "Valider cette radio ?";
            } else if (action === 'reject') {
                actionLink.href = `/reject/${userId}/${userType}`;
                actionLink.className = 'btn btn-primary me-2';
                actionLink.textContent = 'Rejeter';
                actionTitle.textContent = "Rejeter la demande ?";
            }
        });
    </script>


@endsection