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

{{-- Toast --}}
<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']['settings']['users'])
@section('content')

  {{-- Controls --}}
    @php
        $has_shifts = \App\Helpers\Environment\SystemModulesHelper::getModuleStatus('shifts');
    @endphp

  {{-- Body --}}
    {{-- Content --}}
    <div class="col-xs-12">

        {{-- Header --}}
        <div class="py-0 mb-4 cardtitle d-flex align-items-center justify-content-between">
            {{-- Title --}}
            <h3 class="pt-2 pl-3">
                {{ __('modules')['dashboard']['settings']['users'] }}
            </h3>

            {{-- Buttons --}}
            <div class="gap-2 d-flex align-items-center justify-content-end">
                {{-- Configure Shifts --}}
                @if ($has_shifts)
                    <button type="button" onclick="window.location.href = `{{ route('shifts.index') }}`"
                        class="px-3 mx-3 btn-secondary btn" style="width: auto"
                    >
                        <i class="fas fa-clock"></i>
                        &nbsp; {{ __('modules')['dashboard']['settings']['shifts'] }}
                    </button>
                @endif

                {{-- Add Record --}}
                <button type="button" id="create_record"
                    class="px-3 mx-3 boton btn" style="width: auto"
                >
                    ✚ &nbsp; {{ __('common_actions')['add'] }} {{ __('entities')['settings']['user'] }}
                </button>
            </div>

        </div>

        {{-- Table --}}
        <div class="table-responsive">
            <table class="table text-center cardtable" id="user_table">
                <thead>
                    <tr class="cardtabletr">
                        <th width="10%">{{ __('entity_fields')['common']['name'] }}</th>
                        <th width="10%">{{ __('entity_fields')['common']['phone'] }}</th>
                        <th width="10%">{{ __('entity_fields')['user']['role'] }}</th>
                        <th width="10%">{{ __('entity_fields')['common']['email'] }}</th>
                        <th width="10%">{{ __('entity_fields')['common']['created_at'] }}</th>
                        <th width="10%">{{ __('entity_fields')['common']['actions'] }}</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>

    {{-- Form --}}
    @include('environment.users.components.user-form')

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

    <script>
      /* Constants */
        const toast_duration = 4000;

      /* Table Controls */
        $(document).ready(function(){
            $('#user_table').DataTable({
                order: [2, 'asc'],
                language: getDataTableLanguageConfig(),

                processing: false,
                serverSide: true,

                ajax:{
                    url: "{{ route('users.index') }}",
                },
                columns:[
                    {
                        data: 'user_name',
                        name: 'user_name'
                    },
                    {
                        data: 'phone',
                        name: 'phone'
                    },
                    {
                        data: 'user_role',
                        name: 'user_role'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'creation',
                        name: 'creation'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });
        });

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

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

    </script>
@endsection