@extends('layouts.app')

@section('title', 'Reservation #' . str_pad($reservation->id, 6, '0', STR_PAD_LEFT))

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li><a href="{{ route('dashboard') }}" class="text-slate-600 hover:text-slate-900">Dashboard</a></li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-slate-400 mx-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="{{ route('reservations.index') }}" class="text-slate-600 hover:text-slate-900">Reservations</a>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-slate-400 mx-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="text-slate-900 font-medium">Reservation #{{ str_pad($reservation->id, 6, '0', STR_PAD_LEFT) }}</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Reservation #{{ str_pad($reservation->id, 6, '0', STR_PAD_LEFT) }}</h1>
      <p class="text-slate-600 mt-2">
        @switch($reservation->status)
          @case('pending')
            <span class="inline-block px-3 py-1 bg-slate-100 text-slate-800 text-sm font-semibold rounded-full">Pending</span>
            @break
          @case('confirmed')
            <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 text-sm font-semibold rounded-full">Confirmed</span>
            @break
          @case('checked_in')
            <span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-sm font-semibold rounded-full">Checked In</span>
            @break
          @case('checked_out')
            <span class="inline-block px-3 py-1 bg-slate-100 text-slate-800 text-sm font-semibold rounded-full">Checked Out</span>
            @break
          @case('cancelled')
            <span class="inline-block px-3 py-1 bg-red-100 text-red-800 text-sm font-semibold rounded-full">Cancelled</span>
            @break
        @endswitch
      </p>
    </div>
    <div class="flex items-center space-x-3">
      <a href="{{ route('reservations.edit', $reservation->id) }}" class="flex items-center space-x-2 bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
        </svg>
        <span>Edit</span>
      </a>
      <button onclick="window.print()" class="flex items-center space-x-2 bg-slate-600 text-white px-6 py-3 rounded-lg hover:bg-slate-700 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4H7a2 2 0 01-2-2v-4a2 2 0 012-2h10a2 2 0 012 2v4a2 2 0 01-2 2zm0 0h4a2 2 0 002-2v-4a2 2 0 00-2-2h-.5"></path>
        </svg>
        <span>Print Invoice</span>
      </button>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Content -->
    <div class="lg:col-span-2 space-y-6">
      <!-- Guest Information -->
      <div class="bg-white rounded-lg border border-slate-200 p-6">
        <h2 class="text-xl font-semibold text-slate-900 mb-4">Guest Information</h2>
        <div class="grid grid-cols-2 gap-6">
          <div>
            <p class="text-sm text-slate-600 mb-1">Guest Name</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->guest_name }}</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Email</p>
            <p class="text-lg font-medium text-slate-900 break-all">{{ $reservation->email }}</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Phone</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->phone }}</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Nationality</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->nationality ?? 'N/A' }}</p>
          </div>
        </div>
      </div>

      <!-- Booking Details -->
      <div class="bg-white rounded-lg border border-slate-200 p-6">
        <h2 class="text-xl font-semibold text-slate-900 mb-4">Booking Details</h2>
        <div class="grid grid-cols-2 gap-6">
          <div>
            <p class="text-sm text-slate-600 mb-1">Room</p>
            <p class="text-lg font-medium text-slate-900">Room {{ $reservation->room->room_number }}</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Room Type</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->room->roomType->name ?? 'N/A' }}</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Check-in Date</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->check_in_date->format('M d, Y') }}</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Check-out Date</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->check_out_date->format('M d, Y') }}</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Number of Nights</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->check_out_date->diffInDays($reservation->check_in_date) }} nights</p>
          </div>
          <div>
            <p class="text-sm text-slate-600 mb-1">Occupancy</p>
            <p class="text-lg font-medium text-slate-900">{{ $reservation->adults }} adults, {{ $reservation->children ?? 0 }} children</p>
          </div>
          <div class="col-span-2">
            <p class="text-sm text-slate-600 mb-1">Booking Source</p>
            <p class="text-lg font-medium text-slate-900 capitalize">{{ str_replace('_', ' ', $reservation->booking_source) }}</p>
          </div>
        </div>

        @if($reservation->special_requests)
          <div class="mt-6 pt-6 border-t border-slate-200">
            <p class="text-sm text-slate-600 mb-2">Special Requests</p>
            <p class="text-slate-900">{{ $reservation->special_requests }}</p>
          </div>
        @endif
      </div>

      <!-- Payment Information -->
      <div class="bg-white rounded-lg border border-slate-200 p-6">
        <h2 class="text-xl font-semibold text-slate-900 mb-4">Payment Information</h2>
        <div class="space-y-4">
          <div class="grid grid-cols-2 gap-6">
            <div>
              <p class="text-sm text-slate-600 mb-1">Payment Method</p>
              <p class="text-lg font-medium text-slate-900 capitalize">{{ str_replace('_', ' ', $reservation->payment_method) }}</p>
            </div>
            <div>
              <p class="text-sm text-slate-600 mb-1">Payment Status</p>
              <div class="mt-1">
                @switch($reservation->payment_status)
                  @case('paid')
                    <span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-sm font-semibold rounded-full">Paid</span>
                    @break
                  @case('pending')
                    <span class="inline-block px-3 py-1 bg-yellow-100 text-yellow-800 text-sm font-semibold rounded-full">Pending</span>
                    @break
                  @case('cancelled')
                    <span class="inline-block px-3 py-1 bg-red-100 text-red-800 text-sm font-semibold rounded-full">Cancelled</span>
                    @break
                @endswitch
              </div>
            </div>
          </div>

          <div class="mt-6 pt-6 border-t border-slate-200 space-y-3">
            <div class="flex justify-between items-center">
              <span class="text-slate-600">Room Rate (per night):</span>
              <span class="font-medium text-slate-900">${{ number_format($reservation->room->rate_per_night ?? 0, 2) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-slate-600">Number of Nights:</span>
              <span class="font-medium text-slate-900">{{ $reservation->check_out_date->diffInDays($reservation->check_in_date) }}</span>
            </div>
            <div class="flex justify-between items-center pt-3 border-t border-slate-200">
              <span class="text-slate-900 font-semibold">Total Amount:</span>
              <span class="text-2xl font-bold text-slate-900">${{ number_format($reservation->total_amount ?? 0, 2) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-slate-900 font-semibold">Paid Amount:</span>
              <span class="text-lg font-semibold text-green-600">${{ number_format($reservation->paid_amount ?? 0, 2) }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-slate-900 font-semibold">Remaining Balance:</span>
              <span class="text-lg font-semibold text-orange-600">${{ number_format(($reservation->total_amount ?? 0) - ($reservation->paid_amount ?? 0), 2) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="space-y-6">
      <!-- Status Timeline -->
      <div class="bg-white rounded-lg border border-slate-200 p-6">
        <h2 class="text-lg font-semibold text-slate-900 mb-6">Booking Timeline</h2>
        <div class="space-y-4">
          <div class="flex items-start space-x-4">
            <div class="flex flex-col items-center">
              <div class="w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">✓</div>
              <div class="w-0.5 h-12 bg-slate-200 my-2"></div>
            </div>
            <div>
              <p class="font-semibold text-slate-900">Created</p>
              <p class="text-sm text-slate-600">{{ $reservation->created_at->format('M d, Y H:i') }}</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="flex flex-col items-center">
              <div class="w-8 h-8 {{ $reservation->status !== 'pending' ? 'bg-primary-600 text-white' : 'bg-slate-200 text-slate-600' }} rounded-full flex items-center justify-center text-sm font-semibold">{{ $reservation->status !== 'pending' ? '✓' : '•' }}</div>
              <div class="w-0.5 h-12 bg-slate-200 my-2"></div>
            </div>
            <div>
              <p class="font-semibold text-slate-900">Confirmed</p>
              <p class="text-sm text-slate-600">{{ $reservation->status !== 'pending' ? 'Confirmed' : 'Pending confirmation' }}</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="flex flex-col items-center">
              <div class="w-8 h-8 {{ in_array($reservation->status, ['checked_in', 'checked_out']) ? 'bg-primary-600 text-white' : 'bg-slate-200 text-slate-600' }} rounded-full flex items-center justify-center text-sm font-semibold">{{ in_array($reservation->status, ['checked_in', 'checked_out']) ? '✓' : '•' }}</div>
              <div class="w-0.5 h-12 bg-slate-200 my-2"></div>
            </div>
            <div>
              <p class="font-semibold text-slate-900">Checked In</p>
              <p class="text-sm text-slate-600">{{ in_array($reservation->status, ['checked_in', 'checked_out']) ? $reservation->check_in_date->format('M d, Y') : 'Pending' }}</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="flex flex-col items-center">
              <div class="w-8 h-8 {{ $reservation->status === 'checked_out' ? 'bg-primary-600 text-white' : 'bg-slate-200 text-slate-600' }} rounded-full flex items-center justify-center text-sm font-semibold">{{ $reservation->status === 'checked_out' ? '✓' : '•' }}</div>
            </div>
            <div>
              <p class="font-semibold text-slate-900">Checked Out</p>
              <p class="text-sm text-slate-600">{{ $reservation->status === 'checked_out' ? $reservation->check_out_date->format('M d, Y') : 'Pending' }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Quick Actions -->
      <div class="bg-white rounded-lg border border-slate-200 p-6">
        <h2 class="text-lg font-semibold text-slate-900 mb-4">Quick Actions</h2>
        <div class="space-y-2">
          @if($reservation->status === 'confirmed')
            <button class="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors duration-200 font-medium text-sm">
              Check In
            </button>
          @endif

          @if($reservation->status === 'checked_in')
            <button class="w-full bg-orange-600 text-white px-4 py-2 rounded-lg hover:bg-orange-700 transition-colors duration-200 font-medium text-sm">
              Check Out
            </button>
          @endif

          @if(!in_array($reservation->status, ['cancelled', 'checked_out']))
            <button class="w-full bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium text-sm" onclick="confirm('Cancel this reservation?') && location.href='#'">
              Cancel Reservation
            </button>
          @endif
        </div>
      </div>

      <!-- Summary Card -->
      <div class="bg-gradient-to-br from-primary-50 to-blue-50 rounded-lg border border-primary-200 p-6">
        <h2 class="text-lg font-semibold text-slate-900 mb-4">Summary</h2>
        <div class="space-y-3 text-sm">
          <div class="flex justify-between items-center pb-2 border-b border-primary-200">
            <span class="text-slate-600">Reservation ID:</span>
            <span class="font-medium text-slate-900">#{{ str_pad($reservation->id, 6, '0', STR_PAD_LEFT) }}</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-primary-200">
            <span class="text-slate-600">Check-in:</span>
            <span class="font-medium text-slate-900">{{ $reservation->check_in_date->format('M d, Y') }}</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-primary-200">
            <span class="text-slate-600">Check-out:</span>
            <span class="font-medium text-slate-900">{{ $reservation->check_out_date->format('M d, Y') }}</span>
          </div>
          <div class="flex justify-between items-center pt-2">
            <span class="text-slate-900 font-semibold">Total Amount:</span>
            <span class="text-lg font-bold text-primary-600">${{ number_format($reservation->total_amount ?? 0, 2) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style media="print">
  @media print {
    body {
      background: white;
    }
    .no-print {
      display: none !important;
    }
  }
</style>
@endsection