@php use Carbon\Carbon; @endphp
<x-main>
    <x-slot name="title">
        Factures
    </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') }}">
    </x-slot>



    <x-slot name="subHeaderTitle">
        Factures
    </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" style="color: {{$backgroundColor}}"></i>
                    </span>
                    <h3 class="card-label">Liste des Factures</h3>
                </div>
            </div>
            <div class="card-body">
                <form class="mb-15" action="{{ route('bills.index') }}" METHOD="GET">
                    @php
                        $defaultDate = Carbon::now()->subMonths(3)->format('Y-m-d'); // Default: 3 months ago

    $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 factures</label>
                                    <select class="form-control" id="exampleFormControlSelect1">
                                        <option value="1">Factures Médicaments</option>
                                        <option value="2">Factures 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
                    <br>
                    <table class="table align-middle" id="kt_datatable" style="margin-top: 13px !important;width: 100%">
                        <thead class="">
                        <tr class="fw-bolder text-muted bg-dynamic text-white">
                            <th class="text-center">N° Facture</th>
                            <th class="text-center">Date Facturation</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">Timbre</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-dynamic">
                            <th class="text-center">N° Facture</th>
                            <th class="text-center">Date Facturation</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">Timbre</th>
                            <th class="text-center">Total TTC</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </tfoot>
                    </table>
                </form>
            </div>
        </div>
    </x-slot>

    <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>
            $(document).ready(function () {
                @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 defaultType;
                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,
                    draw: 2,
                    start: 10,
                    length: 10,
                    order: [],
                    ajax: {
                        url: "{{ route('bills.index') }}",
                        type: "GET",
                        data: function (d) {
                            d.type = defaultType;  // Add type to the request payload
                            d.date = $('#date_du').val(); // Pass the selected date to the server

                        }
                    },
                    columns: [
                        {
                            data: 'n0_fact',
                            name: 'n0_fact',
                            render: function (data, type, row) {
                                // Check if 'n0_fact' starts with 'CR'
                                if (data.startsWith('AR')) {
                                    // Apply a specific style to make text closer together
                                    return '<h5 class="text-danger">' + data + '</h5>';
                                }
                                return data;
                            }
                        },
                        {data: 'DATE_FACT', name: 'DATE_FACT', className: 'text-center'},
                        {data: 'MONTHTBRUT', name: 'MONTHTBRUT', className: 'text-right'},
                        {data: 'montremise', name: 'montremise', className: 'text-right'},
                        {data: 'montht', name: 'montht', className: 'text-right'},
                        {
                            data: 'monttva', name: 'monttva', className: 'text-right',
                            render: function (data, type, row) {
                                return (row.monttva == '0,000') ? '' : row.monttva;
                            }
                        },
                        {data: 'timbre', name: 'timbre', className: 'text-right'},
                        {data: 'monttc', name: 'monttc', className: 'text-right'},
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                            render: function (data, type, row) {
                                var formType = $('#exampleFormControlSelect1').val() ?? 2;
                                var url = "{{ route('bill.show', [
        'bill' => ':n0_fact',
        'type' => ':dataType',
        'date' => ':date',
        'brut' => ':MONTHTBRUT',
        'remise' => ':montremise',
        'ht' => ':montht',
        'tva' => ':monttva',
        'timbre' => ':timbre',
        'ttc' => ':monttc',
        'nature' => ':NATURE',
    ]) }}";
                                // alert(formType)
                                url = url.replace(':n0_fact', row.n0_fact)
                                    .replace(':dataType', formType)
                                    .replace(':date', row.DATE_FACT)
                                    .replace(':MONTHTBRUT', row.MONTHTBRUT)
                                    .replace(':montremise', row.montremise)
                                    .replace(':montht', row.montht)
                                    .replace(':monttva', row.monttva)
                                    .replace(':timbre', row.timbre)
                                    .replace(':monttc', row.monttc)
                                    .replace(':NATURE', row.NATURE);

                                // Removed btn-block class and made it more compact
                                return '<a href="' + url + '" class="btn p-0"><i class="far fa-eye" style="color: {{$backgroundColor}}"></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>