@extends('dashboard.layouts.master')
@section('title', 'Purchased Subscriptions | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .filter-tab {
        padding: 7px 18px;
        border-radius: 20px;
        border: 1px solid #ddd;
        background: #fff;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .filter-tab:hover        { border-color: #002868; color: #002868; }
    .filter-tab.active       { background: #002868; color: #fff; border-color: #002868; }
    .filter-tab .tab-count   { background: rgba(255,255,255,0.25); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
    .filter-tab:not(.active) .tab-count { background: #eee; color: #666; }

    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
</style>
@endpush

@section('content')
    <div class="padding">
        <div class="box">
            <div class="box-header">
                <div class="box-header-left">
                    <h3 class="d-block">Purchased Subscriptions</h3>
                    <small class="d-inline-block">
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                        <span>Subscription Management</span> /
                        <span>Purchased Subscriptions</span>
                    </small>
                </div>
                <div class="box-header-right">
                    <div class="btn-group">
                        <form action="{{ route('subscription-management.export-csv') }}" method="POST" style="display:inline;" id="exportCsvForm">
                            @csrf
                            <input type="hidden" name="status" class="filter-status">
                            <input type="hidden" name="search_value" class="filter-search">
                            <button type="submit" class="btn btn-sm white btn-addon"><i class="fa fa-file-excel text-success"></i> Export CSV</button>
                        </form>
                        <form action="{{ route('subscription-management.export-pdf') }}" method="POST" style="display:inline;" id="exportPdfForm">
                            @csrf
                            <input type="hidden" name="status" class="filter-status">
                            <input type="hidden" name="search_value" class="filter-search">
                            <button type="submit" class="btn btn-sm white btn-addon"><i class="fa fa-file-pdf text-danger"></i> Export PDF</button>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Status Filter Tabs --}}
            <div class="filter-tabs m-l m-b">
                <button class="filter-tab active" data-status="">
                    All Subscriptions
                    <span class="tab-count" id="cnt-all">—</span>
                </button>
                <button class="filter-tab" data-status="1">
                    Active
                    <span class="tab-count" id="cnt-1">—</span>
                </button>
                <button class="filter-tab" data-status="0">
                    Expired
                    <span class="tab-count" id="cnt-0">—</span>
                </button>
                <button class="filter-tab" data-status="2">
                    Suspended
                    <span class="tab-count" id="cnt-2">—</span>
                </button>
            </div>

            <div class="table-responsive table_data p-x-md">
                <table class="table table-bordered m-a-0" id="subscriptionTable">
                    <thead class="dker">
                        <tr>
                            <th class="width20 dker no-sort"><label class="ui-check m-a-0"><input id="checkAll" type="checkbox"><i></i></label></th>
                            <th>Business Name</th>
                            <th>Plan Name</th>
                            <th>Activation Date</th>
                            <th>Expiry Date</th>
                            <th>Status</th>
                            <th class="no-sort text-center">Options</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

@push('after-scripts')
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

            let activeStatus = '';

            var table = $('#subscriptionTable').DataTable({
                processing: true, serverSide: true, responsive: true, ordering: true, searching: true,
                columnDefs: [{ 'bSortable': false, 'aTargets': [0, 6] }],
                ajax: {
                    url: "{{ route('subscription-management.anyData') }}",
                    type: 'POST',
                    data: function(d) {
                        d.status = activeStatus;
                    }
                },
                columns: [
                    { data: 'checkbox', orderable: false, searchable: false },
                    { data: 'business_name', name: 'business_name' },
                    { data: 'plan_name', name: 'plan_name' },
                    { data: 'activation_date', name: 'activation_date' },
                    { data: 'expiry_date', name: 'expiry_date' },
                    { data: 'status', name: 'status' },
                    { data: 'options', orderable: false, className: 'text-center' }
                ],
                order: [[1, 'asc']],
                drawCallback: function() {
                    loadTabCounts();
                }
            });

            // Filter tabs click
            $(document).on('click', '.filter-tab', function() {
                $('.filter-tab').removeClass('active');
                $(this).addClass('active');
                activeStatus = $(this).data('status');
                $('.filter-status').val(activeStatus);
                table.ajax.reload();
            });

            // Load counts for each tab
            function loadTabCounts() {
                const statuses = ['', '1', '0', '2'];
                statuses.forEach(function(s) {
                    $.post("{{ route('subscription-management.anyData') }}", {
                        _token: "{{ csrf_token() }}",
                        status: s,
                        start: 0,
                        length: 1,
                        draw: 1
                    }, function(data) {
                        const el = s === '' ? '#cnt-all' : '#cnt-' + s;
                        $(el).text(data.iTotalRecords);
                    });
                });
            }

            table.on('search.dt', function() {
                $('.filter-search').val(table.search());
            });

            $("#checkAll").click(function() {
                $('input:checkbox').not(this).prop('checked', this.checked);
            });
        });
    </script>
@endpush
@endsection