@extends('layouts.app')

@section('title', 'Request Stay Modification | Kevron Suites')

@section('content')
<section class="section-soft-blue py-16 min-h-[80vh] flex items-center">
    <div class="max-w-lg mx-auto px-4 sm:px-6 w-full">
        
        <!-- Header -->
        <div class="text-center mb-8">
            <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Reservation Adjustment</span>
            <h2>Request Stay Modification</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 pt-2">
                Modify dates or suites for reservation <span class="font-bold text-slate-800 dark:text-slate-200">{{ $booking->booking_reference }}</span>.
            </p>
        </div>

        <!-- Modification Request Form -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-8 shadow-sm"
             style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">

             <form method="POST" action="{{ route('booking.modify_submit', ['reference' => $booking->booking_reference]) }}" class="space-y-6 text-xs font-semibold">
                 @csrf
                 
                 @if($errors->any())
                     <div class="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 p-3 text-[11px] font-bold" style="border-radius: 0.1rem;">
                         {{ $errors->first() }}
                     </div>
                 @endif

                 <div>
                     <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Current Suite</span>
                     <span class="text-slate-800 dark:text-slate-200 font-bold text-xs">{{ $booking->apartmentType->name }}</span>
                 </div>

                 <div>
                     <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-2">Proposed Suite Category</span>
                     <select name="proposed_apartment_type_id" required 
                             class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                         @foreach($apartments as $apt)
                             <option value="{{ $apt->id }}" {{ $booking->apartment_type_id == $apt->id ? 'selected' : '' }}>
                                 {{ $apt->name }} (₦{{ number_format($apt->base_price_nightly) }}/night)
                             </option>
                         @endforeach
                     </select>
                 </div>

                 <div class="grid grid-cols-2 gap-4">
                     <div>
                         <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Proposed Check-in</label>
                         <input type="date" name="proposed_check_in" required value="{{ optional($booking->check_in_date)->format('Y-m-d') }}"
                                class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                     </div>
                     <div>
                         <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Proposed Check-out</label>
                         <input type="date" name="proposed_check_out" required value="{{ optional($booking->check_out_date)->format('Y-m-d') }}"
                                class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                     </div>
                 </div>

                 <div>
                     <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Reason for Modification</label>
                     <textarea name="reason" rows="4" required placeholder="Describe the reason for adjustment (minimum 10 characters)..."
                               class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium leading-relaxed"></textarea>
                 </div>

                 <div class="pt-4 flex items-center space-x-3">
                     <a href="{{ route('booking.find') }}" class="btn-pill btn-outline-gold text-[10px] py-2.5 w-1/2 text-center font-bold">
                         Cancel Request
                     </a>
                     <button type="submit" class="btn-pill btn-primary text-[10px] py-2.5 w-1/2 text-center font-bold">
                         Submit Request
                     </button>
                 </div>
             </form>

        </div>

    </div>
</section>
@endsection