@php $title = __('Users list'); @endphp

@extends('layouts.master', [
    $title
])

@section('content')

    <x-page-header
        :title="$title"
        :breadcrumbs="[
            ['name' => $title],
            ['name' => __('Home'), 'url' => route('dashboard.index')],
        ]"
    />

    @php
        $stats = [
            [
                'title' => __('Total Users'),
                'id'    => 'stat-total',
                'color' => 'bg-info',
                'icon'  => 'bx bx-user'
            ],
            [
                'title' => __('Active Users'),
                'id'    => 'stat-active',
                'color' => 'bg-success',
                'icon'  => 'bx bx-check-circle'
            ],
            [
                'title' => __('Inactive Users'),
                'id'    => 'stat-inactive',
                'color' => 'bg-danger',
                'icon'  => 'bx bx-x-circle'
            ],
            [
                'title' => __('New Users Today'),
                'id'    => 'stat-today',
                'color' => 'bg-warning',
                'icon'  => 'bx bx-time'
            ],
        ];
    @endphp

    <x-stats-cards :stats="$stats" />

    <x-card :header="false" >
        <div class="card-body">
            <x-row>
                <x-col size="4">
                    <div class="search-box me-2 mb-2 d-inline-block">
                        <div class="position-relative">
                            <x-form-input type="text" style="max-width: 300px; width: 300px;" class="f_search" placeholder="{{ __('Search') }}" />
                            <i class="bx bx-search-alt search-icon"></i>
                        </div>
                    </div>
                </x-col>

                <x-col size="8">
                    <div class="text-sm-end">
                        <x-toggle-status
                            label="Change Status"
                            :hidden="true"
                            buttonClass="btn-primary"
                            enableText="Activate"
                            disableText="Deactivate"
                        />
                        <x-link class="btn-danger destroy-selector d-none">{{ __('Delete selector') }}</x-link>
                        <x-link class="btn-primary button-create" data-bs-toggle="modal" data-bs-target="#modal-create">{{ __('New user') }}</x-link>
                    </div>
                </x-col>
            </x-row>

            <x-data-table
                :columns="[
                    ['label' => 'ID', 'width' => '40px'],
                    ['label' => __('User'), 'width' => '350px'],
                    ['label' => __('Username')],
                    ['label' => __('Gender')],
                    ['label' => __('DOB')],
                    ['label' => __('Mobile')],
                    ['label' => __('Address')],
                    ['label' => __('Status')],
                    ['label' => __('Actions'), 'width' => '100px'],
                ]"
            />
        </div>
    </x-card>

@endsection

@section('modals')
    <x-modal id="modal-create" :title="__('New User')">
        <form id="form-create" autocomplete="off" novalidate>
            @csrf

            <div class="modal-body">
                <x-row>
                    <x-col size="6">
                        <x-form-label :label="__('Name')" for="name-create" :required="true" />
                        <x-form-input type="text" name="name" id="name-create" />
                    </x-col>
                    <x-col size="6">
                        <x-form-label :label="__('Username')" for="username-create" :required="true" />
                        <x-form-input type="text" name="username" id="username-create" />
                    </x-col>
                    <x-col size="6">
                        <x-form-label :label="__('Email')" for="email-create" :required="true" />
                        <x-form-input type="email" name="email" id="email-create" />
                    </x-col>
                    <x-col size="6">
                        <x-form-label :label="__('Mobile')" for="mobile-create" :required="true" />
                        <x-form-input type="text" name="mobile" id="mobile-create" oninput="inputNumber(this)" />
                    </x-col>
                    <x-col size="6">
                        <x-form-label :label="__('Password')" for="password-create" :required="true" />
                        <x-form-input type="password" name="password" id="password-create" />
                    </x-col>
                    <x-col size="6">
                        <x-form-label :label="__('Role')" for="role-create" :required="true" />
                        <x-form-select name="role" id="role-create" class="roles-select" parent="#modal-create" />
                    </x-col>
                    <x-col size="6">
                        <x-form-label :label="__('Gender')" for="gender-create" :required="true" />
                        <x-form-select name="gender" id="gender-create" class="gender-select" parent="#modal-create"
                            :options="config('data-select.gender')" :valueName="LOCALIZE_NAME"
                        />
                    </x-col>
                    <x-col size="6">
                        <x-form-label :label="__('Avatar')" for="avatar" :description="__('Accepts photos of the type') . ' .png, .jpg, .jpeg'" />
                        <x-form-input type="file" accept=".png, .jpg, .jpeg" name="avatar" id="avatar" />
                    </x-col>
                </x-row>

                <hr>

                <x-row>
                    <x-col size="12">
                        <x-form-label :label="__('Status')" for="is_active" :description="__('If you do not disable it, it will be enabled by default.')" />
                        <x-checkbox name="is_active" id="is_active" valueHidden="1" value="0" :label="__('Disable')"/>
                    </x-col>
                </x-row>

                <div class="modal-footer">
                    <x-button type="button" size="sm" class="btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</x-button>
                    <x-button type="submit" size="sm" class="btn-primary" id="button-create">{{ __('Save Data') }}</x-button>
                </div>
            </div>
        </form>
    </x-modal>
@endsection

@section('scripts')
<script>
    $(document).ready(() => {
        let inputs = {
            search: $(".f_search"),
        };

        const table = initServerTable({
            order: [[1, 'desc']],
            locale: `{{ $locale }}`,
            ajax: {
                url: '{{ route('settings.users-management.users.yajra') }}',
                type: 'GET',
                data: data => {
                    data.search = inputs.search.val();
                },
            },
            columns: [
                {data: 'checkbox', sortable: false, orderable: false},
                {data: 'id'},
                {data: 'user', sortable: false, orderable: false},
                {data: 'username'},
                {data: 'gender'},
                {data: 'birth_date'},
                {data: 'mobile'},
                {data: 'address'},
                {data: 'status'},
                {data: 'actions', sortable: false, orderable: false},
            ]
        });

        inputs.search.on("input", () => table.draw());
        table.draw();

        setInterval(() => {
            table.draw()
        }, 30000);

        let routes = {
            store: `{{ route_ID_('settings.users-management.users.store') }}`,
            updateStatus: `{{ route_ID_('settings.users-management.users.update-status') }}`,
            updateStatusSelector: `{{ route_ID_('settings.users-management.users.update-status-selector') }}`,
            destroy: `{{ route_ID_('settings.users-management.users.destroy') }}`,
            destroySelector: `{{ route_ID_('settings.users-management.users.destroy-selector') }}`,
        };

        handleModalSubmit('create', routes.store, table);

        handleUpdateStatus(routes.updateStatus, table);
        handleUpdateStatusSelector(routes.updateStatusSelector, table);

        handleDelete(routes.destroy, table);
        handledestroySelector(routes.destroySelector, table);

    });

    document.addEventListener('DOMContentLoaded', function() {
        fetchStatistics();
        setInterval(fetchStatistics, 25000);
    });

    function fetchStatistics() {
        fetch('{{ route('settings.users-management.users.statics') }}')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateStats(data.stats);
                }
            })
            .catch(error => {
                console.error('Error fetching statistics:', error);
            });
    }

    function updateStats(stats) {
        document.getElementById('stat-total').textContent = stats.total || 0;
        document.getElementById('stat-active').textContent = stats.active || 0;
        document.getElementById('stat-inactive').textContent = stats.inactive || 0;
        document.getElementById('stat-today').textContent = stats.new_today || 0;
    }

</script>
@endsection
