@extends('layouts.app')
@section('content')
<section class="content-header pb-0">
    <div class="container-fluid">
        <div class="row align-items-center mb-3">
            <div class="col-sm-6">
                <h4 class="font-weight-bold mb-0">
                    <i class="fa fa-list text-primary mr-2"></i> {{ $pageTitle }}
                </h4>
            </div>
            <div class="col-sm-6 text-right">
                <a class="btn btn-primary font-weight-bold" href="{{ route($routePrefix . '.create') }}">
                    <i class="fa fa-plus"></i> إضافة جديد
                </a>
            </div>
        </div>
    </div>
</section>
<div class="content px-3 mt-2">
    @include('flash::message')
    <!-- KPI Cards -->
    <div class="row mb-4">
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card kpi-card p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="kpi-title">إجمالي المسجل</div>
                        <div class="kpi-value">{{ $kpiData['total'] ?? 0 }}</div>
                        <div class="kpi-subtitle">
                            إجمالي العدد في النظام
                        </div>
                    </div>
                    <div class="kpi-icon-wrapper bg-soft-primary-icon">
                        <i class="fa fa-boxes"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card kpi-card p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="kpi-title">المُفعلة</div>
                        <div class="kpi-value">{{ $kpiData['active'] ?? 0 }}</div>
                        <div class="kpi-subtitle">
                            تظهر للمستخدمين عند الإضافة
                        </div>
                    </div>
                    <div class="kpi-icon-wrapper bg-soft-success-icon">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card kpi-card p-4">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="kpi-title">المعطلة</div>
                        <div class="kpi-value">{{ $kpiData['inactive'] ?? 0 }}</div>
                        <div class="kpi-subtitle">
                            مخفية من العرض
                        </div>
                    </div>
                    <div class="kpi-icon-wrapper bg-soft-danger-icon">
                        <i class="fa fa-times-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Data Table -->
    <div class="card border-0 shadow-sm" style="border-radius: 12px;">
        <div class="card-header bg-white border-bottom-0 pt-4 pb-0 px-4">
            <form id="filter-form" class="row">
                <div class="col-md-4 mb-3">
                    <label class="text-muted font-weight-bold" style="font-size: 0.85rem;">بحث بالاسم</label>
                    <input type="text" id="title" class="form-control form-control-sm" placeholder="أدخل اسم العنصر...">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="text-muted font-weight-bold" style="font-size: 0.85rem;">الحالة</label>
                    <select id="state" class="form-control form-control-sm">
                        <option value="">الكل</option>
                        <option value="1">مفعل</option>
                        <option value="0">غير مفعل</option>
                    </select>
                </div>
                <div class="col-md-4 mb-3 d-flex align-items-end">
                    <button type="button" id="filter-btn" class="btn btn-primary btn-sm px-4 mr-2"><i class="fa fa-search"></i> بحث</button>
                    <button type="button" id="reset-btn" class="btn btn-light btn-sm px-4 border"><i class="fa fa-undo"></i> إعادة تعيين</button>
                </div>
            </form>
        </div>
        <div class="card-body px-4 pt-0">
            @push('third_party_stylesheets')
                @include('layouts.datatables_css')
            @endpush
            {!! $dataTable->table(['width' => '100%', 'class' => 'table table-striped table-hover mb-0']) !!}
            @push('third_party_scripts')
                @include('layouts.datatables_js')
                {!! $dataTable->scripts() !!}
                <script>
                    $(document).ready(function() {
                        $('#filter-btn').on('click', function(e) {
                            window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                        });
                        $('#reset-btn').on('click', function(e) {
                            $('#title').val('');
                            $('#state').val('');
                            window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                        });
                    });
                </script>
            @endpush
        </div>
    </div>
</div>
@endsection