{{-- resources/views/pricing/rate-plans.blade.php --}}
@extends('layouts.app')
@section('title', 'Rate Plans')
@section('page_title', 'Rate Plans')
@section('page_subtitle', 'Define your pricing plans')

@section('content')

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

<div class="row g-3">

    {{-- Plans List --}}
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-tag me-2" style="color:var(--clay)"></i>
                    Rate Plans
                    <span style="font-size:.75rem;font-weight:400;
                                 color:var(--muted);margin-left:6px;">
                        {{ $ratePlans->count() }} total
                    </span>
                </span>
            </div>

            @if($ratePlans->isEmpty())
                <div class="card-body text-center py-5">
                    <i class="bi bi-tag"
                       style="font-size:2.5rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-3 mb-1">No rate plans yet</p>
                    <p class="text-muted" style="font-size:.82rem;">
                        Create your first rate plan to start setting room rates
                    </p>
                </div>
            @else
                <div class="card-body" style="padding:0;">
                    @foreach($ratePlans as $plan)
                        <div style="padding:16px 18px;
                                    border-bottom:1px solid var(--border);">
                            <div style="display:flex;align-items:flex-start;
                                        justify-content:space-between;gap:12px;">
                                <div style="flex:1;">
                                    <div style="display:flex;align-items:center;
                                                gap:8px;flex-wrap:wrap;
                                                margin-bottom:4px;">
                                        <span class="fw-bold"
                                              style="font-size:.88rem;">
                                            {{ $plan->name }}
                                        </span>
                                        <span style="font-size:.68rem;font-weight:700;
                                                     background:var(--clay-light);
                                                     color:var(--clay);
                                                     padding:2px 7px;
                                                     border-radius:4px;">
                                            {{ $plan->code }}
                                        </span>
                                        @if(!$plan->is_active)
                                            <span style="font-size:.68rem;background:#f1f5f9;
                                                         color:var(--muted);padding:2px 7px;
                                                         border-radius:4px;">
                                                Inactive
                                            </span>
                                        @endif
                                    </div>

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

                                    <div style="display:flex;gap:12px;
                                                flex-wrap:wrap;font-size:.73rem;
                                                color:var(--muted);">
                                        @if($plan->meal_plan)
                                            <span>
                                                <i class="bi bi-cup-hot me-1"></i>
                                                {{ ucfirst(str_replace('_', ' ', $plan->meal_plan)) }}
                                            </span>
                                        @endif
                                        @if($plan->min_stay_nights)
                                            <span>
                                                <i class="bi bi-moon me-1"></i>
                                                Min {{ $plan->min_stay_nights }} nights
                                            </span>
                                        @endif
                                        @if($plan->advance_booking_days)
                                            <span>
                                                <i class="bi bi-clock me-1"></i>
                                                Book {{ $plan->advance_booking_days }} days ahead
                                            </span>
                                        @endif
                                        <span>
                                            <i class="bi bi-currency-dollar me-1"></i>
                                            {{ $plan->rates_count }}
                                            {{ Str::plural('rate', $plan->rates_count) }} set
                                        </span>
                                    </div>

                                    {{-- Inclusions --}}
                                    @if($plan->includes_breakfast || $plan->includes_lunch || $plan->includes_dinner)
                                        <div style="display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;">
                                            @if($plan->includes_breakfast)
                                                <span style="font-size:.65rem;background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:4px;">Breakfast</span>
                                            @endif
                                            @if($plan->includes_lunch)
                                                <span style="font-size:.65rem;background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:4px;">Lunch</span>
                                            @endif
                                            @if($plan->includes_dinner)
                                                <span style="font-size:.65rem;background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:4px;">Dinner</span>
                                            @endif
                                        </div>
                                    @endif
                                </div>

                                <div style="display:flex;gap:6px;flex-shrink:0;">
                                    <button class="btn btn-xs btn-outline-secondary"
                                            onclick="editPlan(
                                                {{ $plan->id }},
                                                '{{ addslashes($plan->name) }}',
                                                '{{ addslashes($plan->description ?? '') }}',
                                                '{{ $plan->meal_plan ?? '' }}',
                                                {{ $plan->includes_breakfast ? 1 : 0 }},
                                                {{ $plan->includes_lunch ? 1 : 0 }},
                                                {{ $plan->includes_dinner ? 1 : 0 }},
                                                {{ $plan->min_stay_nights ?? 'null' }},
                                                {{ $plan->max_stay_nights ?? 'null' }},
                                                {{ $plan->advance_booking_days ?? 'null' }},
                                                {{ $plan->sort_order }},
                                                {{ $plan->is_active ? 1 : 0 }}
                                            )">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form method="POST"
                                          action="{{ tenant_route('pricing.rate-plans.destroy', ['ratePlan' => $plan->id]) }}"
                                          onsubmit="return confirm('Delete this rate plan?')">
                                        @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
                </div>
            @endif
        </div>
    </div>

    {{-- Add / Edit Form --}}
    <div class="col-xl-4">
        <div class="card" id="planFormCard">
            <div class="card-header">
                <span class="card-title" id="planFormTitle">Add Rate Plan</span>
            </div>
            <div class="card-body">
                <form method="POST"
                      id="planForm"
                      action="{{ tenant_route('pricing.rate-plans.store') }}">
                    @csrf
                    <input type="hidden" name="_method" id="planMethod" value="POST">

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

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Code <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="code" id="planCode"
                               class="form-control @error('code') is-invalid @enderror"
                               value="{{ old('code') }}"
                               placeholder="e.g. BAR, CORP, BB"
                               style="text-transform:uppercase;"
                               required>
                        @error('code')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" id="planDescription"
                                  rows="2" class="form-control"
                                  placeholder="Optional description">{{ old('description') }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Meal Plan</label>
                        <select name="meal_plan" id="planMealPlan"
                                class="form-select">
                            <option value="">Room Only</option>
                            <option value="bed_breakfast">Bed & Breakfast</option>
                            <option value="half_board">Half Board</option>
                            <option value="full_board">Full Board</option>
                            <option value="all_inclusive">All Inclusive</option>
                        </select>
                    </div>

                    {{-- Inclusions --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Inclusions
                        </label>
                        <div style="display:flex;gap:12px;flex-wrap:wrap;">
                            @foreach(['breakfast','lunch','dinner'] as $meal)
                                <div class="form-check">
                                    <input type="checkbox"
                                           name="includes_{{ $meal }}"
                                           value="1"
                                           id="inc_{{ $meal }}"
                                           class="form-check-input">
                                    <label class="form-check-label"
                                           for="inc_{{ $meal }}"
                                           style="font-size:.8rem;">
                                        {{ ucfirst($meal) }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold"
                                   style="font-size:.75rem;">Min Stay</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="min_stay_nights"
                                       id="planMinStay"
                                       class="form-control" min="1"
                                       placeholder="Any">
                                <span class="input-group-text"
                                      style="font-size:.72rem;">nights</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold"
                                   style="font-size:.75rem;">Advance Booking</label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="advance_booking_days"
                                       id="planAdvance"
                                       class="form-control" min="0"
                                       placeholder="Any">
                                <span class="input-group-text"
                                      style="font-size:.72rem;">days</span>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold"
                               style="font-size:.75rem;">Sort Order</label>
                        <input type="number" name="sort_order"
                               id="planSortOrder"
                               class="form-control form-control-sm"
                               value="{{ old('sort_order', 0) }}" min="0">
                    </div>

                    <div id="planActiveField" class="mb-3" style="display:none;">
                        <div class="form-check form-switch">
                            <input type="checkbox" name="is_active"
                                   value="1" id="planActive"
                                   class="form-check-input" checked>
                            <label class="form-check-label"
                                   for="planActive"
                                   style="font-size:.8rem;">Active</label>
                        </div>
                    </div>

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

        {{-- Quick suggestions --}}
        <div class="card mt-3">
            <div class="card-header">
                <span class="card-title" style="font-size:.78rem;">
                    Common Plan Templates
                </span>
            </div>
            <div class="card-body" style="padding:12px;">
                @foreach([
                    ['BAR',  'Best Available Rate',  'room_only'],
                    ['BB',   'Bed & Breakfast',      'bed_breakfast'],
                    ['HB',   'Half Board',           'half_board'],
                    ['FB',   'Full Board',            'full_board'],
                    ['AI',   'All Inclusive',         'all_inclusive'],
                    ['CORP', 'Corporate Rate',        'room_only'],
                    ['GOVT', 'Government Rate',       'room_only'],
                ] as [$code, $name, $meal])
                    <div style="display:flex;justify-content:space-between;
                                align-items:center;padding:5px 0;
                                border-bottom:1px solid var(--border);
                                font-size:.78rem;">
                        <div>
                            <span class="fw-semibold">{{ $code }}</span>
                            <span style="color:var(--muted);margin-left:6px;">
                                {{ $name }}
                            </span>
                        </div>
                        <button type="button"
                                onclick="fillPlan('{{ $code }}', '{{ $name }}', '{{ $meal }}')"
                                class="btn btn-xs btn-outline-secondary">
                            Use
                        </button>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
function fillPlan(code, name, meal) {
    document.getElementById('planName').value     = name;
    document.getElementById('planCode').value     = code;
    document.getElementById('planMealPlan').value = meal;
    document.getElementById('planName').focus();
}

function editPlan(id, name, desc, meal, bkfast, lunch, dinner, minStay, maxStay, advance, sort, active) {
    document.getElementById('planFormTitle').textContent = 'Edit Rate Plan';
    document.getElementById('planMethod').value  = 'PUT';
    document.getElementById('planName').value    = name;
    document.getElementById('planDescription').value = desc;
    document.getElementById('planMealPlan').value = meal;
    document.getElementById('inc_breakfast').checked = bkfast;
    document.getElementById('inc_lunch').checked     = lunch;
    document.getElementById('inc_dinner').checked    = dinner;
    document.getElementById('planMinStay').value  = minStay || '';
    document.getElementById('planAdvance').value  = advance || '';
    document.getElementById('planSortOrder').value = sort;
    document.getElementById('planActive').checked = active;
    document.getElementById('planActiveField').style.display = 'block';

    const form = document.getElementById('planForm');
    form.action = form.action.replace(/\/rate-plans\/\d+$/, '')
        + '/rate-plans/' + id;
    form.querySelector('[name="_method"]').value = 'PUT';

    document.getElementById('planFormCard').scrollIntoView({ behavior: 'smooth' });
}

function resetPlanForm() {
    document.getElementById('planFormTitle').textContent = 'Add Rate Plan';
    document.getElementById('planForm').reset();
    document.getElementById('planMethod').value = 'POST';
    document.getElementById('planActiveField').style.display = 'none';
    document.getElementById('planForm').action =
        '{{ tenant_route('pricing.rate-plans.store') }}';
}
</script>
@endpush