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

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

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-package me-2"></i>Package Details</h5>
                </div>
                <div class="card-body">
                    <form id="packageForm">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Package Code <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="code" required 
                                       placeholder="e.g., pro_monthly" pattern="[a-z0-9_]+" 
                                       title="Lowercase letters, numbers, and underscores only">
                                <small class="text-muted">Unique identifier (lowercase, no spaces)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Package Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" required placeholder="e.g., Pro Monthly">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Tier <span class="text-danger">*</span></label>
                                <select class="form-select" name="tier" required>
                                    <option value="basic">Basic</option>
                                    <option value="pro" selected>Pro</option>
                                    <option value="enterprise">Enterprise</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" name="is_active" checked>
                                    <label class="form-check-label">Active</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Harga (Rp) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="price" value="0" min="0" step="1000" required>
                                <small class="text-muted">Harga paket dalam Rupiah</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Durasi (Hari) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="duration_days" value="30" min="1" required>
                                <small class="text-muted">Masa aktif paket</small>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" name="description" rows="2" placeholder="Optional description"></textarea>
                        </div>

                        <hr class="my-4">

                        <h6 class="mb-3"><i class="ti ti-list-check me-2"></i>Features</h6>
                        <div class="row mb-4">
                            @foreach($featureCodes as $code => $label)
                            <div class="col-md-6 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="features[]" value="{{ $code }}" id="feature_{{ $code }}">
                                    <label class="form-check-label" for="feature_{{ $code }}">
                                        {{ $label }}
                                        <small class="text-muted d-block">{{ $code }}</small>
                                    </label>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <hr class="my-4">

                        <h6 class="mb-3"><i class="ti ti-chart-bar me-2"></i>Quotas</h6>
                        <div id="quotas-container">
                            @foreach($quotaCodes as $code => $label)
                            <div class="row mb-2 quota-row">
                                <div class="col-md-5">
                                    <input type="text" class="form-control-plaintext" value="{{ $label }} ({{ $code }})" readonly>
                                    <input type="hidden" name="quotas[{{ $loop->index }}][code]" value="{{ $code }}">
                                </div>
                                <div class="col-md-4">
                                    <input type="number" class="form-control" name="quotas[{{ $loop->index }}][limit]" value="-1" min="-1">
                                    <small class="text-muted">-1 = Unlimited</small>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.packages.index') }}" class="btn btn-secondary">
                                <i class="ti ti-arrow-left me-1"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-check me-1"></i> Create Package
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card bg-light-primary">
                <div class="card-body">
                    <h6><i class="ti ti-info-circle me-2"></i>Feature Codes Reference</h6>
                    <ul class="small mb-0">
                        <li><code>max_agents</code> - Custom agent limit</li>
                        <li><code>unlimited_ai_agents</code> - Unlimited AI agents</li>
                        <li><code>unlimited_inboxes</code> - Unlimited inboxes</li>
                        <li><code>custom_ai_prompt</code> - Custom AI prompts</li>
                        <li><code>advanced_ai_model</code> - GPT-4 access</li>
                        <li><code>open_api</code> - Open API access</li>
                        <li><code>custom_workflow</code> - Custom workflows</li>
                        <li><code>custom_analytics</code> - Custom analytics</li>
                        <li><code>dedicated_support</code> - Dedicated support</li>
                        <li><code>support_24x7</code> - 24/7 support</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#packageForm').on('submit', function(e) {
        e.preventDefault();
        
        var formData = {
            code: $('input[name="code"]').val(),
            name: $('input[name="name"]').val(),
            tier: $('select[name="tier"]').val(),
            description: $('textarea[name="description"]').val(),
            price: parseFloat($('input[name="price"]').val()) || 0,
            duration_days: parseInt($('input[name="duration_days"]').val()) || 30,
            is_active: $('input[name="is_active"]').is(':checked'),
            features: [],
            quotas: []
        };

        // Collect selected features
        $('input[name="features[]"]:checked').each(function() {
            formData.features.push($(this).val());
        });

        // Collect quotas
        $('.quota-row').each(function(index) {
            var code = $(this).find('input[type="hidden"]').val();
            var limit = parseInt($(this).find('input[type="number"]').val());
            formData.quotas.push({ code: code, limit: limit });
        });

        $.ajax({
            url: '{{ route('admin.packages.store') }}',
            type: 'POST',
            contentType: 'application/json',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: JSON.stringify(formData),
            success: function(res) {
                toastr.success('Package created successfully');
                window.location.href = '{{ route('admin.packages.index') }}';
            },
            error: function(xhr) {
                if (xhr.responseJSON?.errors) {
                    Object.values(xhr.responseJSON.errors).forEach(function(err) {
                        toastr.error(err[0]);
                    });
                } else {
                    toastr.error(xhr.responseJSON?.meta?.message || 'Failed to create package');
                }
            }
        });
    });
});
</script>
@endpush