@extends('layouts.app')

@section('title', 'New Rate Plan')
@section('nav_rates', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'New Rate Plan')
@section('page_subtitle', 'Define a pricing tier')

@section('content')

<div class="max-w-2xl"
     x-data="{
         type: '{{ old('type', 'percent_off') }}'
     }">

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
        <form method="POST" action="{{ route('rate-plans.store') }}">
            @csrf

            <div class="px-6 py-5 border-b border-gray-100">
                <h2 class="text-sm font-semibold text-gray-700">Plan Details</h2>
            </div>

            <div class="px-6 py-5 space-y-5">

                @if($errors->any())
                <div class="bg-red-50 border-[0.5px] border-red-200 rounded-xl px-4 py-3 text-red-700 text-sm">
                    <ul class="space-y-1 list-disc list-inside">
                        @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                {{-- Name & Code --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Plan Name <span class="text-red-400">*</span></label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                               class="w-full px-3 py-2.5 text-sm border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none"
                               placeholder="e.g. Corporate Rate">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Code <span class="text-red-400">*</span></label>
                        <input type="text" name="code" value="{{ old('code') }}" required maxlength="20"
                               class="w-full px-3 py-2.5 text-sm font-mono border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none uppercase"
                               placeholder="CORP">
                        <p class="text-gray-400 text-xs mt-1">Alphanumeric/dash/underscore, max 20 chars</p>
                    </div>
                </div>

                {{-- Type --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-2">Discount Type <span class="text-red-400">*</span></label>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        @foreach(['percent_off' => ['% Off Rack Rate', 'Apply a percentage discount to the room\'s rack rate.'], 'amount_off' => ['₱ Off Rack Rate', 'Subtract a fixed peso amount from the rack rate.'], 'fixed' => ['Fixed Rate per Room Type', 'Specify exact rates for each room type.']] as $val => [$label, $desc])
                        <label class="relative cursor-pointer">
                            <input type="radio" name="type" value="{{ $val }}" x-model="type"
                                   class="peer sr-only" {{ old('type', 'percent_off') === $val ? 'checked' : '' }}>
                            <div class="px-3 py-3 border-[0.5px] rounded-lg text-sm transition-colors
                                        peer-checked:border-teal-400 peer-checked:bg-teal-50 peer-checked:text-teal-700
                                        border-gray-200 text-gray-600 hover:border-gray-300">
                                <p class="font-semibold text-xs">{{ $label }}</p>
                                <p class="text-[10px] mt-0.5 text-gray-400 peer-checked:text-teal-500">{{ $desc }}</p>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>

                {{-- Value (only for percent_off / amount_off) --}}
                <div x-show="type !== 'fixed'" x-cloak>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                        <span x-text="type === 'percent_off' ? 'Discount (%)' : 'Discount (₱)'"></span>
                        <span class="text-red-400">*</span>
                    </label>
                    <div class="relative w-40">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"
                              x-text="type === 'percent_off' ? '%' : '₱'"></span>
                        <input type="number" name="value" value="{{ old('value') }}" min="0" max="100" step="0.01"
                               class="w-full pl-8 pr-3 py-2.5 text-sm border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none"
                               placeholder="10">
                    </div>
                </div>

                {{-- Fixed rates grid --}}
                <div x-show="type === 'fixed'" x-cloak>
                    <label class="block text-xs font-semibold text-gray-500 mb-2">Rate per Room Type <span class="text-red-400">*</span></label>
                    <div class="border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="bg-gray-50 border-b border-gray-100">
                                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Room Type</th>
                                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Rack Rate</th>
                                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Plan Rate</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($roomTypes as $type => $rackRate)
                                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }}">
                                    <td class="px-4 py-2.5 text-gray-700">{{ $type }}</td>
                                    <td class="px-4 py-2.5 text-gray-400">₱{{ number_format($rackRate, 0) }}</td>
                                    <td class="px-4 py-2.5">
                                        <div class="relative w-32">
                                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">₱</span>
                                            <input type="number" name="rates[{{ $type }}]"
                                                   value="{{ old('rates.'.$type) }}"
                                                   min="0" step="1"
                                                   class="w-full pl-7 pr-2 py-1.5 text-sm border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none"
                                                   placeholder="{{ number_format($rackRate, 0) }}">
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <p class="text-gray-400 text-xs mt-1.5">Leave blank to fall back to the rack rate for that type.</p>
                </div>

                {{-- Description --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Description</label>
                    <textarea name="description" rows="2" maxlength="500"
                              class="w-full px-3 py-2.5 text-sm border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none resize-none"
                              placeholder="Internal notes about this rate plan…">{{ old('description') }}</textarea>
                </div>

                {{-- Constraints --}}
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Min Nights</label>
                        <input type="number" name="min_nights" value="{{ old('min_nights') }}" min="1"
                               class="w-full px-3 py-2.5 text-sm border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none"
                               placeholder="None">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Valid From</label>
                        <input type="date" name="valid_from" value="{{ old('valid_from') }}"
                               class="w-full px-3 py-2.5 text-sm border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Valid Until</label>
                        <input type="date" name="valid_until" value="{{ old('valid_until') }}"
                               class="w-full px-3 py-2.5 text-sm border-[0.5px] border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 outline-none">
                    </div>
                </div>

                {{-- Active --}}
                <div class="flex items-center gap-3">
                    <input type="hidden" name="active" value="0">
                    <input type="checkbox" id="active" name="active" value="1"
                           class="w-4 h-4 text-teal-600 border-gray-300 rounded focus:ring-teal-500"
                           {{ old('active', '1') == '1' ? 'checked' : '' }}>
                    <label for="active" class="text-sm font-medium text-gray-700">Active — available when creating reservations</label>
                </div>

            </div>

            <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 rounded-b-xl flex items-center justify-end gap-3">
                <a href="{{ route('rate-plans.index') }}"
                   class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors">
                    Cancel
                </a>
                <button type="submit"
                        class="px-5 py-2.5 text-sm font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
                    Create Rate Plan
                </button>
            </div>

        </form>
    </div>

</div>

@endsection