{{-- @extends('category::layouts.master') --}}
@extends('layouts.superadmin')

@section('title', 'Catégories d\'évènements')

@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 -->

    <div class="card-header rounded-top-5">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h4>Catégories d'évènements</h4>
            </div>
            <div class="col-md-6 mt-3 mt-md-0">
                <a class="gradient-btn" href="javascript:void(0);" data-bs-toggle="modal"
                    data-bs-target="#addCategory">
                    <i class="feather icon-plus mr-2"></i>Créer une catégorie
                </a>
            </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 mb-0"
                                    id="datatable-buttons">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Nom </th>
                                            <th>{{ __('adminWords.action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($categories as $category)
                                            <tr>
                                                <td>
                                                    {{ $loop->iteration }}
                                                </td>
                                                <td>{{ $category->name }}</td>
                                                <td>
                                                    <div class="row" id="popupNewUser{{ $category->id }}">
                                                        <a {{-- type="button" --}}
                                                            class="col-4 btn btn-outline-danger d-flex justify-content-center"
                                                            {{-- data-toggle="modal" --}} {{-- data-target="#modal_delete{{ $newUser->id }}" --}}
                                                            href="{{ route('category.destroy', ['id' => $category->id]) }}"
                                                            title="Rejeter">
                                                            <i class="far fa-trash-alt"></i>
                                                            {{-- Rejeter --}}
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </form>
                        </div>
                    </div>

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

    <div class="modal fade" id="addCategory" tabindex="-1" aria-labelledby="addCategoryLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCategoryLabel">Créer une catégorie d'évènement</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <form method="post" id="addUpdateGenreForm" action="{{ route('category.store') }}"
                    enctype="multipart/form-data" data-reset="1" data-modal="1" table-reload="musiooDtToShowData">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="mb-3">
                                    <label for="category_name" class="form-label">Nom de catégorie<sup>*</sup></label>
                                    <input type="text" class="form-control require" id="category_name"
                                        name="category_name" placeholder="Créer une catégorie d'évènement" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-end">
                        <button type="submit" class="btn gradient-btn text-white" id="saveCategory">Créer</button>
                    </div>
                </form>
            </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>
        $(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>
@endsection