@extends('admin.layouts.master')
@section('css')
    <!-- Internal Data table css -->
    @include('admin.helper.tablecss')
    <style>
        .stat-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .sales-card {
            transition: transform 0.3s ease;
        }

        .sales-card:hover {
            transform: translateY(-5px);
        }
    </style>
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> الوكلاء </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- Statistics Cards -->
    <div class="row mb-4" id="statistics-cards">
        <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
            <div class="card overflow-hidden sales-card bg-primary-gradient">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h6 class="text-white mb-3">إجمالي الوكلاء</h6>
                            <h3 class="text-white mb-0" id="total-agents">0</h3>
                        </div>
                        <div class="col-auto">
                            <div class="stat-circle bg-white text-primary">
                                <x-lucide-users width="20" height="20" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
            <div class="card overflow-hidden sales-card bg-success-gradient">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h6 class="text-white mb-3">الوكلاء النشطين</h6>
                            <h3 class="text-white mb-0" id="active-agents">0</h3>
                        </div>
                        <div class="col-auto">
                            <div class="stat-circle bg-white text-success">
                                <x-lucide-check-circle width="20" height="20" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
            <div class="card overflow-hidden sales-card bg-info-gradient">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h6 class="text-white mb-3">الوكلاء الظاهرين</h6>
                            <h3 class="text-white mb-0" id="visible-agents">0</h3>
                        </div>
                        <div class="col-auto">
                            <div class="stat-circle bg-white text-info">
                                <x-lucide-eye width="20" height="20" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
            <div class="card overflow-hidden sales-card bg-warning-gradient">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h6 class="text-white mb-3">الوكلاء المخفيين</h6>
                            <h3 class="text-white mb-0" id="hidden-agents">0</h3>
                        </div>
                        <div class="col-auto">
                            <div class="stat-circle bg-white text-warning">
                                <x-lucide-eye-off width="20" height="20" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- row -->
    <div id='gameId'>
        <div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between">
                                <h4 class="card-title mg-b-0"> الوكلاء </h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    @if(can_admin('agents_add'))
                                        <a href="{{ route('admin.agents.create') }}" class="btn btn-primary">
                                            <x-lucide-plus width="20" height="20" /> إضافة وكيل جديد
                                        </a>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="search-agents"
                                            placeholder="البحث في الوكلاء...">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" id="clear-search">
                                                <x-lucide-x width="20" height="20" />
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="agents">
                                    <thead>
                                        <tr>
                                            <th> ID</th>
                                            <th> الاسم </th>
                                            <th> التليفون </th>
                                            <th> العنوان </th>
                                            <th> الحاله </th>
                                            <th> ظهور </th>
                                            <th> الإجراءات </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            // تحميل الإحصائيات
            loadStatistics();

            const tablehead = ['id', 'image', 'name', 'phone', 'address', 'status', 'isactive', 'action']
            const table = initDatatable(
                '#agents',
                "{{ route('admin.agents.index') }}",
                tablehead
            );

            // دالة تحميل الإحصائيات
            function loadStatistics() {
                $.get("{{ route('admin.agents.statistics') }}")
                    .done(function(response) {
                        if (response.success) {
                            $('#total-agents').text(response.data.total);
                            $('#active-agents').text(response.data.active);
                            $('#visible-agents').text(response.data.visible);
                            $('#hidden-agents').text(response.data.hidden);
                        }
                    }).fail(function() {
                        console.log('فشل في تحميل الإحصائيات');
                    });
            }

            // البحث في الوكلاء
            $('#search-agents').on('keyup', function() {
                table.search(this.value).draw();
            });

            // مسح البحث
            $('#clear-search').on('click', function() {
                $('#search-agents').val('');
                table.search('').draw();
            });

            $('#agents tbody').on('click', '.isactive', function() {
                var value = $(this).attr("value");
                Swal.fire({
                    title: 'هل أنت متأكد من تغيير حالة الظهور؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        }
                        Swal.showLoading();
                        adawe(`{{ route('admin.agents.changeactive') }}`, data);
                        $('#agents').DataTable().draw();
                        loadStatistics(); // إعادة تحميل الإحصائيات
                    }
                })
            });

            $('#agents tbody').on('click', '.status', function() {
                var value = $(this).attr("value");
                Swal.fire({
                    title: 'هل أنت متأكد من تغيير الحالة؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        }
                        Swal.showLoading();
                        adawe(`{{ route('admin.agents.changestatus') }}`, data);
                        $('#agents').DataTable().draw();
                        loadStatistics(); // إعادة تحميل الإحصائيات
                    }
                })
            });

            // حذف
            $('#agents tbody').on('click', '.delete', function() {
                var value = $(this).attr("value");
                Swal.fire({
                    title: 'هل أنت متأكد من الحذف؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، احذف!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        data = {
                            '_token': "{{ csrf_token() }}",
                            'id': value,
                        }
                        Swal.showLoading();
                        adawe(`{{ route('admin.agents.delete') }}`, data);
                        $('#agents').DataTable().draw();
                        loadStatistics(); // إعادة تحميل الإحصائيات
                    }
                })
            });
        });
    </script>
@endsection