@extends('admin.layouts.app')

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

@section('content')
<div class="row">
    <div class="col-lg-7">
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Create Subscription</h5>
                    <a href="{{ route('subscriptions.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('subscriptions.store') }}" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">Garage</label>
                        <select name="garage_id" class="form-select @error('garage_id') is-invalid @enderror" required>
                            <option value="">Select garage</option>
                            @foreach($garages as $garage)
                                <option value="{{ $garage->id }}" {{ old('garage_id') == $garage->id ? 'selected' : '' }}>
                                    {{ $garage->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('garage_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Package</label>
                        <select name="package_id" id="package_id" class="form-select @error('package_id') is-invalid @enderror" required>
                            <option value="">Select package</option>
                            @foreach($packages as $package)
                                <option
                                    value="{{ $package->id }}"
                                    {{ old('package_id') == $package->id ? 'selected' : '' }}
                                    data-name="{{ e($package->name) }}"
                                    data-slug="{{ e($package->slug) }}"
                                    data-billing="{{ e($package->billing_period) }}"
                                    data-price="{{ number_format($package->price, 2, '.', '') }}"
                                    data-description="{{ e($package->description ?? '') }}"
                                    data-modules="{{ e($package->modules->pluck('name')->implode(', ')) }}"
                                >
                                    {{ $package->name }} ({{ strtoupper($package->billing_period) }} - {{ number_format($package->price, 2) }})
                                </option>
                            @endforeach
                        </select>
                        @error('package_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-4 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') }}" required>
                            @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Start Date</label>
                            <input type="date" name="starts_at" class="form-control @error('starts_at') is-invalid @enderror"
                                   value="{{ old('starts_at') }}">
                            @error('starts_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">End Date</label>
                            <input type="date" name="ends_at" class="form-control @error('ends_at') is-invalid @enderror"
                                   value="{{ old('ends_at') }}">
                            @error('ends_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                            @php
                                $statusValue = old('status', 'active');
                            @endphp
                            <option value="active" {{ $statusValue === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="expired" {{ $statusValue === 'expired' ? 'selected' : '' }}>Expired</option>
                            <option value="cancelled" {{ $statusValue === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

                    <div class="d-flex justify-content-end">
                        <a href="{{ route('subscriptions.index') }}" class="btn btn-outline-secondary me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Subscription</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 d-flex align-items-center justify-content-between">
                <h6 class="mb-0">Selected Package</h6>
                <span id="pkgStatusBadge" class="badge bg-light text-muted">No package selected</span>
            </div>
            <div class="card-body">
                <div id="pkgEmpty" class="text-muted">
                    Select a package to preview its details here.
                </div>

                <div id="pkgDetails" class="d-none">
                    <div class="mb-3">
                        <div class="fw-semibold" id="pkgName"></div>
                        <div class="text-muted small" id="pkgSlug"></div>
                    </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="pkgBilling"></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="pkgPrice"></div>
                            </div>
                        </div>
                    </div>

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

                    <div>
                        <div class="text-muted small mb-2">Modules</div>
                        <div id="pkgModules"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        const packageSelect = document.getElementById('package_id');
        const priceInput = document.getElementById('price');

        const empty = document.getElementById('pkgEmpty');
        const details = document.getElementById('pkgDetails');
        const badge = document.getElementById('pkgStatusBadge');

        const nameEl = document.getElementById('pkgName');
        const slugEl = document.getElementById('pkgSlug');
        const billingEl = document.getElementById('pkgBilling');
        const priceEl = document.getElementById('pkgPrice');
        const descEl = document.getElementById('pkgDescription');
        const modulesEl = document.getElementById('pkgModules');

        function setPreviewFromOption(opt) {
            if (!opt || !opt.value) {
                empty.classList.remove('d-none');
                details.classList.add('d-none');
                badge.className = 'badge bg-light text-muted';
                badge.textContent = 'No package selected';
                return;
            }

            const pkgName = opt.dataset.name || opt.textContent.trim();
            const pkgSlug = opt.dataset.slug || '';
            const pkgBilling = (opt.dataset.billing || '').toUpperCase();
            const pkgPrice = opt.dataset.price || '';
            const pkgDescription = opt.dataset.description || '';
            const pkgModules = opt.dataset.modules || '';

            empty.classList.add('d-none');
            details.classList.remove('d-none');

            badge.className = 'badge bg-primary';
            badge.textContent = 'Preview';

            nameEl.textContent = pkgName;
            slugEl.textContent = pkgSlug ? ('Slug: ' + pkgSlug) : '';
            billingEl.textContent = pkgBilling || '—';
            priceEl.textContent = pkgPrice ? pkgPrice : '—';
            descEl.textContent = pkgDescription || '—';

            modulesEl.innerHTML = '';
            if (pkgModules.trim().length === 0) {
                modulesEl.innerHTML = '<span class="text-muted small">No modules</span>';
            } else {
                pkgModules.split(',').map(s => s.trim()).filter(Boolean).forEach(m => {
                    const span = document.createElement('span');
                    span.className = 'badge bg-light text-muted me-1 mb-1';
                    span.textContent = m;
                    modulesEl.appendChild(span);
                });
            }

            if (priceInput && (priceInput.value === '' || Number(priceInput.value) === 0) && pkgPrice !== '') {
                priceInput.value = pkgPrice;
            }
        }

        if (packageSelect) {
            packageSelect.addEventListener('change', function () {
                setPreviewFromOption(packageSelect.options[packageSelect.selectedIndex]);
            });
            setPreviewFromOption(packageSelect.options[packageSelect.selectedIndex]);
        }
    })();
</script>
@endpush