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

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

    <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>Edit Package: {{ $package->name }}</h5>
                </div>
                <div class="card-body">
                    <form id="packageForm">
                        @csrf
                        @method('PUT')
                        
                        <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 
                                       value="{{ $package->code }}" pattern="[a-z0-9_]+"
                                       title="Lowercase letters, numbers, and underscores only">
                            </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 value="{{ $package->name }}">
                            </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" {{ $package->tier === 'basic' ? 'selected' : '' }}>Basic</option>
                                    <option value="pro" {{ $package->tier === 'pro' ? 'selected' : '' }}>Pro</option>
                                    <option value="enterprise" {{ $package->tier === 'enterprise' ? 'selected' : '' }}>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" {{ $package->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="{{ $package->price }}" min="0" step="1000" required>
                            </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="{{ $package->duration_days }}" min="1" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" name="description" rows="2">{{ $package->description }}</textarea>
                        </div>

                        <hr class="my-4">

                        @php
                            $enabledFeatures = $package->features->pluck('feature_code')->toArray();
                            $packageQuotas = $package->quotas->keyBy('quota_code');
                        @endphp

                        <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 }}"
                                           {{ in_array($code, $enabledFeatures) ? 'checked' : '' }}>
                                    <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)
                            @php $currentLimit = $packageQuotas[$code]->quota_limit ?? -1; @endphp
                            <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="{{ $currentLimit }}" 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> Update Package
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card bg-light-info">
                <div class="card-body">
                    <h6><i class="ti ti-users me-2"></i>Assigned Clients</h6>
                    <p class="text-muted mb-2">{{ $package->clientPackages->count() }} clients using this package</p>
                    @if($package->clientPackages->count() > 0)
                    <div class="alert alert-warning mb-0">
                        <i class="ti ti-alert-triangle me-1"></i>
                        Changes will affect all assigned clients
                    </div>
                    @endif
                </div>
            </div>

            <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>
                    </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: []
        };

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

        $('.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.update', $package) }}',
            type: 'PUT',
            contentType: 'application/json',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: JSON.stringify(formData),
            success: function(res) {
                toastr.success('Package updated 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 update package');
                }
            }
        });
    });
});
</script>
@endpush