{{-- resources/views/conference/venues.blade.php --}}
@extends('layouts.app')
@section('title', 'Conference Venues')
@section('page_title', 'Conference Venues')
@section('page_subtitle', 'Manage your event spaces')

@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">

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

            @if($venues->isEmpty())
                <div class="card-body text-center py-5">
                    <i class="bi bi-building"
                       style="font-size:2.5rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-3 mb-1">No venues yet</p>
                </div>
            @else
                @foreach($venues as $venue)
                    <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:8px;margin-bottom:6px;flex-wrap:wrap;">
                                    <span class="fw-bold"
                                          style="font-size:.9rem;">
                                        {{ $venue->name }}
                                    </span>
                                    @if(!$venue->is_active)
                                        <span style="font-size:.68rem;background:#f1f5f9;
                                                     color:var(--muted);padding:2px 7px;
                                                     border-radius:4px;">
                                            Inactive
                                        </span>
                                    @endif
                                    @if($venue->floor)
                                        <span style="font-size:.72rem;color:var(--muted);">
                                            {{ $venue->floor }}
                                        </span>
                                    @endif
                                </div>

                                {{-- Capacities --}}
                                <div style="display:flex;gap:10px;flex-wrap:wrap;
                                            font-size:.72rem;margin-bottom:8px;">
                                    @foreach([
                                        'capacity_theatre'   => 'Theatre',
                                        'capacity_classroom' => 'Classroom',
                                        'capacity_boardroom' => 'Boardroom',
                                        'capacity_u_shape'   => 'U-Shape',
                                        'capacity_banquet'   => 'Banquet',
                                    ] as $field => $label)
                                        @if($venue->$field)
                                            <span style="background:var(--bg);
                                                         border-radius:4px;
                                                         padding:2px 7px;">
                                                <span style="color:var(--muted);">{{ $label }}:</span>
                                                <strong>{{ $venue->$field }}</strong>
                                            </span>
                                        @endif
                                    @endforeach
                                    @if($venue->size_sqm)
                                        <span style="background:var(--bg);
                                                     border-radius:4px;
                                                     padding:2px 7px;color:var(--muted);">
                                            {{ $venue->size_sqm }}m²
                                        </span>
                                    @endif
                                </div>

                                {{-- Rates --}}
                                <div style="display:flex;gap:12px;
                                            font-size:.73rem;flex-wrap:wrap;">
                                    @if($venue->hourly_rate)
                                        <span>
                                            ${{ number_format($venue->hourly_rate, 0) }}/hr
                                        </span>
                                    @endif
                                    @if($venue->half_day_rate)
                                        <span>
                                            ${{ number_format($venue->half_day_rate, 0) }} half-day
                                        </span>
                                    @endif
                                    @if($venue->full_day_rate)
                                        <span>
                                            ${{ number_format($venue->full_day_rate, 0) }} full-day
                                        </span>
                                    @endif
                                    <span style="color:var(--muted);">
                                        {{ $venue->bookings_count }}
                                        {{ Str::plural('booking', $venue->bookings_count) }}
                                    </span>
                                </div>

                                {{-- Amenities --}}
                                @if(!empty($venue->amenities))
                                    <div style="display:flex;gap:4px;flex-wrap:wrap;
                                                margin-top:8px;">
                                        @foreach(array_slice($venue->amenities ?? [], 0, 6) as $amenity)
                                            <span style="font-size:.65rem;background:#dbeafe;
                                                         color:#1e40af;padding:1px 6px;
                                                         border-radius:4px;">
                                                {{ $amenity }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <div style="display:flex;gap:6px;flex-shrink:0;">
                                <a href="{{ tenant_route('conferences.create') }}?venue={{ $venue->id }}"
                                   class="btn btn-xs btn-primary">
                                    Book
                                </a>
                                <button class="btn btn-xs btn-outline-secondary"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editVenueModal"
                                        data-venue="{{ $venue->toJson() }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form method="POST"
                                      action="{{ tenant_route('conference.venues.destroy', ['venue' => $venue->id]) }}"
                                      onsubmit="return confirm('Delete this venue?')">
                                    @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 Venue Form --}}
    <div class="col-xl-4">
        <div class="card" id="venueFormCard">
            <div class="card-header">
                <span class="card-title" id="venueFormTitle">Add Venue</span>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ tenant_route('conference.venues.store') }}"
                      id="venueForm">
                    @csrf
                    <input type="hidden" name="_method"
                           id="venueMethod" value="POST">

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

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Floor / Location</label>
                        <input type="text" name="floor" id="venueFloor"
                               class="form-control form-control-sm"
                               value="{{ old('floor') }}"
                               placeholder="e.g. Ground Floor">
                    </div>

                    <div class="mb-2">
                        <label class="form-label fw-semibold">
                            Capacities
                        </label>
                    </div>
                    <div class="row g-2 mb-3">
                        @foreach([
                            'capacity_theatre'   => 'Theatre',
                            'capacity_classroom' => 'Classroom',
                            'capacity_boardroom' => 'Boardroom',
                            'capacity_u_shape'   => 'U-Shape',
                            'capacity_banquet'   => 'Banquet',
                        ] as $field => $label)
                            <div class="col-6">
                                <label style="font-size:.7rem;color:var(--muted);">
                                    {{ $label }}
                                </label>
                                <input type="number" name="{{ $field }}"
                                       id="venue_{{ $field }}"
                                       class="form-control form-control-sm"
                                       min="1"
                                       placeholder="Capacity">
                            </div>
                        @endforeach
                        <div class="col-6">
                            <label style="font-size:.7rem;color:var(--muted);">
                                Size (m²)
                            </label>
                            <input type="number" name="size_sqm"
                                   id="venueSqm"
                                   class="form-control form-control-sm"
                                   min="0" step="0.1">
                        </div>
                    </div>

                    <div class="mb-2">
                        <label class="form-label fw-semibold">Rates</label>
                    </div>
                    <div class="row g-2 mb-3">
                        @foreach([
                            'hourly_rate'   => 'Hourly',
                            'half_day_rate' => 'Half Day',
                            'full_day_rate' => 'Full Day',
                        ] as $field => $label)
                            <div class="col-4">
                                <label style="font-size:.7rem;color:var(--muted);">
                                    {{ $label }}
                                </label>
                                <input type="number" name="{{ $field }}"
                                       id="venue_{{ $field }}"
                                       class="form-control form-control-sm"
                                       min="0" step="0.01"
                                       placeholder="0.00">
                            </div>
                        @endforeach
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Currency</label>
                        <select name="currency" class="form-select form-select-sm">
                            @foreach(config('kubhuka.general.supported_currencies', []) as $code => $info)
                                <option value="{{ $code }}"
                                        {{ (tenant()->baseCurrency?->code ?? 'USD') === $code ? 'selected' : '' }}>
                                    {{ $code }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold"
                               style="font-size:.75rem;">
                            Amenities
                        </label>
                        <div style="display:flex;flex-wrap:wrap;gap:4px;">
                            @foreach(['Projector','Screen','Whiteboard','Flipchart','WiFi','Air Conditioning','PA System','Video Conferencing','Natural Light','Breakout Area'] as $amenity)
                                <label style="cursor:pointer;">
                                    <input type="checkbox"
                                           name="amenities[]"
                                           value="{{ $amenity }}"
                                           style="display:none;"
                                           class="amenity-check">
                                    <span class="amenity-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;">
                                        {{ $amenity }}
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit"
                                class="btn btn-primary btn-sm">
                            Save Venue
                        </button>
                        <button type="button"
                                onclick="resetVenueForm()"
                                class="btn btn-outline-secondary btn-sm">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
// Toggle amenity badge style
document.querySelectorAll('.amenity-check').forEach(cb => {
    cb.addEventListener('change', function() {
        this.nextElementSibling.style.background = this.checked ? '#dbeafe' : '#f1f5f9';
        this.nextElementSibling.style.color      = this.checked ? '#1e40af' : '#475569';
        this.nextElementSibling.style.borderColor= this.checked ? '#93c5fd' : 'var(--border)';
    });
});

function resetVenueForm() {
    document.getElementById('venueFormTitle').textContent = 'Add Venue';
    document.getElementById('venueForm').reset();
    document.getElementById('venueMethod').value = 'POST';
    document.getElementById('venueForm').action =
        '{{ tenant_route('conference.venues.store') }}';
    document.querySelectorAll('.amenity-badge').forEach(b => {
        b.style.background = '#f1f5f9';
        b.style.color      = '#475569';
        b.style.borderColor= 'var(--border)';
    });
}
</script>
@endpush