@extends('admin.layout.app')
@section('content')
    <div>
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
            <div>
                <h3 class="text-xl font-bold text-gray-800">Subscriptions</h3>
                <p class="text-sm text-gray-500 mt-1">Manage all user subscriptions from here</p>
            </div>
        </div>

        <!-- DataTable Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table id="listDataTable" class="w-full whitespace-nowrap text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
                                <th class="px-6 py-4 font-medium rounded-tl-lg">ID</th>
                                <th class="px-6 py-4 font-medium">User</th>
                                <th class="px-6 py-4 font-medium">Plan</th>
                                <th class="px-6 py-4 font-medium">Order Id</th>
                                <th class="px-6 py-4 font-medium">Payment Id</th>
                                <th class="px-6 py-4 font-medium">Payment Method</th>
                                <th class="px-6 py-4 font-medium">Duration</th>
                                <th class="px-6 py-4 font-medium">Device</th>
                                <th class="px-6 py-4 font-medium">Price</th>
                                <th class="px-6 py-4 font-medium">Discount Price</th>
                                <th class="px-6 py-4 font-medium">Price Type</th>
                                <th class="px-6 py-4 font-medium rounded-tr-lg">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('customJs')
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.js"></script>
    <style>
        /* Modernized DataTable Styles for Tailwind */
        .dt-container { font-size: 0.875rem; color: #4b5563; }
        .dt-container th.dt-ordering-asc, .dt-container th.dt-ordering-desc { color: #111827; }
        table.dataTable { border-collapse: collapse !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable thead th, table.dataTable thead td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable tbody td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #f3f4f6 !important; }
        table.dataTable.no-footer { border-bottom: 1px solid #e5e7eb !important; }
        .dt-container .dt-length select, .dt-container .dt-search input { border: 1px solid #d1d5db !important; border-radius: 0.5rem !important; padding: 0.375rem 0.75rem !important; outline: none; transition: all 0.2s; font-size: 0.875rem; margin-left: 0.5rem; }
        .dt-container .dt-length select:focus, .dt-container .dt-search input:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; }
        .dt-container .dt-paging .dt-paging-button { border-radius: 0.375rem !important; padding: 0.375rem 0.75rem !important; margin: 0 0.125rem !important; border: 1px solid transparent !important; }
        .dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover { background-color: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; font-weight: 600; }
        .dt-container .dt-paging .dt-paging-button:hover:not(.current) { background-color: #f3f4f6 !important; border-color: #e5e7eb !important; color: #374151 !important; }
        .dt-container .dt-info { color: #6b7280 !important; font-size: 0.875rem; padding-top: 1rem !important; }
        .dt-layout-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
        .dt-layout-row:last-child { margin-top: 1.5rem; margin-bottom: 0; }
    </style>
    <script>
        function load_datatable() {
            $('#listDataTable').DataTable({
                "pageLength": 10,
                "lengthMenu": [10, 20, 50, 100, 200],
                "language": {
                    "lengthMenu": '_MENU_',
                    "sSearch": "",
                    "searchPlaceholder": "Search records",
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: "{{ route('admin_subscription_fetchAllList') }}",
                    type: "POST",
                    data: {}
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [11]
                }, ],
                "order": [
                    [0, 'desc']
                ],
            });
        }
        $(document).ready(function() {
            load_datatable();
        });
    </script>
@endsection