@php use Carbon\Carbon; @endphp
<x-main>
    <x-slot name="title">
        Liste des bons des livraisons
    </x-slot>
    <x-slot name="cssSlot">
        <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
        <style>

            @php
                $colour = \App\Models\Configuration::query()->where('label', 'color')->first()->value;
                $textColour = \App\Models\Configuration::query()->where('label', 'colortext')->first()->value;
            @endphp

            table.dataTable tbody td {
                padding-bottom: 1px !important;
                padding-top: 1px !important;

            }
            table.dataTable thead tr th{
                background-color: {{$colour}};
                color: {{$textColour}} !important;
            }
            table.dataTable tfoot tr th{
                background-color: {{$colour}};
                color: {{$textColour}} !important;
            }

        </style>

    </x-slot>

    <x-slot name="subHeaderTitle">
        Liste des bons des livraisons
    </x-slot>
    <x-slot name="bodyContent">
        <div class="card card-custom">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon-notepad text-dynamic"></i>
                    </span>
                    <h3 class="card-label">Liste des Bons de Livraison</h3>
                </div>
            </div>
            <div class="card-body">
                <form class="mb-15" action="{{ route('movements.index') }}" method="GET">
                    @php
                        $defaultDate = Carbon::now()->subMonths(3)->format('Y-m-d'); // Default: 3 months ago
//                        dd($defaultDate);
                            $paraModule = json_decode(\App\Models\Configuration::query()->where('label', 'Configuration modules')->first()->value)->para;
                    @endphp

                    @if ($paraModule)
                        @php
                            $clientAccess = auth()->user()->client->all_products;
                        @endphp

                        @if ($clientAccess)
                            <div class="row align-items-center g-3">
                                <!-- Type des bons de livraisons -->
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <label for="bills" style="font-weight: bold">Type des bons de livraisons</label>
                                    <select class="form-control" id="exampleFormControlSelect1">
                                        <option value="1">BL Médicaments</option>
                                        <option value="2">BL Para</option>
                                    </select>
                                </div>

                                <!-- Input: Date -->
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <label for="date" style="font-weight: bold">À partir de la date suivante:</label>
                                    <input type="date" name="date" id="date_du" value="{{$defaultDate}}" class="form-control border-primary rounded">
                                </div>

                                <!-- Button: Charge -->
                                <div class="col-lg-4 col-md-12 col-sm-12 text-md-start text-center mt-md-0 mt-3">
                                    <br>
                                    <button type="button" class="btn w-100 w-lg-auto" style="background-color: {{$backgroundColor}}">
                                        <i class="fas fa-download text-white"></i> <span class="text-white">charger</span>
                                    </button>
                                </div>
                            </div>
                        @endif
                    @endif
                </form>

                <!--begin: Datatable-->
                <table class="table align-middle" id="kt_datatable" style="margin-top: 13px !important;width: 100%">
                    <thead>
                    <tr class="fw-bolder text-muted bg-light">
                        <th>N° Facture</th>
                        <th>N° BL</th>
                        <th class="text-center">Nature</th>
                        <th class="text-center">Date</th>
                        <th class="text-center">Total Brut</th>
                        <th class="text-center">Total Remise</th>
                        <th class="text-center">Total HT</th>
                        <th class="text-center">Total TVA</th>
                        <th class="text-center">Total TTC</th>
                        <th class="text-center">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                    <tr class="fw-bolder text-muted bg-light">
                        <th>N° Facture</th>
                        <th>N° BL</th>
                        <th>Nature</th>
                        <th>Date</th>
                        <th>Total Brut</th>
                        <th>Total Remise</th>
                        <th>Total HT</th>
                        <th>Total TVA</th>
                        <th>Total TTC</th>
                        <th>Action</th>
                    </tr>
                    </tfoot>
                </table>
                <!--end: Datatable-->
            </div>
        </div>
    </x-slot>
    <script>

    </script>
    <x-slot name="jsSlot">
        <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/additional-methods.min.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/localization/messages_fr.min.js') }}"></script>
        <script>
            $.ajaxSetup({
                async: true,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        </script>

        <x-select2-ajax id="deliveryFormNumber" :length="1" route="api.searchDeliveryFormByNumber" multiple="true"
                        text='item.id_backend'/>
        <script>
            $("#orderNumber").select2({
                language: "fr",
                placeholder: "Saisir un numéro de commande",
                allowClear: true,
                multiple: true,
                cache: false,
                order: [2],
                ajax: {
                    url: '{{ route("api.searchDeliveryFormByOrderNumber") }}',
                    dataType: "json",
                    type: "post",
                    delay: 1000,
                    data: function (term) {
                        return {
                            q: term, // search term
                            "_token": "{{ csrf_token() }}"
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.order_id,
                                    id: item.id
                                }
                            })
                        };
                    }
                },
                templateSelection: function (item) {
                    return item.name || item.text;
                }
            });

            $(document).ready(function () {

                var defaultType;
                @php
                    $configuration = \App\Models\Configuration::query()->where("label", "Configuration modules")->first();
                    $configValues = json_decode($configuration->value);
                    $paraModule = $configValues ? $configValues->para : false;
                    $clientAccess = auth()->user()->client->all_products ?? false;
                    if ($paraModule == '') {
                        $paraModule = false;
                    }
                @endphp
                var type = $('#exampleFormControlSelect1').val() ;

                // Determine the default type based on config
                if (!{{ $paraModule ? 'true' : 'false' }}) {
                    defaultType = 1;
                } else {
                    if ({{ $clientAccess ? 'true' : 'false' }}) {
                        defaultType = 1;
                    } else {
                        defaultType = 2;
                    }
                }

                var table = $('#kt_datatable').DataTable({
                    language: {
                        url: "https://cdn.datatables.net/plug-ins/1.10.22/i18n/French.json"
                    },
                    processing: true,
                    serverSide: true,
                    ordering: true,
                    order: [[3, 'desc']], // Default sort by date column
                    ajax: {
                        url: "{{ route('movements.index') }}",
                        type: "GET",
                        data: function (d) {
                            d.type = defaultType;
                            d.dataType = type;
                            d.date = $('#date_du').val(); // Pass the selected date to the server

                        }
                    },
                    columns: [
                        {
                            data: 'NFACT',
                            name: 'NFACT',
                            orderable: true
                        },
                        {
                            data: 'NUMBON',
                            name: 'NUMBON',
                            orderable: true
                        },
                        {
                            data: 'KNAT',
                            name: 'KNAT',
                            orderable: true
                        },
                        {
                            data: 'DATEMVT',
                            name: 'DATEMVT',
                            className: 'text-center',
                            orderable: true,
                            render: function(data, type, row) {
                                // For sorting, convert to a sortable format
                                if (type === 'sort') {
                                    // Assuming date is in format DD/MM/YYYY
                                    var parts = data.split('/');
                                    // Return YYYY-MM-DD format for proper sorting
                                    return parts[2] + '-' + parts[1] + '-' + parts[0];
                                }
                                // For display, return the original format
                                return data;
                            }
                        },
                        {
                            data: 'BRUT_HT',
                            name: 'BRUT_HT',
                            className: 'text-right',
                            orderable: true,
                            render: function(data, type, row) {
                                if (type === 'sort') {
                                    // Remove thousand separators and convert comma to dot for sorting
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return data;
                            }
                        },
                        {
                            data: 'REMISE',
                            name: 'REMISE',
                            className: 'text-right',
                            orderable: true,
                            render: function (data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return (row.REMISE == '0,000') ? '' : row.REMISE;
                            }
                        },
                        {
                            data: 'NET_HT',
                            name: 'NET_HT',
                            className: 'text-right',
                            orderable: true,
                            render: function(data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return data;
                            }
                        },
                        {
                            data: 'TOT_TVA',
                            name: 'TOT_TVA',
                            className: 'text-right',
                            orderable: true,
                            render: function (data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return (row.TOT_TVA == '0,000') ? '' : row.TOT_TVA;
                            }
                        },
                        {
                            data: 'TOT_TTC',
                            name: 'TOT_TTC',
                            className: 'text-right',
                            orderable: true,
                            render: function(data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return data;
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                            render: function (data, type, row) {
                                var formType = $('#exampleFormControlSelect1').val() ?? 2;
                                var url = "{{ route('deliveryForm.show', ['form' => ':form', 'type' => ':dataType', 'date' => ':date']) }}";
                                url = url.replace(':form', row.NUMBON)
                                    .replace(':dataType', formType)
                                    .replace(':date', row.DATEMVT);

                                return '<a href="' + url + '" class="btn p-0"><i class="far fa-eye text-dynamic"></i></a>';
                            }
                        }
                    ]
                });

                $('#exampleFormControlSelect1').on('change', function () {
                    var selectedType = $(this).val();
                    defaultType = selectedType;
                    table.ajax.reload();
                });

                $(document).on('click', '.btn-primary', function () {
                    const dateValue = document.getElementById('date_du').value;
                    if(dateValue === ''){
                        Swal.fire({
                            text: "Vous devez choisir une date pour récupérer les informations à partir de cette date. Sinon, les informations affichées par défaut correspondent aux 3 derniers mois.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "ok",
                            customClass: {
                                confirmButton: "btn font-weight-bold btn-light"
                            }
                        }).then(function () {
                            KTUtil.scrollTop();
                        });

                    }else{
                        table.ajax.reload();

                    }
                });

            });


        </script>
    </x-slot>
</x-main>