{{-- resources/views/conference/packages.blade.php --}}
@extends('layouts.app')
@section('title', 'Conference Packages')
@section('page_title', 'Conference Packages')
@section('page_subtitle', 'Day delegate and event packages')

@section('content')

<div class="d-flex gap-2 mb-3">
    <a href="{{ tenant_route('conference.index') }}"
       class="btn btn-sm btn-outline-secondary">← Conference</a>
</div>

<div class="row g-3">

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-box me-2" style="color:var(--clay)"></i>
                    Packages
                </span>
            </div>

            @if($packages->isEmpty())
                <div class="card-body text-center py-5">
                    <i class="bi bi-box"
                       style="font-size:2.5rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-3 mb-1">No packages yet</p>
                </div>
            @else
                @foreach($packages as $pkg)
                    <div style="padding:18px;border-bottom:1px solid var(--border);">
                        <div style="display:flex;justify-content:space-between;
                                    align-items:flex-start;gap:12px;flex-wrap:wrap;">
                            <div style="flex:1;">
                                <div style="display:flex;align-items:center;
                                            gap:10px;margin-bottom:5px;flex-wrap:wrap;">
                                    <span class="fw-bold" style="font-size:.9rem;">
                                        {{ $pkg->name }}
                                    </span>
                                    <span style="font-size:.82rem;font-weight:700;
                                                 color:var(--clay);">
                                        ${{ number_format($pkg->price_per_pax, 2) }}
                                        <span style="font-size:.7rem;font-weight:400;
                                                     color:var(--muted);">
                                            / pax
                                        </span>
                                    </span>
                                    @if(!$pkg->is_active)
                                        <span style="font-size:.68rem;background:#f1f5f9;
                                                     color:var(--muted);padding:2px 7px;
                                                     border-radius:4px;">
                                            Inactive
                                        </span>
                                    @endif
                                </div>

                                @if($pkg->description)
                                    <div style="font-size:.76rem;color:var(--muted);
                                                margin-bottom:7px;line-height:1.4;">
                                        {{ $pkg->description }}
                                    </div>
                                @endif

                                <div style="display:flex;gap:10px;flex-wrap:wrap;
                                            font-size:.72rem;color:var(--muted);">
                                    @if($pkg->min_pax || $pkg->max_pax)
                                        <span>
                                            <i class="bi bi-people me-1"></i>
                                            {{ $pkg->min_pax ?? 1 }}
                                            @if($pkg->max_pax) – {{ $pkg->max_pax }} @endif
                                            pax
                                        </span>
                                    @endif
                                    @if($pkg->duration_hours)
                                        <span>
                                            <i class="bi bi-clock me-1"></i>
                                            {{ $pkg->duration_hours }}h
                                        </span>
                                    @endif
                                    <span>
                                        <i class="bi bi-calendar-check me-1"></i>
                                        {{ $pkg->bookings_count }}
                                        {{ Str::plural('booking', $pkg->bookings_count) }}
                                    </span>
                                </div>

                                @if(!empty($pkg->includes))
                                    <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;">
                                        @foreach($pkg->includes ?? [] as $item)
                                            <span style="font-size:.65rem;background:#d1fae5;
                                                         color:#065f46;padding:2px 7px;
                                                         border-radius:4px;">
                                                ✓ {{ $item }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <div style="display:flex;gap:6px;flex-shrink:0;">
                                <button class="btn btn-xs btn-outline-secondary"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editPkgModal"
                                        data-pkg="{{ $pkg->toJson() }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form method="POST"
                                      action="{{ tenant_route('conference.packages.destroy', ['package' => $pkg->id]) }}"
                                      onsubmit="return confirm('Delete this package?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-xs btn-outline-danger"
                                            type="submit">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    {{-- Add Package --}}
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <span class="card-title">Add Package</span>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ tenant_route('conference.packages.store') }}">
                    @csrf

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

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" rows="2"
                                  class="form-control"
                                  placeholder="What's included in this package">{{ old('description') }}</textarea>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold">
                                Price / Pax <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="price_per_pax"
                                   class="form-control @error('price_per_pax') is-invalid @enderror"
                                   value="{{ old('price_per_pax') }}"
                                   min="0" step="0.01" required>
                            @error('price_per_pax')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Currency</label>
                            <select name="currency" class="form-select">
                                @foreach(config('kubhuka.general.supported_currencies', []) as $code => $info)
                                    <option value="{{ $code }}"
                                            {{ (tenant()->baseCurrency?->code ?? 'USD') === $code ? 'selected' : '' }}>
                                        {{ $code }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-4">
                            <label class="form-label fw-semibold"
                                   style="font-size:.75rem;">Min Pax</label>
                            <input type="number" name="min_pax"
                                   class="form-control form-control-sm"
                                   min="1" value="{{ old('min_pax', 10) }}">
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold"
                                   style="font-size:.75rem;">Max Pax</label>
                            <input type="number" name="max_pax"
                                   class="form-control form-control-sm"
                                   min="1" value="{{ old('max_pax') }}"
                                   placeholder="—">
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold"
                                   style="font-size:.75rem;">Hours</label>
                            <input type="number" name="duration_hours"
                                   class="form-control form-control-sm"
                                   min="0.5" step="0.5"
                                   value="{{ old('duration_hours', 8) }}">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold"
                               style="font-size:.75rem;">
                            What's Included
                        </label>
                        <div style="display:flex;flex-wrap:wrap;gap:4px;">
                            @foreach(['Venue Hire','Morning Tea','Lunch','Afternoon Tea','Mineral Water','Projector','Stationery','WiFi','PA System','Whiteboard'] as $item)
                                <label style="cursor:pointer;">
                                    <input type="checkbox"
                                           name="includes[]"
                                           value="{{ $item }}"
                                           style="display:none;"
                                           class="include-check">
                                    <span class="include-badge"
                                          style="font-size:.65rem;background:#f1f5f9;
                                                 color:#475569;padding:3px 8px;
                                                 border-radius:4px;display:inline-block;
                                                 border:1px solid var(--border);
                                                 cursor:pointer;">
                                        {{ $item }}
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Notes</label>
                        <textarea name="notes" rows="2"
                                  class="form-control form-control-sm"
                                  placeholder="Additional terms or notes">{{ old('notes') }}</textarea>
                    </div>

                    <button type="submit"
                            class="btn btn-primary btn-sm w-100">
                        <i class="bi bi-plus-lg me-1"></i>Create Package
                    </button>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
document.querySelectorAll('.include-check').forEach(cb => {
    cb.addEventListener('change', function() {
        this.nextElementSibling.style.background = this.checked ? '#d1fae5' : '#f1f5f9';
        this.nextElementSibling.style.color      = this.checked ? '#065f46' : '#475569';
        this.nextElementSibling.style.borderColor= this.checked ? '#6ee7b7' : 'var(--border)';
    });
});
</script>
@endpush