<link href="{{ asset('css/components/tables/entity-tables.css') }}" rel="stylesheet">
<link href="{{ asset('css/components/custom/toastify.css') }}" rel="stylesheet">

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

@extends('adminlte::page')
@section('plugins.Datatables',true)

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

@section('content')
    {{-- Styles --}}
    <style>
        /* Queries */
            @media (min-width: 576px) {
                .modal-dialog {
                    max-width: 530px;
                    margin: 1.75rem auto;
                }
            }
    </style>

    {{-- 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']['branches'] }}
                    </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']['branch'] }}
                    </button>
                </div>
            </div>

            {{-- Table Structure --}}
            <div class="mt-4 mb-5 table-responsive">
                <table class="table text-center cardtable" id="tax_branch_table">
                    <thead>
                        <tr class="cardtabletr">
                            <th>{{ __("entity_fields")['common']['legal_name'] }}</th>
                            <th scope="col">{{ __("entity_fields")['common']['email'] }}</th>
                            <th width="10%">{{ __("entity_fields")['common']['zip_compact'] }}</th>
                            <th scope="col">{{ __("entity_fields")['common']['sample_address'] }}</th>
                            <th width="15%">{{ __('entity_fields')['common']['actions'] }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        @include('invoicing.branches.components.tax-branch-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>
      //* Table Controller
        $(document).ready(function () {
            $('#tax_branch_table').DataTable({
                language: getDataTableLanguageConfig(),
                processing: false,
                serverSide: true,
                ajax: {
                    url: "{{ route('tax-branches.index') }}",
                },
                columns: [
                    { data: 'legal_name', name: 'legal_name' },
                    { data: 'email', name: 'email' },
                    { data: 'zip', name: 'zip' },
                    {
                        data: 'sample_address', name: 'sample_address',
                        searchable: false, orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: false,
                        orderable: false
                    },
                ]
            });
        });

      //* Table Data Cycle
        function cargarTabla() {
            $('#tax_branch_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();
        }

    </script>

@endsection
