@extends('backend.app')

@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/datatable/css/datatables.min.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    <style>
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px 12px 0 0;
            padding: 2rem;
            color: white;
        }
        .data-table-card {
            border-radius: 0 0 12px 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .table thead th {
            background: #f8f9fa;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #dee2e6;
        }
        .table tbody tr:hover {
            background-color: #f8f9fa;
            transition: all 0.2s;
        }
        .badge-status {
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-weight: 500;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .user-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
        }
        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .plan-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-weight: 500;
            font-size: 0.8rem;
        }
        .price-tag {
            font-weight: 700;
            color: #28c76f;
            font-family: 'Courier New', monospace;
        }
    </style>
@endpush

@section('title', 'Manual Subscriptions')

@section('content')
    <div class="app-content content">
        <!-- Page Header -->
        <div class="page-header mb-0">
            <div class="row align-items-center">
                <div class="col">
                    <h3 class="mb-1"><i class="fas fa-users me-2"></i>Manual Subscriptions</h3>
                    <p class="mb-0 opacity-75">Create and manage user subscriptions manually</p>
                </div>
                <div class="col-auto">
                    <a href="{{ route('admin.manual-subscriptions.create') }}" class="btn btn-light">
                        <i class="fas fa-plus text-primary"></i> Create Subscription
                    </a>
                </div>
            </div>
        </div>

        <!-- Table Card -->
        <div class="card data-table-card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="data-table">
                        <thead>
                            <tr>
                                <th width="50">
                                    <div class="form-checkbox">
                                        <input type="checkbox" class="form-check-input" id="select_all"
                                            onclick="select_all()">
                                        <label class="form-check-label" for="select_all"></label>
                                    </div>
                                </th>
                                <th>User</th>
                                <th>Company</th>
                                <th>Plan</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Period</th>
                                <th>Ends At</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('script')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="{{ asset('backend/assets/datatable/js/datatables.min.js') }}"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            $(document).ready(function () {
                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    }
                });

                let dTable = $('#data-table').DataTable({
                    order: [[1, 'asc']],
                    lengthMenu: [
                        [10, 25, 50, 100, 200],
                        [10, 25, 50, 100, 200]
                    ],
                    pageLength: 25,
                    processing: true,
                    responsive: true,
                    serverSide: true,
                    language: {
                        processing: `<div class="text-center p-4">
                            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2 text-muted">Loading subscriptions...</p>
                        </div>`,
                        emptyTable: '<div class="text-center p-4"><i class="fas fa-inbox fa-3x text-muted mb-3"></i><p class="text-muted">No subscriptions found</p></div>'
                    },
                    scroller: {
                        loadingIndicator: false
                    },
                    pagingType: "full_numbers",
                    dom: "<'row justify-content-between table-topbar align-items-center mb-3'<'col-md-6 col-sm-6 px-0'l><'col-md-6 col-sm-6 px-0 d-flex justify-content-end'B>>" +
                          "<'row'<'col-sm-12'tr>>" +
                          "<'row justify-content-between'<'col-md-6 col-sm-6 px-0'i><'col-md-6 col-sm-6 px-0'p>>",
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1"></i> Excel',
                            titleAttr: 'Export to Excel',
                            className: 'btn btn-success rounded',
                        }
                    ],
                    ajax: {
                        url: "{{ route('admin.manual-subscriptions.datatables') }}",
                        type: "get",
                    },
                    columns: [
                        { data: 'bulk_check', name: 'bulk_check', orderable: false, searchable: false },
                        { data: 'user', name: 'user', orderable: true, searchable: true },
                        { data: 'company', name: 'company', orderable: true, searchable: true },
                        { data: 'plan', name: 'plan', orderable: true, searchable: true },
                        { data: 'price', name: 'price', orderable: true, searchable: false },
                        { data: 'status', name: 'status', orderable: true, searchable: true },
                        { data: 'period', name: 'period', orderable: true, searchable: false },
                        { data: 'ends_at', name: 'ends_at', orderable: true, searchable: true },
                        { data: 'action', name: 'action', orderable: false, searchable: false },
                    ],
                });

                // Handle checkbox selection
                $('#data-table tbody').on('change', '.select_data', function() {
                    updateBulkActionButton();
                });
            });

            function select_all() {
                var checkboxes = document.getElementsByClassName('select_data');
                var selectAllCheckbox = document.getElementById('select_all');

                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = selectAllCheckbox.checked;
                }
                updateBulkActionButton();
            }

            function select_single_item(id) {
                updateBulkActionButton();
            }

            function updateBulkActionButton() {
                var checkedCount = $('.select_data:checked').length;
                if (checkedCount > 0) {
                    $('.bulk-actions-btn').removeClass('d-none');
                    $('.bulk-actions-btn').html('<i class="fas fa-ban text-danger"></i> Cancel (' + checkedCount + ')');
                } else {
                    $('.bulk-actions-btn').addClass('d-none');
                }
            }

            function cancelSubscription(userName, subscriptionId) {
                Swal.fire({
                    title: 'Cancel Subscription?',
                    html: 'Are you sure you want to cancel <strong>' + userName + '</strong>\'s subscription immediately?<br><br><small class="text-danger">This action cannot be undone. The user will lose access immediately.</small>',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ea5455',
                    cancelButtonColor: '#7367f0',
                    confirmButtonText: '<i class="fas fa-check me-1"></i> Yes, Cancel It',
                    cancelButtonText: '<i class="fas fa-times me-1"></i> No, Keep It',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "/admin/manual-subscriptions/" + subscriptionId,
                            type: 'DELETE',
                            data: {_token: '{{ csrf_token() }}'},
                            success: function(response) {
                                Swal.fire({
                                    title: 'Cancelled!',
                                    text: 'Subscription has been cancelled successfully.',
                                    icon: 'success',
                                    confirmButtonColor: '#28c76f',
                                    timer: 2000,
                                    timerProgressBar: true
                                }).then(() => {
                                    $('#data-table').DataTable().ajax.reload(null, false);
                                });
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    title: 'Error!',
                                    text: xhr.responseJSON?.message || 'Failed to cancel subscription.',
                                    icon: 'error',
                                    confirmButtonColor: '#ea5455'
                                });
                            }
                        });
                    }
                });
            }
        </script>
    @endpush
@endsection