@extends('layouts.app')

@section('title', 'Edit Reservation')
@section('page_title', $reservation->booking_no)
@section('page_subtitle', 'Edit reservation for ' . $reservation->guest_name)

@section('nav_reservations', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')

<div class="max-w-3xl">

    <a href="{{ route('reservations.show', $reservation->id) }}"
       class="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 text-sm mb-6 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Reservation
    </a>

    @if ($errors->any())
    <div class="mb-4 bg-red-50 border-[0.5px] border-red-200 rounded-xl px-5 py-4">
        <p class="text-red-700 text-sm font-semibold mb-1">Please fix the following:</p>
        <ul class="text-red-600 text-sm list-disc list-inside space-y-0.5">
            @foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach
        </ul>
    </div>
    @endif

    <script>
    function editReservationData() {
        return {
            checkIn:  '{{ $reservation->check_in->format('Y-m-d') }}',
            checkOut: '{{ $reservation->check_out->format('Y-m-d') }}',
            rack: {{ (int) $reservation->rate }},
            planId: '{{ old('rate_plan_id', $reservation->rate_plan_id ?? '') }}',
            roomType: '{{ $reservation->room_type }}',
            ratePlans: @json($ratePlansJson),
            get selectedPlan() {
                if (!this.planId) return null;
                return this.ratePlans.find(function(p) { return p.id == this.planId; }.bind(this)) || null;
            },
            get rate() {
                var plan = this.selectedPlan;
                if (!plan) return this.rack;
                if (plan.type === 'percent_off') return Math.round(this.rack * (1 - plan.value / 100));
                if (plan.type === 'amount_off') return Math.max(0, this.rack - plan.value);
                if (plan.type === 'fixed') return (plan.rates[this.roomType] !== undefined ? plan.rates[this.roomType] : this.rack);
                return this.rack;
            },
            get savings() { return this.rack - this.rate; },
            get nights() {
                var diff = new Date(this.checkOut) - new Date(this.checkIn);
                return Math.max(0, Math.round(diff / 86400000));
            },
            get total() { return this.rate * this.nights; },
            fmt: function(n) { return '₱' + Number(n).toLocaleString('en-PH'); }
        };
    }
    </script>

    <form action="{{ route('reservations.update', $reservation->id) }}" method="POST" class="space-y-4"
          data-confirm="Save changes to this reservation?"
          x-data="editReservationData()">
        @csrf
        @method('PATCH')
        <input type="hidden" name="rate_plan_id" :value="planId || ''"  >

        {{-- ===== GUEST INFORMATION ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">1</div>
                <h3 class="text-gray-800 font-semibold text-sm">Guest Information</h3>
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 gap-4">

                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Full Name <span class="text-red-400">*</span></label>
                    <input type="text" name="guest_name" value="{{ old('guest_name', $reservation->guest_name) }}" required
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Email</label>
                    <input type="email" name="guest_email" value="{{ old('guest_email', $reservation->guest_email) }}"
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Phone <span class="text-red-400">*</span></label>
                    <input type="text" name="guest_phone" value="{{ old('guest_phone', $reservation->guest_phone) }}" required
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>

            </div>
        </div>

        {{-- ===== STAY DETAILS ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">2</div>
                <h3 class="text-gray-800 font-semibold text-sm">Stay Details</h3>
                <span class="ml-auto text-xs text-gray-400">
                    Room <span class="font-semibold text-gray-700">{{ $reservation->room_no }}</span>
                    — {{ $reservation->room_type }}
                    — <span class="text-teal-600 font-semibold" x-text="fmt(rate) + '/night'">&#8369;{{ number_format($reservation->rate, 0) }}/night</span>
                </span>
            </div>
            <div class="p-6">
                <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">Check-in Date <span class="text-red-400">*</span></label>
                        <input type="date" name="check_in" x-model="checkIn" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Check-out Date <span class="text-red-400">*</span></label>
                        <input type="date" name="check_out" x-model="checkOut" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Guests (Pax) <span class="text-red-400">*</span></label>
                        <input type="number" name="pax" value="{{ old('pax', $reservation->pax) }}" min="1" max="20" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                </div>

                <div class="mt-4 flex items-center gap-6 bg-gray-50 rounded-xl px-4 py-3">
                    <div>
                        <p class="text-gray-400 text-xs">Nights</p>
                        <p class="text-gray-800 font-semibold text-sm mt-0.5" x-text="nights">{{ $reservation->nights }}</p>
                    </div>
                    <div>
                        <p class="text-gray-400 text-xs">Rate/Night</p>
                        <p class="text-gray-800 font-semibold text-sm mt-0.5" x-text="fmt(rate)">&#8369;{{ number_format($reservation->rate, 0) }}</p>
                        <p x-show="savings > 0" x-cloak class="text-green-600 text-[10px] line-through" x-text="fmt(rack)"></p>
                    </div>
                    <div class="border-l border-gray-200 pl-6">
                        <p class="text-gray-400 text-xs">Revised Total</p>
                        <p class="text-teal-700 font-bold text-base mt-0.5" x-text="fmt(total)">₱{{ number_format($reservation->amount, 0) }}</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== BOOKING & NOTES ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">3</div>
                <h3 class="text-gray-800 font-semibold text-sm">Booking Details</h3>
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 gap-4">

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Booking Source</label>
                    <select name="source"
                            class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                   focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        @foreach (['Walk-in','Direct (Phone)','Booking.com','Agoda','Airbnb','Expedia','Travel Agent','Corporate','Website','Direct'] as $src)
                        <option value="{{ $src }}" @selected(old('source', $reservation->source) === $src)>{{ $src }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Rate Plan</label>
                    <select x-model="planId"
                            class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                   focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        <option value="">— Rack Rate (no plan) —</option>
                        @foreach($ratePlans as $plan)
                        <option value="{{ $plan->id }}" @selected(old('rate_plan_id', $reservation->rate_plan_id) == $plan->id)>
                            {{ $plan->name }} ({{ $plan->code }}) — {{ $plan->modifierLabel() }}
                        </option>
                        @endforeach
                    </select>
                    <p x-show="savings > 0" x-cloak class="text-green-600 text-xs mt-1 font-medium"
                       x-text="'Saves ' + fmt(savings) + '/night vs. rack rate'"></p>
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Notes / Special Requests</label>
                    <input type="text" name="notes" value="{{ old('notes', $reservation->notes) }}"
                           placeholder="Optional notes..."
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>

            </div>
        </div>

        {{-- ===== DEPOSIT ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">4</div>
                <h3 class="text-gray-800 font-semibold text-sm">Deposit & Payment</h3>
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Deposit Amount</label>
                    <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden">
                        <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-r border-gray-200">₱</span>
                        <input type="number" name="deposit_amount" value="{{ old('deposit_amount', $reservation->deposit_amount) }}" min="0" step="0.01"
                               class="flex-1 text-sm text-gray-700 px-3 py-2 focus:outline-none">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Deposit Received</label>
                    <label class="flex items-center gap-2.5 mt-2.5 cursor-pointer">
                        <input type="checkbox" name="deposit_paid" value="1"
                               @checked(old('deposit_paid', $reservation->deposit_paid))
                               class="rounded accent-teal-600 w-4 h-4">
                        <span class="text-sm text-gray-600">Deposit paid</span>
                    </label>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Payment Method</label>
                    <select name="deposit_method"
                            class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                   focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        <option value="">—</option>
                        @foreach (['Cash','GCash','Maya','Credit Card','Debit Card','Bank Transfer'] as $m)
                        <option @selected(old('deposit_method', $reservation->deposit_method) === $m)>{{ $m }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Reference / OR No.</label>
                    <input type="text" name="deposit_reference" value="{{ old('deposit_reference', $reservation->deposit_reference) }}"
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>

            </div>
        </div>

        {{-- ACTIONS --}}
        <div class="flex items-center justify-between">
            <p class="text-gray-400 text-xs">
                Booking # <span class="font-mono text-gray-600">{{ $reservation->booking_no }}</span>
                &mdash; Last updated {{ $reservation->updated_at->format('M j, Y g:i A') }}
            </p>
            <div class="flex items-center gap-2">
                <a href="{{ route('reservations.show', $reservation->id) }}"
                   class="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors font-medium">
                    Cancel
                </a>
                <button type="submit"
                        class="px-5 py-2 text-sm text-white bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors font-semibold">
                    Save Changes
                </button>
            </div>
        </div>

    </form>

</div>

@endsection