<!-- resources/views/your-page.blade.php -->
@extends('layouts.theme1')

@section('title', 'Dashboard')

@section('content')
    <!-- Contenu de votre page -->
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>

    <div class="row">
        <div class="col-12">
            <div class="card">
            <div class="border-bottom title-part-padding">
                <h4 class="card-title mb-0">licenses</h4>
            </div>
            <div class="card-body">
                <h6 class="card-subtitle mb-3">
                Un code est générer automatiquement, dans le formulaire ont à fixer à <code> 6 </code> mois . 
                </h6>

                <a class="btn btn-success" href="javascript:void(0)" id="openModalBtn"> Create New license</a>

                <div class="table-responsive">
                <table id="licenses-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>

                            <th>Payment</th>
                            <th>code</th>

                            <th>phone</th>
                            <th>utilisé</th>

                            <th>price</th>
                            <th>active_date</th>

                            <th>expire_date</th>
                            <th>coupon</th>
 
                            <th>application_id</th>

                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                </div>
            </div>
            </div>
        </div>
    </div>

    <!-- Modal Add products -->
    <!-- Modal pour ajouter/modifier un projet -->
    <div class="modal fade" id="addlicenseModal" tabindex="-1" role="dialog" aria-labelledby="addlicenseModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title text-white">Ajouter une license mobile</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="notes-box">
                        <div class="notes-content">
                            <form action="javascript:void(0);" id="addlicenseForm">
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <div class="note-title">
                                            <label for="payment">Sélectionnez un mode de paiement</label>
                                            <select id="payment" class="form-control" required>
                                                <option value="CASH">CASH</option>
                                                <option value="Orange - manuelle">Orange - MANUELLE</option>
                                                <option value="telmob - manuelle">Telmob - MANUELLE</option>
                                            </select>
                                        </div>
                                    </div>                   
                                  

                                    <div class="col-md-12 mb-3">
                                        <div class="note-title">
                                            <label>phone</label>
                                            <input type="text" id="phone" class="form-control" placeholder="Phone">
                                        </div>
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <div class="note-title">
                                            <label>price</label>
                                            <input type="text" id="price" class="form-control" placeholder="price">
                                        </div>
                                    </div>           

                                    <div class="col-md-12 mb-3">
                                        <div class="note-title">
                                            <label for="expire_date">Date et heure d'expiration</label>
                                            <input type="datetime-local" id="expire_date" name="expire_date" class="form-control">
                                        </div>
                                    </div>


                                    <div class="col-md-12 mb-3">
                                        <div class="note-title">
                                            <label>coupon</label>
                                            <input type="text" id="coupon" class="form-control" placeholder="Coupon">
                                        </div>
                                    </div>                            

                                    <div class="col-md-12 mb-3">
                                        <label class="mr-sm-2" for="application_id">Select Application</label>
                                        <select 
                                        class="select2 form-control custom-select"
                                        style="width: 100%; height: 36px"
                                        id="application_id" 
                                        name="application_id"
                                        >
                                            <option value="" disabled>Choose...</option>
                                            @foreach ($applications as $application)
                                                <option value="{{ $application->id }}">{{ $application->libelle }}</option>
                                            @endforeach
                                        
                                        </select>
                                        
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
                    <button id="btn-add-license" class="btn btn-info">Ajouter</button>
                </div>
            </div>
        </div>
    </div>


    @include('admin.delete_modal')

    @include('admin.licenses.edit_modal')



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>


    <script>
        var licenseValidityInMonths = {{ $licenseValidityInMonths }};

        expireDate = new Date();
        expireDate.setMonth(expireDate.getMonth() + licenseValidityInMonths);                       
        var formattedDate = expireDate.toISOString().slice(0, 16);
        $('#expire_date').val(formattedDate);

        $(document).ready(function() {


            $('#licenses-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('admin.licenses.indexbyser') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'payment', name: 'payment' },
                    { data: 'code', name: 'code' },
                    { data: 'phone', name: 'phone' },
                    { data: 'used', name: 'used' },
                    { data: 'price', name: 'price' },
                    { data: 'active_date', name: 'active_date' },
                    { data: 'expire_date', name: 'expire_date' },
                    { data: 'coupon', name: 'coupon' },
                 
                    { data: 'application_id', name: 'application_id' },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).attr('data-id', rowData.id); // Ajoutez un attribut data-id à la cellule d'action
                        }
                    },
                ]
            });

            $('#licenses-table tbody').on('click', 'tr', function () {
                var licenseId = $(this).find('td[data-id]').data('id');
                console.log('ID de l\'élément sélectionné :', licenseId);
                // Vous pouvez maintenant utiliser licenseId comme nécessaire
            });

            // Gestionnaire d'événement pour ouvrir le modal
            $('#openModalBtn').on('click', function () {
                $('#addlicenseModal').modal('show');
                $('#expire_date').val(formattedDate);
            });

            // Gestionnaire d'événement pour fermer le modal
            $('#addlicenseModal').on('hidden.bs.modal', function () {
                // Réinitialisez le formulaire lorsque le modal est fermé
                $('#addlicenseForm')[0].reset();
            });

            $('#editlicenseModal').on('hidden.bs.modal', function () {
                // Réinitialisez le formulaire lorsque le modal est fermé
                $('#editlicenseModal')[0].reset();
            });

            // Gestionnaire d'événement pour le formulaire AJAX
            $('#btn-add-license').on('click', function () {
                // Récupérer les valeurs du formulaire
                var formData = {
                    payment: $('#payment').val(),
                    phone: $('#phone').val(),
                    coupon: $('#coupon').val(),
                    price: $('#price').val(),
                    expire_date: $('#expire_date').val(),
                    application_id: $('#application_id').val(),
                    _token: $('meta[name="csrf-token"]').attr('content'), // Récupérer le jeton CSRF depuis la balise meta
                };

                // Effectuer une requête AJAX
                $.ajax({
                    url: '{{ route('admin.licenses.store') }}', // Assurez-vous d'ajuster la route
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        // Mettez à jour le DataTable
                        $('#licenses-table').DataTable().ajax.reload();
                        // Fermez le modal
                        $('#addlicenseModal').modal('hide');
                    },
                    error: function (error) {
                        console.error('Erreur AJAX:', error);
                        // Gérez l'erreur ici
                    }
                });
            });

            // Gestionnaire d'événement pour le clic sur le bouton de suppression
            $('#licenses-table tbody').on('click', '.deletelicense', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var licenseId = $(this).data('id');
                
                // Ouvrir le modal de confirmation
                $('#deleteConfirmationModal').modal('show');

                // Gestionnaire d'événement pour le clic sur le bouton de confirmation de suppression
                $('#confirmDelete').on('click', function () {
                    // Fermer le modal de confirmation
                    $('#deleteConfirmationModal').modal('hide');

                    // Effectuer la suppression en utilisant AJAX
                    $.ajax({
                        url: '/admin/licenses/' + licenseId,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function (response) {
                            console.log(response.message);
                            $('#licenses-table').DataTable().ajax.reload();
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });

            // Gestionnaire d'événement pour le clic sur le bouton d'édition
            $('#licenses-table tbody').on('click', '.editlicense', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var licenseId = $(this).data('id');

                // Effectuer une requête AJAX pour charger les données du projet
                $.ajax({
                    url: '/admin/licenses/' + licenseId + '/edit',
                    type: 'GET',
                    success: function (license) {
                        // Pré-remplir le formulaire d'édition avec les données du projet
                        $('#edit-payment').val(license.payment);

                        $('#edit-phone').val(license.phone);
                        $('#edit-price').val(license.price);
                        $('#edit-expire-date').val(license.expire_date);
                        $('#edit-coupon').val(license.coupon);
                        $('#edit-application-id').val(license.application_id);

                        $('#edit-disabled').prop('checked', license.disabled);

                        if (license.expire_date !== null) {
                            expireDate = new Date(license.expire_date);
                        } else {
                            expireDate = new Date();
                            expireDate.setMonth(expireDate.getMonth() + licenseValidityInMonths);
                        }                        
                        var formattedDate = expireDate.toISOString().slice(0, 16);
                        $('#edit-expire-date').val(formattedDate);

                        // Ouvrir le modal d'édition
                        $('#editlicenseModal').modal('show');
                    },
                    error: function (error) {
                        console.error('Erreur AJAX:', error);
                        // Gérez l'erreur ici
                    }
                });

                // Gestionnaire d'événement pour la soumission du formulaire d'édition
                $('#editlicenseForm').on('submit', function (event) {
                    event.preventDefault();

                    var formData = {
                        payment: $('#edit-payment').val(),
                        code: $('#edit-code').val(),
                        used: $('#edit-used').val(),
                        phone: $('#edit-phone').val(),
                        price: $('#edit-price').val(),
                        active_date: $('#edit-active-date').val(),
                        expire_date: $('#edit-expire-date').val(),
                        coupon: $('#edit-coupon').val(),
                        client_id: $('#edit-client-id').val(),
                        dealer_id: $('#edit-dealer-id').val(),
                        application_id: $('#edit-application-id').val(),


                        disabled: $('#edit-disabled').is(':checked') ? 1 : 0,
                        _token: $('meta[name="csrf-token"]').attr('content'), // Récupérer le jeton CSRF depuis la balise meta
                    };
                    // Effectuer une requête AJAX pour mettre à jour le projet
                    $.ajax({
                        url: '/admin/licenses/' + licenseId,
                        type: 'PUT',
                        data: formData,
                        success: function (response) {
                            console.log(response.message);
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                            $('#licenses-table').DataTable().ajax.reload();

                            // Fermer le modal d'édition
                            $('#editlicenseModal').modal('hide');
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });



            //Fin des fonctions
        });

        $(document).on('click', '#createNewlicense', function() {
            $('#ajaxModel').modal('show');
        });
                
    </script>
@endsection
