<link rel="stylesheet" type="text/css" href="{{ asset('css/components/tables/entity-tables.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ asset('css/components/custom/toastify.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ asset('css/pages/shared/otasPages.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/components/custom/select2.css') }}">

{{-- CSS --}}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

{{-- Page --}}
@extends('adminlte::page')
@section('plugins.Datatables',true)

@section('title', __('modules')['dashboard']['invoicing']['prod_servs'])

@section('content')

    {{-- Body --}}
    <div class="col-xs-12">
        <div>
            {{-- Title & Button --}}
            <div class="row cardtitle">
                <div class="col-lg-6 col-md-6">
                    <h3>
                        {{ __('modules')['dashboard']['invoicing']['prod_servs'] }}
                    </h3>
                </div>
                <div class="col-lg-6 col-md-6" align="right">
                    <button type="button" name="create_record" id="create_record" class="boton btn">
                        ✚ {{ __('common_actions')['add'] }} {{ __('entities')['invoicing']['prod_serv'] }}
                    </button>
                </div>
            </div>

            {{-- Table Structure --}}
            <div class="mt-5 mb-5 table-responsive">
                <table class="table text-center cardtable" id="tax_prod_servs_table">
                    <thead>
                        <tr class="cardtabletr">
                            <th scope="col" width="20%">SKU</th>
                            <th scope="col">{{ __("entity_fields")['common']['name'] }}</th>
                            <th scope="col" width="12%">{{ __("entity_fields")['tax_prod_serv']['prod_serv_key'] }}</th>
                            <th scope="col" width="20%">{{ __("entity_fields")['tax_prod_serv']['unit_key'] }}</th>
                            <th scope="col" width="12%">{{ __("entity_fields")['tax_prod_serv']['unit_price'] }}</th>
                            <th scope="col" width="12%">{{ __("entity_fields")['tax_prod_serv']['total_price'] }}</th>
                            <th scope="col" width="13%">{{ __('entity_fields')['common']['actions'] }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        @include('invoicing.products-and-services.components.tax-prod_serv-form')
    </div>

    {{-- Js Control --}}
        <script type="text/javascript">
            "use strict";
        </script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
        <script type="text/javascript" src="{{ asset('js/components/customSelect2.js') }}"></script>

    <script>
      //* Table Controller
        $(document).ready(function () {
            $('#tax_prod_servs_table').DataTable({
                language: getDataTableLanguageConfig(),
                processing: false,
                serverSide: true,
                ajax: {
                    url: "{{ route('tax-prod-servs.index') }}",
                },
                columns: [
                    {
                        data: 'sku',
                        name: 'sku'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'prod_serv_key',
                        name: 'prod_serv_key',
                    },
                    {
                        data: 'unit_measurement',
                        name: 'unit_measurement',
                    },
                    {
                        data: 'unit_price',
                        name: 'unit_price',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'total',
                        name: 'total',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: false,
                        orderable: false
                    }
                ]
            });
        });

      //* Table Data Cycle
        function cargarTabla() {
            $('#tax_prod_servs_table').DataTable().ajax.reload(null, false);
        }

        $(document).ready(function () {
            setInterval(cargarTabla, 120000); //Cada 120 segundos (120 mil milisegundos)
        });

      //* Support Functions
        function showToast(text, gradient_from, gradient_to) {
            Toastify({
                text,
                duration: 4000,
                close: false,
                gravity: "bottom",
                position: "center",
                avatar: "{{ asset('images/toast-info-icon.png') }}",
                style: {
                    background: `linear-gradient(to right, ${gradient_from}, ${gradient_to})`,
                },
            }).showToast();
        }

        function launchSwalToast(type, title) {
            Swal.fire({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000,
                // timerProgressBar: true,
                title,
                type,
            });
        }

        function roundDecimals(input, decimal_limit = 2) {
            let valor = parseFloat(input.value);

            if (isNaN(valor)) valor= 0.0;

            const result = parseFloat(valor.toFixed(decimal_limit));
            const exceedsTwoDecimals = /\d\.\d{3,}/.test(valor);

            if (exceedsTwoDecimals) {
                input.value = Math.abs(result).toFixed(decimal_limit);
            } else {
                input.value = Math.abs(result === 0 ? 0 : valor).toFixed(decimal_limit);
            }

            return;
        }

        function strToStrPercentage(number, {decimals = 2, is_low_decimal = true} = {}) {
            return is_low_decimal
                ? `${(parseFloat(number) * 100).toFixed(decimals)}%`
                : `${parseFloat(number).toFixed(decimals)}%`;
        }

    </script>

@endsection

