@extends('admin.templates.layout')

@section('head')
<link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    /* ---------- Table styling ---------- */
    #dataTable thead th {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: #64748b;
        font-weight: 600;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 12px 12px;
        white-space: nowrap;
    }
    #dataTable tbody td {
        vertical-align: middle;
        padding: 12px 12px;
        font-size: 13.5px;
        color: #334155;
    }
    #dataTable tbody tr:hover { background: #f8fafc; }

    /* ---------- Header / toolbar ---------- */
    .card-header-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 20px 22px;
        border-bottom: 1px solid #eef2f7;
    }
    .card-header-toolbar .title-block h5 {
        font-size: 17px;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        line-height: 1.3;
    }
    .card-header-toolbar .title-block p {
        font-size: 12.5px;
        color: #64748b;
        margin: 3px 0 0 0;
    }
    .toolbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .toolbar-actions .form-select {
        height: 38px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        font-size: 13px;
        padding: 0 12px;
        min-width: 150px;
        background-color: #fff;
    }
    .btn-add-primary {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 38px;
        padding: 0 16px;
        border-radius: 8px;
        background: linear-gradient(180deg, #4f6ef7 0%, #3d5ce5 100%);
        color: #fff !important;
        font-size: 13px;
        font-weight: 600;
        border: none;
        box-shadow: 0 2px 6px rgba(79, 110, 247, 0.28);
        transition: all .18s ease;
        white-space: nowrap;
    }
    .btn-add-primary i { font-size: 16px; line-height: 1; }
    .btn-add-primary:hover {
        background: linear-gradient(180deg, #4563e8 0%, #3450d6 100%);
        box-shadow: 0 4px 12px rgba(79, 110, 247, 0.35);
        transform: translateY(-1px);
        color: #fff;
    }
    .btn-add-primary:active { transform: translateY(0); }

    /* ---------- Select2 tune ---------- */
    .select2-container { width: 150px !important; }
    .select2-container--default .select2-selection--single {
        height: 38px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
        font-size: 13px;
        color: #334155;
        padding-left: 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
        right: 6px;
    }

    /* ---------- Chips / pills ---------- */
    .role-chip {
        display: inline-block;
        padding: 3px 9px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
        background: #eef2ff;
        color: #4f46e5;
        margin: 2px 3px 2px 0;
        border: 1px solid #e0e7ff;
    }
    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 11px;
        border-radius: 20px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .2px;
    }
    .status-pill.active   { background: #dcfce7; color: #15803d; }
    .status-pill.inactive { background: #fee2e2; color: #b91c1c; }
    .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .empty-roles { color: #94a3b8; font-style: italic; font-size: 12.5px; }

    /* ---------- Action buttons ---------- */
    .action-btn {
        width: 32px; height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 15px;
    }

    @media (max-width: 640px) {
        .card-header-toolbar { flex-direction: column; align-items: stretch; }
        .toolbar-actions { justify-content: space-between; }
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header-toolbar">
                <div class="title-block">
                    <h5>{{ $page_heading }}</h5>
                    <p>Manage all CMS pages and their role access</p>
                </div>
                <div class="toolbar-actions">
                    <select id="statusFilter" class="form-select form-select-sm">
                        <option value="">All Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                    <a href="{{ route('admin.cms_pages.create') }}" class="btn-add-primary">
                        <i class="ri-add-line"></i> Add Page
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="dataTable">
                        <thead>
                            <tr>
                                <th style="width:50px;">#</th>
                                <th>Page Title</th>
                                <th>Title (AR)</th>
                                <th>Access Roles</th>
                                <th style="width:110px;">Status</th>
                                <th class="text-end" style="width:120px;">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('admin_assets/assets/js/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function () {
    $('#statusFilter').select2({ minimumResultsForSearch: -1, placeholder: 'All Status' });

    var table = $('#dataTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.cms_pages.list") }}',
            data: d => { d.status = $('#statusFilter').val(); }
        },
        columns: [
            { data: 'DT_RowIndex', searchable: false, orderable: false, width: '50px', className: 'text-muted' },
            { data: 'title_col', name: 'title' },
            { data: 'title_ar_col', name: 'title_ar', orderable: false },
            { data: 'roles_col', searchable: false, orderable: false },
            { data: 'status_badge', searchable: false, orderable: false, className: 'text-center' },
            { data: 'action', searchable: false, orderable: false, className: 'text-end' }
        ],
        order: [[0, 'desc']],
        pageLength: 10,
        language: {
            processing: '<div class="spinner-border text-primary avatar-sm" role="status"></div>',
            emptyTable: '<div class="text-center py-4 text-muted"><i class="ri-file-list-3-line fs-32 d-block mb-2"></i>No CMS pages found</div>',
            zeroRecords: '<div class="text-center py-4 text-muted"><i class="ri-search-line fs-32 d-block mb-2"></i>No matching records</div>'
        }
    });

    $('#statusFilter').on('change', () => table.ajax.reload());

    $(document).on('click', '.delete-btn', function () {
        var url = $(this).data('url');
        Swal.fire({
            title: 'Are you sure?',
            text: 'You want to delete this page?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            confirmButtonColor: '#d33',
            cancelButtonColor: '#94a3b8'
        }).then(function (r) {
            if (r.isConfirmed) {
                $.ajax({
                    url: url, type: 'DELETE',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function (res) {
                        toastr.success(res.message);
                        table.ajax.reload(null, false);
                    }
                });
            }
        });
    });
});
</script>
@endsection