@extends('models')
@section('titre-page', 'Transitaire')
@section('content-body')
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Fiches</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Transitaire</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row mt-xl-2">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row">
                        <div class="row p-0 m-0 d-flex align-items-center my-2">
                            <div
                                class="offset-xl-4 offset-lg-6 col-xl-8 col-lg-6 pe-0 d-flex justify-content-end align-items-center">

                                <a class="btn btn-success " id="newTransitaire" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-success" data-bs-placement="top"
                                    title="Nouveau Transitaire">
                                    <i class='bx bxs-check-circle'></i>
                                    Valider
                                </a>
                                <a class="btn btn-warning" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-warning" data-bs-placement="top"
                                    title="Modifier le Transitaire" id="btnEditTransitaire" style="display:none;">
                                    <span class="bx bxs-edit" style="font-size:16px;">
                                        Modifier
                                    </span>
                                </a>
                                <a class="btn btn-danger ms-2" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-dark" data-bs-placement="bottom"
                                    title="Annuler l'opération" id="annulerTransitaire">
                                    <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                    Annuler
                                </a>
                            </div>
                        </div>
                    </div>
                    <form id="formTransitaire">
                        <div class="row mb-2">
                            <div class="col-xl-6">
                                <p class="text-muted mb-0">Nom du Transitaire</p>
                                <input type="text" class="form-control text-uppercase" id="nomTransitaire"
                                    name="nomTransitaire">
                                <input type="number" class="form-control" id="IDTRANSITAIRE" name="IDTRANSITAIRE"
                                    style="display:none;">
                            </div>
                            <div class="col-xl-3">
                                <p class="text-muted mb-0">Montant forfait maritime</p>
                                <input type="number" class="form-control text-uppercase text-center" id="montantMaritime" name="montantMaritime" value="0" min="0">
                            </div>
                            <div class="col-xl-3">
                                <p class="text-muted mb-0">Montant forfait aérien</p>
                                <input type="number" class="form-control text-uppercase text-center" id="montantAerien" name="montantAerien" value="0" min="0">
                            </div>

                        </div>
                    </form>
                    <div class="table-responsive">
                        <table id="tableTransitaire" class="table table-striped w-100">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center text-light">Action</th>
                                    <th class="text-center text-light">Nom transitaire</th>
                                    <th class="text-center text-light">Montant forfait maritime</th>
                                    <th class="text-center text-light">Montant forfait aerien</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <!-- Script exécuté au chargement de la page -->
    <script>
        var tableTransitaire = $("#tableTransitaire").DataTable({

            bFilter: true,
            language: languageTable,
            pageLength: 25,
            columnDefs: [{
                target: [2, 3],
                className : "text-center"
            }],
            // lengthChange: false,
        })

        function chargerTableBureauAchat() {

            $.ajax({

                url: '{{ route('listingTransitaire') }}',
                beforeSend: progressHandler(),
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.error == false) {
                        tableTransitaire.clear().draw()

                        $.each(response.data, function(key, value) {
                            tableTransitaire.row.add([
                                `<a class="btn btn-sm btn-icon btn-outline-warning me-2" id="editTransitaire" data-id="${value.IDTRANSITAIRE}"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Modifier ce bureau">
                                    <i class="bx bxs-edit" style="font-size : 17px;cursor : pointer;"></i>
                                </a>
                                <a class="btn btn-sm btn-icon btn-outline-danger" id="supTransitaire" data-id="${value.IDTRANSITAIRE}"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Supprimer ce bureau">
                                    <i class="bx bxs-trash" style="font-size : 17px;cursor : pointer;"></i>
                                </a>`,
                                value.NomTransitaire,
                                formatNumberPerf(value.MontantForfaitMaritime),
                                formatNumberPerf(value.MontantForfaitAerien)
                            ])
                        })
                        tableTransitaire.draw()
                    }


                    completeHandler()
                },
                error: function(param) {

                }
            })
        }
        window.addEventListener('load', function() {
            chargerTableBureauAchat()
            placeboutonPreferenceColonne('tableTransitaire','transitaireShowColonne')
            recuperationPreferenceColonneUtilisateur('tableTransitaire','transitaireShowColonne')
        })

        $(document).on('click', '.transitaireShowColonne', function() {
            appliquerPreferenceColonne('tableTransitaire','Transitaire',$(this),'transitaireShowColonne')
        })
    </script>

    <!-- Script -->
    <script>
        // Script de modification
        $(document).on('click', '#editTransitaire', function() {

            let IDTRANSIT = $(this).attr('data-id')

            $.ajax({

                url: '{{ route('transitaire.edit') }}',
                type: 'POST',
                data: {

                    IDTRANSIT: IDTRANSIT,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.error == false) {
                        _('nomTransitaire').value = response.data.NomTransitaire
                        _('IDTRANSITAIRE').value = IDTRANSIT
                        _('montantMaritime').value = parseInt(response.data.MontantForfaitMaritime)
                        _('montantAerien').value = parseInt(response.data.MontantForfaitAerien)

                        _('newTransitaire').style.display = 'none'
                        _('btnEditTransitaire').style.display = ''

                    }
                }
            })
        })

        // Annuler les opération
        _('annulerTransitaire').addEventListener('click', function() {

            _('nomTransitaire').value = ''
            _('IDTRANSITAIRE').value = ''
            _('montantMaritime').value = 0
            _('montantAerien').value = 0

            _('newTransitaire').style.display = ''
            _('btnEditTransitaire').style.display = 'none'
        })

        // éffectuer les modifications
        _('btnEditTransitaire').addEventListener('click', function() {

            if (_('nomTransitaire').value.replace(/\s/g, '') == '') {

                notif('danger', 'Erreur', 'VEUILLEZ SAISIR UN NOM DE TRANSITAIRE')
                _('annulerTransitaire').click()
                return 0
            }

            let formTransitaire = new FormData(_('formTransitaire'))
            formTransitaire.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url: '{{ route('transitaire.update') }}',
                type: 'POST',
                data: formTransitaire,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {

                    if (response.error == false) {

                        if (response.update == false) {
                            notifWarning('Transitaire non modifié !')
                            return 0
                        }

                        _('annulerTransitaire').click()

                        chargerTableBureauAchat()
                        notifSuccess('Transitaire modifié avec succès !!')
                        return 0
                    }
                },
                error: function(response) {
                    notifError(response.messages)
                }
            })
        })

        // Script d'ajout de bureau d'achat
        _('newTransitaire').addEventListener('click', function() {

            if (_('nomTransitaire').value.replace(/\s/g, '') == '') {

                notif('danger', 'Erreur', 'SAISIR UN NOM DE TRANSITAIRE')
                _('nomTransitaire').focus()
                return 0
            }


            let formTransitaire = new FormData(_('formTransitaire'))
            formTransitaire.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url: '{{ route('transitaire.store') }}',
                type: 'POST',
                data: formTransitaire,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {

                    if (response.error == false) {

                        _('annulerTransitaire').click()

                        chargerTableBureauAchat()
                        notif('success', 'Succès', 'TRANSITAIRE AJOUTÉ')
                        return 0
                    }
                    notif('danger', 'Erreur', 'CE TRANSITAIRE EXISTE DÉJÀ !!')
                },
                error: function(param) {
                    notifError(response.messages)
                }
            })
        })

        // Script de suppréssion
        $(document).on('click', '#supTransitaire', function() {

            let IDTRANSIT = $(this).attr('data-id')

            confirmMdp('{{ csrf_token() }}', () =>
                $.ajax({

                    url: '{{ route('transitaire.destroy') }}',
                    type: 'POST',
                    data: {
                        IDTRANSIT: IDTRANSIT,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {

                            if (response.delete == false) {

                                notif('warning', 'Attention', response.messges)
                                return 0
                            }

                            _('annulerTransitaire').click()

                            chargerTableBureauAchat()
                            notif('success', 'Succès', 'SUPPRESSION ÉFFECTUÉE')
                            return 0
                        }

                        notif('danger', 'Erreur',
                            'Suppression impossible, le transitaire sélectionné a des relations dans le système !'
                        )
                    },
                    error: function(response) {
                        notifError(response.messages)
                    }
                }), "Veuillez saisir votre mot de passe pour confirmer la suppression du transitaire")

        })
    </script>
@endsection