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

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

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

@section('title', __('modules')['dashboard']['settings']['establishments'])

@section('content')

    {{-- Styles --}}
    <style>
        /* Text */
        .fw-semi-bold {
            font-weight: 600;
        }

        /* Buttons */
        .configuration {
            margin-top: 2% !important;
        }

        .btn-success {
            background-color: #1ea164;
        }

        /* Spacers */
        .mx-0_5 {
            margin-left: .15rem !important;
            margin-right: .15rem !important;
        }

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

    {{-- Content --}}
    <div>

        {{-- Card Header --}}
        <div class="px-4 py-3 mb-4 cardtitle-response">
            {{-- Title - Actions --}}
            <div class="mb-2 d-flex justify-content-between align-items-center">
                {{-- Title --}}
                <h3 class="mb-0">{{ __('entity_forms')['establishment']['page'] }}</h3>

                {{-- Actions --}}
                <div class="d-flex justify-content-around align-items-center">
                    <button type="button" id="update_photo" class="px-3 py-1 btn-success btn">
                        <i class="fas fa-image"></i> {{ __('entity_forms')['establishment']['logo_button'] }}
                    </button>
                </div>
            </div>

            {{-- SYstem ID --}}
            <p class="mb-0 text-left fw-semi-bold pale-item text-uppercase">
                <span class="harsi-color">SYSTEM ID:</span> {{ $harsi_id }}
            </p>

            {{-- Page indications --}}
            {{-- <p class="mt-3 mb-0 text-left harsi-color">
                <strong>{{ __('common_responses_and_messages')['note'] }}</strong> {{ __('entity_forms')['establishment']['page_indications'] }}
            </p> --}}
        </div>

        {{-- Table --}}
        <div class="table-responsive">
            <table class="table text-center cardtable" id="user_table">
                <thead>
                    <tr class="cardtabletr">
                        <th width="20%">{{ __('entity_fields')['common']['name'] }}</th>
                        <th width="10%">{{ __('entity_fields')['common']['phone'] }}</th>
                        <th width="30%">{{ __('entity_fields')['establishment']['address'] }}</th>
                        <th scope="col">{{ __('entity_fields')['common']['created_at'] }}</th>
                        <th scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>

    {{-- Logo Form Modal --}}
    @include('environment.businesses.components.form-establishment-logo')

    {{-- Settings Form Modal --}}
    @include('environment.businesses.components.form-establishment-settings')

    {{-- Establishment Form Modal --}}
    @include('environment.businesses.components.form-establishment-data', ["tax_systems" => $tax_systems])

    {{-- JS Control --}}
        <script type="text/javascript">
            "use strict";
        </script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    {{-- Table and Form Controller --}}
    <script>
      /* Page Controls */
        $(document).ready(function () {
          //* Table Controller
            $('#user_table').DataTable({
                language: getDataTableLanguageConfig(),
                searching: false,
                paging: false,

                "order": [0, 'desc'],
                processing: false,
                serverSide: true,
                info: false,

                ajax: {
                    url: "{{ route('establishments.index') }}",
                },
                columns: [{
                        data: 'business_name',
                        name: 'business_name'
                    },
                    {
                        data: 'business_phone',
                        name: 'business_phone'
                    },
                    {
                        data: 'business_address',
                        name: 'business_address'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });
        });

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

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

        // Support Functions
            function dataGet(obj, path, default_value = null) {
                if(!path) return;

                return path.split('.').reduce((acc, key) => {
                    return acc?.[key];
                }, obj) ?? default_value;
            }

            function roundDecimal(input_id) {
                let value = parseFloat($(`#${input_id}`).val());

                if (!isNaN(value))
                    $(`#${input_id}`).val(Math.abs(Math.round(value)));
            }

            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


{{-- Select Picker Initialization --}}
@section('adminlte_js')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
    <script>
        $(function () {
            $('.selectpicker').selectpicker();
        });
    </script>
@endsection
