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

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

    {{-- Summary Cards --}}
    <div class="row mb-4">
        <div class="col-md-4">
            <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-puzzle fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Total Add-ons</h6>
                            <h4 class="mb-0 fw-semibold" id="total-addons">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <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-users fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Active Subscriptions</h6>
                            <h4 class="mb-0 fw-semibold" id="total-subscriptions">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <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-device-mobile fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Mobile Agent Slots</h6>
                            <h4 class="mb-0 fw-semibold" id="total-slots">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-body">
        {{-- Toolbar --}}
        <div class="row mb-3">
            <div class="col-md-6">
                <select class="form-select w-auto" id="filter-status">
                    <option value="">All Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>
            <div class="col-md-6 text-end">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addonModal" onclick="openCreateModal()">
                    <i class="ti ti-plus me-1"></i> Add Addon
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped" id="datatable">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Price/Unit</th>
                        <th>Billing Cycle</th>
                        <th>Min-Max Qty</th>
                        <th>Clients</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Create/Edit Modal --}}
<div class="modal fade" id="addonModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addonForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Create Add-on</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="addon-id">
                    
                    <div class="mb-3" id="code-group">
                        <label class="form-label">Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="code" name="code" 
                               pattern="[a-z0-9_]+" placeholder="e.g. mobile_agent_access">
                        <small class="text-muted">Lowercase, numbers, underscore only. Cannot be changed after creation.</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="e.g. Mobile Agent Access">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="2"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Price per Unit <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">Rp</span>
                                <input type="number" class="form-control" id="price_per_unit" name="price_per_unit" min="0" step="1000">
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Billing Cycle <span class="text-danger">*</span></label>
                            <select class="form-select" id="billing_cycle" name="billing_cycle">
                                <option value="monthly">Bulanan</option>
                                <option value="yearly">Tahunan</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Min Quantity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="min_quantity" name="min_quantity" min="1" value="1">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Max Quantity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="max_quantity" name="max_quantity" min="1" value="100">
                        </div>
                    </div>
                    
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                        <label class="form-check-label" for="is_active">Active</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">Save</button>
                </div>
            </form>
        </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 add-on?
            </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 = '';
    var isEdit = false;

    // Initialize DataTable
    var table = $('#datatable').DataTable({
        processing: true,
        ajax: {
            url: '{{ route("admin.addons.data") }}',
            dataSrc: 'data'
        },
        columns: [
            { data: 'code' },
            { data: 'name' },
            { 
                data: 'price_per_unit',
                render: function(data) {
                    return 'Rp ' + parseInt(data).toLocaleString('id-ID');
                }
            },
            { 
                data: 'billing_cycle',
                render: function(data) {
                    return data === 'monthly' 
                        ? '<span class="badge bg-info">Bulanan</span>'
                        : '<span class="badge bg-primary">Tahunan</span>';
                }
            },
            { 
                data: null,
                render: function(data) {
                    return data.min_quantity + ' - ' + data.max_quantity;
                }
            },
            { 
                data: 'client_addons_count',
                className: 'text-center',
                render: function(data) {
                    return '<span class="badge bg-success">' + (data || 0) + '</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: null,
                orderable: false,
                className: 'text-center',
                render: function(data, type, row) {
                    return `
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-warning btn-edit" data-id="${row.id}" title="Edit">
                                <i class="ti ti-pencil"></i>
                            </button>
                            <button class="btn btn-danger btn-delete" data-id="${row.id}" title="Delete">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'asc']],
        drawCallback: function() {
            updateStats();
        }
    });

    function updateStats() {
        $.get('{{ route("admin.addons.data") }}', function(res) {
            var data = res.data || [];
            $('#total-addons').text(data.length);
            var subscriptions = data.reduce((sum, a) => sum + (a.client_addons_count || 0), 0);
            $('#total-subscriptions').text(subscriptions);
            // Total slots would need separate API call or can be added to data response
            $('#total-slots').text('-');
        });
    }

    // Filter
    $('#filter-status').on('change', function() {
        var val = $(this).val();
        table.column(6).search(val === '1' ? 'Active' : (val === '0' ? 'Inactive' : '')).draw();
    });

    // Open create modal
    window.openCreateModal = function() {
        isEdit = false;
        $('#modalTitle').text('Create Add-on');
        $('#addon-id').val('');
        $('#addonForm')[0].reset();
        $('#is_active').prop('checked', true);
        $('#code-group').show();
        $('#code').prop('disabled', false);
    };

    // Edit button
    $(document).on('click', '.btn-edit', function() {
        isEdit = true;
        var id = $(this).data('id');
        
        $.get('{{ url("admin/addons") }}/' + id, function(res) {
            var addon = res.data;
            $('#modalTitle').text('Edit Add-on');
            $('#addon-id').val(addon.id);
            $('#code').val(addon.code).prop('disabled', true);
            $('#code-group').hide();
            $('#name').val(addon.name);
            $('#description').val(addon.description);
            $('#price_per_unit').val(addon.price_per_unit);
            $('#billing_cycle').val(addon.billing_cycle);
            $('#min_quantity').val(addon.min_quantity);
            $('#max_quantity').val(addon.max_quantity);
            $('#is_active').prop('checked', addon.is_active);
            $('#addonModal').modal('show');
        });
    });

    // Form submit
    $('#addonForm').on('submit', function(e) {
        e.preventDefault();
        
        var id = $('#addon-id').val();
        var url = isEdit ? '{{ url("admin/addons") }}/' + id : '{{ route("admin.addons.store") }}';
        var method = isEdit ? 'PUT' : 'POST';
        
        var data = {
            name: $('#name').val(),
            description: $('#description').val(),
            price_per_unit: $('#price_per_unit').val(),
            billing_cycle: $('#billing_cycle').val(),
            min_quantity: $('#min_quantity').val(),
            max_quantity: $('#max_quantity').val(),
            is_active: $('#is_active').is(':checked') ? 1 : 0
        };
        
        if (!isEdit) {
            data.code = $('#code').val();
        }
        
        $('#submitBtn').prop('disabled', true).text('Saving...');
        
        $.ajax({
            url: url,
            type: method,
            data: data,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                $('#addonModal').modal('hide');
                table.ajax.reload();
                toastr.success(res.meta?.message || 'Add-on saved successfully');
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.meta?.message || 'Failed to save add-on';
                if (xhr.responseJSON?.errors) {
                    var errors = Object.values(xhr.responseJSON.errors).flat();
                    msg = errors.join('<br>');
                }
                toastr.error(msg);
            },
            complete: function() {
                $('#submitBtn').prop('disabled', false).text('Save');
            }
        });
    });

    // Delete
    $(document).on('click', '.btn-delete', function() {
        deleteUrl = '{{ url("admin/addons") }}/' + $(this).data('id');
        $('#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('Add-on deleted successfully');
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Failed to delete add-on');
            }
        });
    });
});
</script>
@endpush