@extends('layouts.app')

@section('title', 'Request Stay Cancellation | 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-red-500 font-bold block mb-2">Reservation Termination</span>
            <h2>Request Stay Cancellation</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 pt-2">
                Cancel reservation <span class="font-bold text-slate-800 dark:text-slate-200">{{ $booking->booking_reference }}</span>.
            </p>
        </div>

        <!-- Cancellation 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;">

             <!-- Caution Banner -->
             <div class="mb-6 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900 p-4 text-[11px] font-bold text-red-600 dark:text-red-400" style="border-radius: 0.1rem;">
                 <span class="block uppercase tracking-wider text-[9px] mb-1">⚠️ Cancellation Policy Warning</span>
                 <p class="font-medium leading-relaxed mb-2">
                     {{ $policyApplied }}
                 </p>
                 <div class="flex justify-between items-center bg-white dark:bg-slate-900 border border-red-100 dark:border-red-900/50 p-2.5 mt-2" style="border-radius: 0.1rem;">
                     <span>Estimated Refund Amount:</span>
                     <span class="text-xs font-bold">₦{{ number_format($refundAmount) }}</span>
                 </div>
             </div>

             <form method="POST" action="{{ route('booking.cancel_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 class="grid grid-cols-2 gap-4 border-b border-slate-100 dark:border-slate-800 pb-4">
                     <div>
                         <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Check-in</span>
                         <span class="text-slate-800 dark:text-slate-200 font-bold text-xs">{{ optional($booking->check_in_date)->format('M d, Y') }}</span>
                     </div>
                     <div>
                         <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Check-out</span>
                         <span class="text-slate-800 dark:text-slate-200 font-bold text-xs">{{ optional($booking->check_out_date)->format('M d, Y') }}</span>
                     </div>
                 </div>

                 <div>
                     <label class="block text-slate-400 uppercase tracking-widest mb-1.5 font-bold">Reason for Cancellation</label>
                     <textarea name="reason" rows="4" required placeholder="Describe the reason for cancelling your stay (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-red-600 dark:focus:border-red-500 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">
                         Go Back
                     </a>
                     <button type="submit" class="btn-pill bg-red-600 text-white hover:bg-red-700 text-[10px] py-2.5 w-1/2 text-center font-bold">
                         Confirm Cancellation
                     </button>
                 </div>
             </form>

        </div>

    </div>
</section>
@endsection