@extends('root')
@section('title', 'Package Management')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Packages',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Packages'
    ])

    {{-- Summary Cards --}}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-primary text-primary" style="width:50px;height:50px;">
                            <i class="ti ti-package fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Total Packages</h6>
                            <h4 class="mb-0 fw-semibold" id="total-packages">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-success text-success" style="width:50px;height:50px;">
                            <i class="ti ti-check fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Active</h6>
                            <h4 class="mb-0 fw-semibold" id="active-packages">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-info text-info" style="width:50px;height:50px;">
                            <i class="ti ti-users fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Assigned Clients</h6>
                            <h4 class="mb-0 fw-semibold" id="assigned-clients">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-warning text-warning" style="width:50px;height:50px;">
                            <i class="ti ti-crown fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Enterprise</h6>
                            <h4 class="mb-0 fw-semibold" id="enterprise-packages">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-body">
        {{-- Toolbar --}}
        <div class="row mb-3">
            <div class="col-md-6">
                <div class="row g-2">
                    <div class="col-md-4">
                        <select class="form-select" id="filter-tier">
                            <option value="">All Tiers</option>
                            <option value="basic">Basic</option>
                            <option value="pro">Pro</option>
                            <option value="enterprise">Enterprise</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-select" id="filter-status">
                            <option value="">All Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="btn-group">
                    <a href="{{ route('admin.client-overrides.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-adjustments me-1"></i> Client Overrides
                    </a>
                    <a href="{{ route('admin.packages.create') }}" class="btn btn-primary">
                        <i class="ti ti-plus me-1"></i> Add Package
                    </a>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped" id="datatable">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Tier</th>
                        <th>Features</th>
                        <th>Quotas</th>
                        <th>Clients</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Delete Confirmation Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this package?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete">Delete</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var deleteUrl = '';

    // Initialize DataTable
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('admin.packages.data') }}',
            data: function(d) {
                d.tier = $('#filter-tier').val();
                var status = $('#filter-status').val();
                if (status !== '') {
                    d.is_active = status;
                }
            }
        },
        columns: [
            { data: 'code' },
            { data: 'name' },
            { 
                data: 'tier',
                render: function(data) {
                    var badges = {
                        'basic': 'bg-secondary',
                        'pro': 'bg-primary',
                        'enterprise': 'bg-warning'
                    };
                    return '<span class="badge ' + (badges[data] || 'bg-secondary') + '">' + data.toUpperCase() + '</span>';
                }
            },
            { 
                data: 'features_count',
                className: 'text-center',
                render: function(data) {
                    return '<span class="badge bg-info">' + data + '</span>';
                }
            },
            { 
                data: 'quotas_count',
                className: 'text-center',
                render: function(data) {
                    return '<span class="badge bg-secondary">' + data + '</span>';
                }
            },
            { 
                data: 'clients_count',
                className: 'text-center',
                render: function(data) {
                    return '<span class="badge bg-success">' + data + '</span>';
                }
            },
            { 
                data: 'is_active',
                className: 'text-center',
                render: function(data) {
                    return data 
                        ? '<span class="badge bg-success"><i class="ti ti-check me-1"></i>Active</span>'
                        : '<span class="badge bg-danger"><i class="ti ti-x me-1"></i>Inactive</span>';
                }
            },
            { data: 'created_at' },
            {
                data: null,
                orderable: false,
                className: 'text-center',
                render: function(data, type, row) {
                    var editUrl = '{{ route('admin.packages.edit', ':id') }}'.replace(':id', row.id);
                    var deleteRoute = '{{ route('admin.packages.destroy', ':id') }}'.replace(':id', row.id);
                    
                    return `
                        <div class="btn-group btn-group-sm">
                            <a href="${editUrl}" class="btn btn-warning" title="Edit">
                                <i class="ti ti-pencil"></i>
                            </a>
                            <button class="btn btn-danger btn-delete" data-url="${deleteRoute}" title="Delete">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'asc']],
        drawCallback: function() {
            // Update summary stats
            $.get('{{ route('admin.packages.data') }}', function(res) {
                var total = res.recordsTotal || 0;
                var active = res.data.filter(p => p.is_active).length;
                var enterprise = res.data.filter(p => p.tier === 'enterprise').length;
                var clients = res.data.reduce((sum, p) => sum + p.clients_count, 0);
                
                $('#total-packages').text(total);
                $('#active-packages').text(active);
                $('#enterprise-packages').text(enterprise);
                $('#assigned-clients').text(clients);
            });
        }
    });

    // Filter handlers
    $('#filter-tier, #filter-status').on('change', function() {
        table.ajax.reload();
    });

    // Delete handler
    $(document).on('click', '.btn-delete', function() {
        deleteUrl = $(this).data('url');
        $('#deleteModal').modal('show');
    });

    $('#confirm-delete').on('click', function() {
        $.ajax({
            url: deleteUrl,
            type: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                $('#deleteModal').modal('hide');
                table.ajax.reload();
                toastr.success('Package deleted successfully');
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Failed to delete package');
            }
        });
    });
});
</script>
@endpush