@php
    use Carbon\Carbon;

    $configValue = \App\Models\Configuration::query()
        ->where('label', 'Configuration modules')
        ->first();

    $decodedConfig = json_decode($configValue?->value ?? '{}', true);

    $paraModule = (bool) ($decodedConfig['para'] ?? false);
    $onlyPara = (bool) ($decodedConfig['onlypara'] ?? false);
    $clientAccess = (int) (auth()->user()->client->all_products ?? 0);

    $defaultDate = request('date') ?? Carbon::now()->subMonths(3)->format('Y-m-d');
@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') }}">

        <style>
            .invoice-filter-panel {
                background: #ffffff;
                border: 1px solid #eef0f5;
                border-radius: 10px;
                padding: 18px 20px;
                margin-bottom: 20px;
            }

            .invoice-filter-panel .form-group {
                margin-bottom: 0;
            }

            .filter-label {
                font-weight: 700;
                color: #2f3044;
                margin-bottom: 8px;
                display: block;
            }

            .btn-filter {
                height: 42px;
                min-width: 120px;
                border: none;
                border-radius: 6px;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
            }

            .btn-filter:hover {
                opacity: 0.9;
            }

            .table-zone {
                margin-top: 0 !important;
            }

            #kt_datatable {
                width: 100% !important;
                margin-top: 0 !important;
            }

            #kt_datatable_wrapper {
                margin-top: 0 !important;
            }

            .dataTables_length,
            .dataTables_filter {
                margin-bottom: 12px;
            }

            .dataTables_filter input {
                height: 36px;
                border-radius: 5px;
                border: 1px solid #e4e6ef;
                padding: 6px 10px;
            }

            .dataTables_length select {
                height: 36px;
                border-radius: 5px;
                border: 1px solid #e4e6ef;
                padding: 4px 8px;
            }

            .bg-dynamic {
                background-color: {{ $backgroundColor }} !important;
            }

            @media (max-width: 767px) {
                .invoice-filter-panel {
                    padding: 15px;
                }

                .btn-filter {
                    width: 100%;
                    margin-top: 5px;
                }
            }
        </style>
    </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">

                {{-- FILTERS --}}
                <div class="invoice-filter-panel">
                    <div class="row align-items-end">

                        @if ($paraModule && !$onlyPara && $clientAccess)
                            <div class="col-lg-3 col-md-4 col-sm-12 mb-3 mb-lg-0">
                                <div class="form-group">
                                    <label for="exampleFormControlSelect1" class="filter-label">
                                        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>
                            </div>
                        @endif

                        <div class="col-lg-3 col-md-4 col-sm-12 mb-3 mb-lg-0">
                            <div class="form-group">
                                <label for="date_du" class="filter-label">
                                    À partir de la date suivante :
                                </label>
                                <input type="date"
                                       name="date"
                                       id="date_du"
                                       value="{{ $defaultDate }}"
                                       class="form-control border-primary rounded">
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4 col-sm-12">
                            <button type="button"
                                    id="btn_filter"
                                    class="btn btn-filter"
                                    style="background-color: {{ $backgroundColor }}">
                                <i class="fas fa-download text-white"></i>
                                <span class="text-white">Charger</span>
                            </button>
                        </div>

                    </div>
                </div>

                {{-- TABLE --}}
                <div class="table-zone table-responsive">
                    <table class="table align-middle" id="kt_datatable">
                        <thead>
                        <tr class="fw-bolder text-muted bg-dynamic text-white">
                            <th class="text-center text-white">N° Facture</th>
                            <th class="text-center text-white">Date Facturation</th>
                            <th class="text-center text-white">Total Brut</th>
                            <th class="text-center text-white">Total Remise</th>
                            <th class="text-center text-white">Total HT</th>
                            <th class="text-center text-white">Total TVA</th>
                            <th class="text-center text-white">Timbre</th>
                            <th class="text-center text-white">Total TTC</th>
                            <th class="text-center text-white">RS</th>
                            <th class="text-center text-white">Action</th>
                        </tr>
                        </thead>

                        <tbody></tbody>

                        <tfoot>
                        <tr class="fw-bolder text-muted bg-dynamic">
                            <th class="text-center text-white">N° Facture</th>
                            <th class="text-center text-white">Date Facturation</th>
                            <th class="text-center text-white">Total Brut</th>
                            <th class="text-center text-white">Total Remise</th>
                            <th class="text-center text-white">Total HT</th>
                            <th class="text-center text-white">Total TVA</th>
                            <th class="text-center text-white">Timbre</th>
                            <th class="text-center text-white">Total TTC</th>
                            <th class="text-center text-white">RS</th>
                            <th class="text-center text-white">Action</th>
                        </tr>
                        </tfoot>
                    </table>
                </div>

            </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 () {
                const paraModule = {{ Js::from($paraModule) }};
                const onlyPara = {{ Js::from($onlyPara) }};
                const clientAccess = {{ Js::from($clientAccess) }};

                let defaultType = 1;

                if (paraModule && onlyPara) {
                    defaultType = 2;
                } else if (paraModule) {
                    defaultType = clientAccess === 1 ? 1 : 2;
                } else {
                    defaultType = 1;
                }

                const table = $('#kt_datatable').DataTable({
                    language: {
                        url: "https://cdn.datatables.net/plug-ins/1.10.22/i18n/French.json"
                    },
                    processing: true,
                    serverSide: true,
                    pageLength: 10,
                    order: [],
                    ajax: {
                        url: "{{ route('bills.index') }}",
                        type: "GET",
                        data: function (d) {
                            d.type = defaultType;
                            d.date = $('#date_du').val();
                        }
                    },
                    columns: [
                        {
                            data: 'n0_fact',
                            name: 'n0_fact',
                            className: 'text-center',
                            render: function (data, type, row) {
                                const invoiceNumber = String(data ?? '');

                                if (invoiceNumber.startsWith('AR')) {
                                    return '<h5 class="text-danger mb-0">' + invoiceNumber + '</h5>';
                                }

                                return invoiceNumber;
                            }
                        },
                        {
                            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: 'RETS',
                            name: 'RETS',
                            className: 'text-right'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                            render: function (data, type, row) {
                                const formType = $('#exampleFormControlSelect1').length
                                    ? $('#exampleFormControlSelect1').val()
                                    : defaultType;

                                let 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',
                                    'rets' => ':RETS',
                                ]) }}";

                                url = url.replace(':n0_fact', encodeURIComponent(row.n0_fact ?? ''))
                                    .replace(':dataType', encodeURIComponent(formType ?? ''))
                                    .replace(':date', encodeURIComponent(row.DATE_FACT ?? ''))
                                    .replace(':MONTHTBRUT', encodeURIComponent(row.MONTHTBRUT ?? ''))
                                    .replace(':montremise', encodeURIComponent(row.montremise ?? ''))
                                    .replace(':montht', encodeURIComponent(row.montht ?? ''))
                                    .replace(':monttva', encodeURIComponent(row.monttva ?? ''))
                                    .replace(':timbre', encodeURIComponent(row.timbre ?? ''))
                                    .replace(':monttc', encodeURIComponent(row.monttc ?? ''))
                                    .replace(':NATURE', encodeURIComponent(row.NATURE ?? ''))
                                    .replace(':RETS', encodeURIComponent(row.RETS ?? ''));

                                return `
                                    <a href="${url}" class="btn p-0" title="Voir détails">
                                        <i class="far fa-eye" style="color: {{ $backgroundColor }}"></i>
                                    </a>
                                `;
                            }
                        }
                    ]
                });

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

                $('#btn_filter').on('click', function () {
                    const dateValue = $('#date_du').val();

                    if (!dateValue) {
                        Swal.fire({
                            text: "Vous devez choisir une date pour récupérer les informations.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: "btn font-weight-bold btn-light"
                            }
                        });

                        return;
                    }

                    table.ajax.reload();
                });
            });
        </script>
    </x-slot>
</x-main>