@extends('admin.layouts.app')

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

@section('content')
<div class="row">
    <div class="col-lg-7">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Create Package</h5>
                    <a href="{{ route('packages.index') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i> Back
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('packages.store') }}" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Slug (optional)</label>
                        <input type="text" name="slug" id="slug" class="form-control @error('slug') is-invalid @enderror"
                               value="{{ old('slug') }}" placeholder="auto-generated from name if empty">
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Price</label>
                            <input type="number" step="0.01" name="price" id="price" class="form-control @error('price') is-invalid @enderror"
                                   value="{{ old('price', 0) }}" required>
                            @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Billing Period</label>
                            <select name="billing_period" id="billing_period" class="form-select @error('billing_period') is-invalid @enderror" required>
                                <option value="monthly" {{ old('billing_period') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                                <option value="yearly" {{ old('billing_period') === 'yearly' ? 'selected' : '' }}>Yearly</option>
                            </select>
                            @error('billing_period')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="description" rows="3" class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                        <label class="form-check-label" for="is_active">Active</label>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Modules in this Package</label>
                        <div class="row">
                            @foreach($modules as $module)
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input class="form-check-input module-check" type="checkbox" name="modules[]" value="{{ $module->id }}" id="module-{{ $module->id }}">
                                        <label class="form-check-label" for="module-{{ $module->id }}">
                                            {{ $module->name }}
                                            @if($module->description)
                                                <span class="text-muted small d-block">{{ $module->description }}</span>
                                            @endif
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @error('modules')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-flex justify-content-end">
                        <a href="{{ route('packages.index') }}" class="btn btn-outline-secondary me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Package</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-5 mt-4 mt-lg-0">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h6 class="mb-0">Preview</h6>
            </div>
            <div class="card-body">
                <div class="fw-semibold" id="previewName">—</div>
                <div class="text-muted small mb-3" id="previewSlug">Slug: —</div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <div class="border rounded p-2">
                            <div class="text-muted small">Billing</div>
                            <div class="fw-semibold text-uppercase" id="previewBilling">—</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="border rounded p-2">
                            <div class="text-muted small">Price</div>
                            <div class="fw-semibold" id="previewPrice">—</div>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <div class="text-muted small mb-1">Description</div>
                    <div class="small" id="previewDescription">—</div>
                </div>

                <div>
                    <div class="text-muted small mb-2">Selected Modules</div>
                    <div class="fw-semibold" id="previewModuleCount">0</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        const name = document.getElementById('name');
        const slug = document.getElementById('slug');
        const price = document.getElementById('price');
        const billing = document.getElementById('billing_period');
        const description = document.getElementById('description');
        const moduleChecks = document.querySelectorAll('.module-check');

        const pName = document.getElementById('previewName');
        const pSlug = document.getElementById('previewSlug');
        const pPrice = document.getElementById('previewPrice');
        const pBilling = document.getElementById('previewBilling');
        const pDesc = document.getElementById('previewDescription');
        const pCount = document.getElementById('previewModuleCount');

        function update() {
            pName.textContent = (name.value || '').trim() || '—';
            pSlug.textContent = 'Slug: ' + ((slug.value || '').trim() || 'auto-generated');
            pPrice.textContent = price.value !== '' ? Number(price.value).toFixed(2) : '—';
            pBilling.textContent = (billing.value || '—').toUpperCase();
            pDesc.textContent = (description.value || '').trim() || '—';

            let count = 0;
            moduleChecks.forEach(cb => { if (cb.checked) count++; });
            pCount.textContent = String(count);
        }

        [name, slug, price, billing, description].forEach(el => el && el.addEventListener('input', update));
        moduleChecks.forEach(cb => cb.addEventListener('change', update));
        update();
    })();
</script>
@endpush