@extends('web.layouts.base')

@section('titre')
LIVRES OK
@endsection

@section('styles')

<!-- jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" />

<!-- DataTables et les plugins d'exportation JavaScript -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>

{{-- <style>
    .toolbar {
        display: inline-block;
        vertical-align: middle;
    }

    div.dataTables_length,
    div.dataTables_filter,
    div.dataTables_buttons {
        display: inline-block;
        vertical-align: middle;
    }
</style> --}}
@endsection

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Type de séquence</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                            <li class="breadcrumb-item active">Type de séquence</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row">
            <div class="col-lg-12">
                <div class="card" id="tasksList">
                    <div class="card-header border-0">
                        <div class="d-flex align-items-center">
                            <h5 class="card-title mb-0 flex-grow-1">
                                <button type="button" class="btn btn-soft-success add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModalx"><i class="ri-download-2-line align-bottom me-1"></i> Exporter {{ $countId
                                    }}</button>
                            </h5>
                            <div class="flex-shrink-0">
                                <div class="d-flex flex-wrap gap-2">
                                    <button class="btn btn-primary add-btn" data-bs-toggle="modal" data-bs-target="#bookModal" data-target="#bookModal" data-action="create"><i class="ri-add-line align-bottom me-1"></i> Nouveau</button>
                                    <button class="btn btn-soft-danger" id="remove-actions" onclick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body border border-dashed border-end-0 border-start-0">
                        <form>
                            <div class="row g-3">
                                <div class="col-xxl-5 col-sm-12">
                                    <div class="search-box">
                                        <input type="text" class="form-control search bg-light border-light" placeholder="Search for tasks or something...">
                                        <i class="ri-search-line search-icon"></i>
                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </form>
                    </div>
                    <!--end card-body-->
                    <div class="card-body">
                        <div class="table-responsive table-card mb-4">
                            {{-- <table id="myTable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Prénom</th>
                                        <th>Email</th>
                                        <th>Téléphone</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Ajoutez vos données ici -->
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>

                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <tr>
                                        <td>Jean</td>
                                        <td>Dupont</td>
                                        <td>jean.dupont@example.com</td>
                                        <td>0123456789</td>
                                    </tr>
                                    <!-- ... -->
                                </tbody>
                            </table> --}}
                            {{-- <table class="table align-middle table-nowrap mb-0" id="myTable"> --}}
                            <div class="table-responsive">
                                <table class="table align-middle mb-0">
                                    <thead class="table-light text-muted">
                                        <tr>
                                            <th scope="col" style="width: 40px;">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                                </div>
                                            </th>
                                            <th class="sort" data-sort="id">ID</th>
                                            <th class="sort" data-sort="project_name">Titre</th>
                                            <th class="sort" data-sort="tasks_name">Auteur</th>
                                            <th class="sort" data-sort="tasks_name">Éditeur</th>
                                            <th class="sort" data-sort="tasks_name">Année</th>
                                            <th class="sort" data-sort="client_name">Modifier</th>
                                            <th class="sort" data-sort="assignedto">Crée le</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list form-check-all">
                                        @foreach($books as $book)
                                        <tr>
                                            <th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="chk_child" value="option1">
                                                </div>
                                            </th>
                                            <td class="id">{{ $book->id }}</td>
                                            <td class="project_name">{{ $book->title }}</td>
                                            <td class="tasks_name">{{ $book->author }}</td>
                                            <td class="tasks_name">{{ $book->publisher }}</td>
                                            <td class="tasks_name">{{ $book->year }}</td>
                                            <td class="client_name">{{ date('d/m/Y', strtotime($book->updated_at)) }}</td>
                                            <td class="assignedto">{{ date('d/m/Y', strtotime($book->created_at)) }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 ms-4">
                                                        <ul class="list-inline tasks-list-menu mb-0">
                                                            <li class="list-inline-item"><a href="apps-tasks-details.html"><i class="ri-eye-fill align-bottom me-2 text-muted"></i></a>
                                                            </li>

                                                            <li class="list-inline-item">
                                                                <a class="edit-item-btn" href="#bookModal" data-bs-toggle="modal" data-target="#bookModal" data-action="edit" data-id="{{ $book->id }}"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i></a>
                                                            </li>
                                                            <li class="list-inline-item">
                                                                <a class="remove-item-btn" data-bs-toggle="modal" href="#deleteOrder" data-book-id="{{ $book->id }}">
                                                                    <i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <!--end table-->
                                <div class="noresult" style="display: none">
                                    <div class="text-center">
                                        <lord-icon src="{{ asset('assets/icons/msoeawqm.json') }}" trigger="loop" colors="primary:#8c68cd,secondary:#4788ff" style="width:75px;height:75px">
                                        </lord-icon>
                                        <h5 class="mt-2">Sorry! No Result Found</h5>
                                        <p class="text-muted mb-0">We've searched more than 200k+ tasks We did not find any
                                            tasks for you search.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-2">
                            <div class="pagination-wrap hstack gap-2">
                                <a class="page-item pagination-prev disabled" href="#">
                                    Previous
                                </a>
                                <ul class="pagination listjs-pagination mb-0"></ul>
                                <a class="page-item pagination-next" href="#">
                                    Next
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->

        <div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body p-5 text-center">
                        <lord-icon src="{{ asset('assets/icons/gsqxdxog.json') }}" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                        <div class="mt-4 text-center">
                            <h4>Vous êtes sur le point de supprimer cette enregistrement ?</h4>
                            <p class="text-muted fs-14 mb-4">La suppression de votre tâche supprimera tous
                                vos informations de notre base de données.</p>
                            <div class="hstack gap-2 justify-content-center remove">
                                <button class="btn btn-link btn-ghost-success fw-medium text-decoration-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Fermer</button>
                                <button class="btn btn-danger" id="delete-record">
                                    Supprimer</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end delete modal -->

        <!--add record modal-->
        <div class="modal fade zoomIn" id="bookModal" tabindex="-1" aria-labelledby="bookModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content border-0">
                    <div class="modal-header p-3 bg-primary">
                        <h5 class="modal-title text-white" id="bookModalLabel"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                    </div>
                    <form id="bookForm">
                        @csrf
                        <div class="modal-body">
                            <input type="hidden" id="tasksIdx">
                            <div class="row g-3">
                                <input type="hidden" id="bookId">
                                <div class="col-lg-12">
                                    <label class="form-label" for="title">Titre</label>
                                    <input type="text" class="form-control" id="title" name="title" required>
                                    <div id="error-title" class="invalid-feedback"></div>
                                </div>
                                <div class="col-lg-12">
                                    <label class="form-label" for="author">Auteur</label>
                                    <input type="text" class="form-control" id="author" name="author" required>
                                    <div id="error-author" class="invalid-feedback"></div>
                                </div>
                                <div class="col-lg-12">
                                    <label class="form-label" for="publisher">Éditeur</label>
                                    <input type="text" class="form-control" id="publisher" name="publisher">
                                    <div id="error-publisher" class="invalid-feedback"></div>
                                </div>
                                <div class="col-lg-12">
                                    <label class="form-label" for="year">Année</label>
                                    <input type="number" class="form-control" id="year" name="year">
                                    <div id="error-number" class="invalid-feedback"></div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" id="close-modal" data-bs-dismiss="modal">Annuler</button>
                                <button type="submit" class="btn btn-success" id="submitBtn">Enregistrer</button>
                                <!-- <button type="button" class="btn btn-success" id="edit-btn">Update Task</button> -->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end modal-->
    </div>
    <!-- container-fluid -->
</div>
<!-- End Page-content -->
@endsection

@section('scripts')
<!-- JAVASCRIPT -->
<script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
<script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script>
<script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
<script src="{{ asset('assets/js/plugins.js') }}"></script>
<!-- App js -->
<script src="{{ asset('assets/js/app.js') }}"></script>



{{-- affiches les erreurs --}}
<!-- prismjs plugin -->
<script src="{{ asset('assets/libs/prismjs/prism.js') }}"></script>
<script src="{{ asset('assets/libs/list.js/list.min.js') }}"></script>
<script src="{{ asset('assets/libs/list.pagination.js/list.pagination.min.js') }}"></script>

<!-- listjs init -->
<script src="{{ asset('assets/js/pages/listjs.init.js') }}"></script>


<script>
    // Ajoutez ici votre code JavaScript pour gérer les opérations CRUD avec AJAX
    $(document).ready(function() {
        // $('#myTable').DataTable({
        //     dom: '<"toolbar">Blfrtip'
        //     , buttons: [
        //         // {
        //         //     extend: 'copy',
        //         //     className: 'btn btn-primary'
        //         // },
        //         // {
        //         //     extend: 'csv',
        //         //     className: 'btn btn-primary',
        //         //     charset: 'UTF-8',
        //         //     bom: true
        //         // },
        //         {
        //             extend: 'excel'
        //             , className: 'btn btn-primary'
        //         }
        //         // ,
        //         // {
        //         //     extend: 'pdf',
        //         //     className: 'btn btn-primary'
        //         // },
        //         // {
        //         //     extend: 'print',
        //         //     className: 'btn btn-primary'
        //         // }
        //     ],
        //     // lengthMenu: [[10, 30, 50, 100, 200, -1], [10, 30, 50, 100, 200, "Tout"]],
        //     // pageLength: 10,
        //     initComplete: function() {
        //         $("div.toolbar").html('<input type="search" class="form-control" placeholder="Recherche" style="display:inline-block; width:auto;">');
        //         $("div.dataTables_filter").css("display", "none");
        //     }
        // });

        // $('.toolbar input').on('keyup change', function() {
        //     $('#myTable').DataTable().search(this.value).draw();
        // });

        let action = '';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#bookModal').on('show.bs.modal', function(event) {
            const button = $(event.relatedTarget);
            action = button.data('action');

            if (action === 'edit') {
                const id = button.data('id');
                $(this).find('.modal-title').text('Modifier un livre');
                getBook(id);
            } else {
                console.log('Titre ok');
                $(this).find('.modal-title').text('Ajouter un livre');
                resetForm();
            }
        });

        $('#bookForm').on('submit', function(event) {
            event.preventDefault();

            if (action === 'edit') {
                updateBook();
            } else {
                console.log('Création en cours...');
                createBook();
                console.log('Création ok...');
            }
        });

        $('.remove-item-btn').click(function() {
            let id = $(this).data('bookId');
            // console.log('deleteBook called with id:', id);
            $('#delete-record').data('bookId', id);
            $('#deleteOrder').modal('show');
        });
    });

    function getBook(id) {
        $.ajax({
            url: `/backend/books/${id}`
            , type: 'GET'
            , success: function(data) {
                $('#bookId').val(data.id);
                $('#title').val(data.title);
                $('#author').val(data.author);
                $('#publisher').val(data.publisher);
                $('#year').val(data.year);
            }
        });
    }

    function createBook() {
        $.ajax({
            url: '/backend/books'
            , type: 'POST'
            , data: $('#bookForm').serialize()
            // , data: data
            , success: function(response) {
                (response);
                if (response.status === 'success') {
                    toastr.options = {
                        "closeButton": true
                        , "progressBar": true
                    }
                    toastr.success('Livre ajouté avec succèss dans le système!.', 'Ajout réussi.', {
                        timeOut: 9000
                    });
                } else {
                    toastr.error('Une erreur s\'est produite');
                }
                location.reload();
            }
            , error: function(jqXHR, textStatus, errorThrown) {
                handleValidationErrors(jqXHR);
            }
        });
    }

    function updateBook() {
        const id = $('#bookId').val();

        $.ajax({
            url: `/backend/books/${id}`
            , type: 'PUT'
            , data: $('#bookForm').serialize()
            , success: function(response) {
                (response);
                if (response.status === 'info') {
                    toastr.options = {
                        "closeButton": true
                        , "progressBar": true
                    }
                    toastr.info('Livre modifié avec succèss dans le système!.', 'Modification réussie.', {
                        timeOut: 9000
                    });
                } else {
                    toastr.error('Une erreur s\'est produite');
                }
                location.reload();
            }
            , error: function(jqXHR, textStatus, errorThrown) {
                handleValidationErrors(jqXHR);
            }
        });
    }

    $('#delete-record').click(function() {
        // console.log('Delete button clicked');
        let id = $(this).data('bookId');
        // console.log('Book ID:', id);
        if (id) {
            $.ajax({
                url: `/backend/books/${id}`
                , type: 'DELETE'
                , success: function(response) {
                    if (response.status === 'warning') {
                        toastr.options = {
                            "closeButton": true
                            , "progressBar": true
                        }
                        toastr.warning('Livre supprimé avec succès dans le système !', 'Suppression réussie', {
                            timeOut: 9000
                        });
                    } else {
                        toastr.error('Une erreur s\'est produite');
                    }
                    location.reload();
                }
                , error: function(jqXHR, textStatus, errorThrown) {
                    handleValidationErrors(jqXHR);
                }
            });
        }
        $('#deleteOrder').modal('hide');
    });


    function resetForm() {
        $('#bookId').val('');
        $('#title').val('');
        $('#author').val('');
        $('#publisher').val('');
        $('#year').val('');

        clearValidationErrors();
    }

    function handleValidationErrors(jqXHR) {
        clearValidationErrors();

        const errors = jqXHR.responseJSON.errors;

        for (const field in errors) {
            $(`#error-${field}`).text(errors[field]).show();
            $(`#${field}`).addClass('is-invalid');
        }
    }

    function clearValidationErrors() {
        $('.invalid-feedback').text('').hide();
        $('.form-control').removeClass('is-invalid');
    }

</script>
@endsection