@extends('admin.layouts.app')

@section('title', 'Add Garage Vendor')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('garages.index') }}" class="btn btn-outline-secondary me-3">
            <i class="bi bi-arrow-left"></i>
        </a>
        <h2 class="mb-0">Add New Garage Vendor</h2>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-7">
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('garages.store') }}" method="POST">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Garage Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}"
                                class="form-control @error('name') is-invalid @enderror"
                                placeholder="e.g. Al-Noor Auto Garage" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Address</label>
                            <textarea name="address" rows="3"
                                class="form-control @error('address') is-invalid @enderror"
                                placeholder="Full address of the garage">{{ old('address') }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Contact Number</label>
                            <input type="text" name="contact_number" value="{{ old('contact_number') }}"
                                class="form-control @error('contact_number') is-invalid @enderror"
                                placeholder="e.g. 0300-1234567">
                            @error('contact_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <hr class="my-4">

                        <h5 class="mb-3">Garage Login (required)</h5>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Login Name <span class="text-danger">*</span></label>
                                <input type="text" name="admin_name" value="{{ old('admin_name') }}"
                                       class="form-control @error('admin_name') is-invalid @enderror"
                                       placeholder="Garage Owner" required>
                                @error('admin_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Login Phone</label>
                                <input type="text" name="admin_phone" value="{{ old('admin_phone') }}"
                                       class="form-control @error('admin_phone') is-invalid @enderror"
                                       placeholder="0300-1234567">
                                @error('admin_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Login Email <span class="text-danger">*</span></label>
                                <input type="email" name="admin_email" value="{{ old('admin_email') }}"
                                       class="form-control @error('admin_email') is-invalid @enderror"
                                       placeholder="garage@example.com" required>
                                @error('admin_email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Login Password <span class="text-danger">*</span></label>
                                <input type="password" name="admin_password"
                                       class="form-control @error('admin_password') is-invalid @enderror"
                                       placeholder="Minimum 6 characters" required>
                                @error('admin_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <hr class="my-4">

                        <h5 class="mb-3">Subscriptions (optional)</h5>

                        @php
                            $selectedPackageIds = collect(old('package_ids', []))->map(fn ($id) => (int) $id)->all();
                        @endphp

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Assign Packages</label>
                            <div class="border rounded p-3 @error('package_ids') border-danger @enderror">
                                @forelse($packages as $package)
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input package-check"
                                            type="checkbox"
                                            name="package_ids[]"
                                            value="{{ $package->id }}"
                                            id="pkg-{{ $package->id }}"
                                            data-price="{{ number_format($package->price, 2, '.', '') }}"
                                            {{ in_array($package->id, $selectedPackageIds, true) ? 'checked' : '' }}
                                        >
                                        <label class="form-check-label" for="pkg-{{ $package->id }}">
                                            <span class="fw-semibold">{{ $package->name }}</span>
                                            <span class="text-muted">({{ strtoupper($package->billing_period) }} - {{ number_format($package->price, 2) }})</span>
                                            @if($package->modules->isNotEmpty())
                                                <span class="d-block text-muted small">Modules: {{ $package->modules->pluck('name')->implode(', ') }}</span>
                                            @endif
                                        </label>
                                    </div>
                                @empty
                                    <p class="text-muted mb-0">No packages found. Create package first.</p>
                                @endforelse
                            </div>
                            @error('package_ids')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                            @error('package_ids.*')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Price Override (optional)</label>
                                <input type="number" step="0.01" name="price" id="price" value="{{ old('price') }}"
                                       class="form-control @error('price') is-invalid @enderror"
                                       placeholder="Only used when one package is selected">
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Start Date</label>
                                <input type="date" name="starts_at" value="{{ old('starts_at') }}"
                                       class="form-control @error('starts_at') is-invalid @enderror">
                                @error('starts_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">End Date</label>
                                <input type="date" name="ends_at" value="{{ old('ends_at') }}"
                                       class="form-control @error('ends_at') is-invalid @enderror">
                                @error('ends_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> Save Garage
                            </button>
                            <a href="{{ route('garages.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        </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 one or more packages to preview summary.
                    </div>

                    <div id="pkgDetails" class="d-none">
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <div class="border rounded p-2">
                                    <div class="text-muted small">Selected</div>
                                    <div class="fw-semibold text-uppercase" id="pkgCount"></div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="border rounded p-2">
                                    <div class="text-muted small">Total Package Price</div>
                                    <div class="fw-semibold" id="pkgPriceTotal"></div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="text-muted small mb-1">Selected Package Names</div>
                            <div id="pkgNames" class="small"></div>
                        </div>

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

@push('scripts')
<script>
    (function () {
        const packageChecks = document.querySelectorAll('.package-check');
        const priceInput = document.getElementById('price');

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

        const countEl = document.getElementById('pkgCount');
        const priceTotalEl = document.getElementById('pkgPriceTotal');
        const namesEl = document.getElementById('pkgNames');
        const modulesEl = document.getElementById('pkgModules');

        function updatePreview() {
            const selected = Array.from(packageChecks).filter(cb => cb.checked);
            if (selected.length === 0) {
                empty.classList.remove('d-none');
                details.classList.add('d-none');
                badge.className = 'badge bg-light text-muted';
                badge.textContent = 'No package selected';
                return;
            }

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

            badge.className = 'badge bg-primary';
            badge.textContent = 'Preview (' + selected.length + ')';

            const total = selected.reduce((sum, cb) => sum + Number(cb.dataset.price || 0), 0);
            countEl.textContent = String(selected.length);
            priceTotalEl.textContent = total.toFixed(2);
            namesEl.textContent = selected.map(cb => cb.closest('.form-check').innerText.trim().split('\n')[0]).join(', ');

            modulesEl.innerHTML = '';
            const moduleSet = new Set();
            selected.forEach(cb => {
                const label = cb.closest('.form-check').querySelector('.form-check-label');
                const modulesLine = Array.from(label.querySelectorAll('span')).map(s => s.textContent.trim()).find(t => t.startsWith('Modules:'));
                if (modulesLine) {
                    modulesLine.replace('Modules:', '').split(',').map(s => s.trim()).filter(Boolean).forEach(m => moduleSet.add(m));
                }
            });

            if (moduleSet.size === 0) {
                modulesEl.innerHTML = '<span class="text-muted small">No modules</span>';
            } else {
                Array.from(moduleSet).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 && selected.length === 1 && (priceInput.value === '' || Number(priceInput.value) === 0)) {
                priceInput.value = Number(selected[0].dataset.price || 0).toFixed(2);
            }
        }

        packageChecks.forEach(cb => cb.addEventListener('change', updatePreview));
        updatePreview();
    })();
</script>
@endpush