@extends('layouts.superadmin')

@section('title', __('adminWords.audio'))

@section('style')
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
@endsection

@section('content')

    <div class="row mb-3">
        <div class="col">
            <h4 class="fw-bold">{{ __('adminWords.all') . ' ' . __('adminWords.audio') }}</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/admin') }}"><i
                                class="fas fa-home me-2"></i>{{ __('adminWords.home') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('adminWords.audio') }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">{{ __('adminWords.all') . ' ' . __('adminWords.audio') }}</h5>
            <div>
                <a href="{{ route('audio.create') }}" class="btn btn-primary rounded-pill me-2">
                    <i class="feather icon-plus me-2"></i>{{ __('adminWords.create') . ' ' . __('adminWords.audio') }}
                </a>
                <button type="button" id="bulkDelete" class="btn btn-danger rounded-pill"
                    data-msg="{{ __('adminWords.atleast') . ' ' . __('adminWords.audio') . ' ' . __('adminWords.must_selected') }}"
                    data-url="{{ route('bulkDeleteAudio') }}">
                    <i class="far fa-trash-alt me-2"></i>{{ __('adminWords.delete_selected') }}
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <form method="post" id="audioForm">
                    <table id="audioTable" class="table table-bordered table-striped align-middle  w-100">
                        <thead class="table-light">
                            <tr>
                                <th>
                                    <div class="form-check mb-0">
                                        <input class="form-check-input selectAllUser" type="checkbox" id="checkboxAll"
                                            onchange="checkAll(this, 'CheckBoxes')">
                                        <label class="form-check-label"
                                            for="checkboxAll">{{ __('adminWords.select') . ' ' . __('adminWords.all') }}</label>
                                    </div>
                                </th>
                                <th>{{ __('adminWords.image') }}</th>
                                <th>{{ __('adminWords.audio') . ' ' . __('adminWords.title') }}</th>
                                <th>{{ __('adminWords.audio_genres') }}</th>
                                <th>{{ __('adminWords.artist_name') }}</th>
                                <th>{{ __('adminWords.language') }}</th>
                                <th>{{ __('adminWords.created_at') }}</th>
                                <th>{{ __('adminWords.status') }}</th>
                                <th>{{ __('adminWords.action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></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.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/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/buttons/2.4.1/js/buttons.print.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="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            const table = $('#audioTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('audioData') }}',
                columns: [{
                        data: 'checkbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'image',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'genres'
                    },
                    {
                        data: 'artist'
                    },
                    {
                        data: 'language'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'copy',
                        className: 'btn btn-outline-secondary btn-sm'
                    },
                    {
                        extend: 'csv',
                        className: 'btn btn-outline-secondary btn-sm'
                    },
                    {
                        extend: 'excel',
                        className: 'btn btn-outline-secondary btn-sm'
                    },
                    {
                        extend: 'pdf',
                        className: 'btn btn-outline-secondary btn-sm'
                    },
                    {
                        extend: 'print',
                        className: 'btn btn-outline-secondary btn-sm'
                    }
                ],
                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>'
                    }
                },
                order: [
                    [6, 'desc']
                ]
            });

            // Bulk delete
            $('#bulkDelete').on('click', function() {
                const selected = $('.CheckBoxes:checked');
                if (selected.length === 0) {
                    Swal.fire('Attention', $(this).data('msg'), 'warning');
                    return;
                }
                Swal.fire({
                    title: 'Êtes-vous sûr ?',
                    text: 'Les éléments sélectionnés seront supprimés.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Oui, supprimer',
                    cancelButtonText: 'Annuler'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#audioForm').attr('action', $(this).data('url')).submit();
                    }
                });
            });
        });
    </script>
@endsection