@extends('layouts.app')

@section('title', 'Beach Reservation Details')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Beach Reservation Details</h1>
                </div>
                <div class="col-sm-6">
                    <div class="float-sm-right">
                        <a href="{{ route('beach-reservations.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- Reservation Information -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-info-circle"></i> Reservation Information
                            </h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted">Full Name</label>
                                        <p class="form-control-static">{{ $beachReservation->full_name }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted">Reservation Date</label>
                                        <p class="form-control-static">{{ $beachReservation->formatted_date }}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted">Number of Persons</label>
                                        <p class="form-control-static">
                                            <span class="badge bg-info text-white">{{ $beachReservation->number_of_persons }}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted">Status</label>
                                        <p class="form-control-static">
                                            @php
                                                $statusColors = [
                                                    'pending' => ['bg' => 'bg-warning', 'text' => 'text-dark'],
                                                    'approved' => ['bg' => 'bg-success', 'text' => 'text-white'],
                                                    'rejected' => ['bg' => 'bg-danger', 'text' => 'text-white']
                                                ];
                                                $status = $beachReservation->status;
                                                $colors = $statusColors[$status];
                                            @endphp
                                            <span class="badge {{ $colors['bg'] }} {{ $colors['text'] }} p-2">
                                                {{ ucfirst($status) }}
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold text-muted">Instagram Link</label>
                                <p class="form-control-static">
                                    <a href="{{ $beachReservation->instagram_link }}" target="_blank" class="text-primary">
                                        <i class="fab fa-instagram"></i> {{ $beachReservation->instagram_link }}
                                    </a>
                                </p>
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold text-muted">Created At</label>
                                <p class="form-control-static">{{ $beachReservation->created_at->format('M d, Y H:i') }}</p>
                            </div>

                            @if($beachReservation->notes)
                            <div class="form-group">
                                <label class="font-weight-bold text-muted">Notes</label>
                                <p class="form-control-static">{{ $beachReservation->notes }}</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Customer Information -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-user"></i> Customer Information
                            </h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted">Email</label>
                                        <p class="form-control-static">{{ $beachReservation->user->email }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted">Phone</label>
                                        <p class="form-control-static">{{ $beachReservation->user->phone ?? 'Not provided' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Admin Actions -->
                    @if(auth()->user()->isAdmin() && $beachReservation->isPending())
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-cogs"></i> Admin Actions
                            </h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <form method="POST" action="{{ route('beach-reservations.approve', $beachReservation) }}">
                                        @csrf
                                        <button type="submit" class="btn btn-success btn-block" onclick="return confirm('Are you sure you want to approve this reservation?')">
                                            <i class="fas fa-check"></i> Approve Reservation
                                        </button>
                                    </form>
                                </div>
                                <div class="col-sm-6">
                                    <form method="POST" action="{{ route('beach-reservations.reject', $beachReservation) }}">
                                        @csrf
                                        <button type="submit" class="btn btn-danger btn-block" onclick="return confirm('Are you sure you want to reject this reservation?')">
                                            <i class="fas fa-times"></i> Reject Reservation
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>

                <!-- ID Images -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-id-card"></i> ID Images
                            </h3>
                        </div>
                        <div class="card-body">
                            <!-- ID Head Image -->
                            <div class="form-group">
                                <label class="font-weight-bold text-muted">ID Head Image</label>
                                <div class="text-center">
                                    <div class="image-container mb-3">
                                        <img src="{{ Storage::url($beachReservation->id_head_image) }}" 
                                             alt="ID Head Image" 
                                             class="img-fluid rounded border" 
                                             style="max-height: 300px; width: 100%; object-fit: cover;">
                                    </div>
                                    <a href="{{ Storage::url($beachReservation->id_head_image) }}" 
                                       target="_blank" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-external-link-alt"></i> View Full Size
                                    </a>
                                </div>
                            </div>

                            <hr>

                            <!-- ID Tail Image -->
                            <div class="form-group">
                                <label class="font-weight-bold text-muted">ID Tail Image</label>
                                <div class="text-center">
                                    <div class="image-container mb-3">
                                        <img src="{{ Storage::url($beachReservation->id_tail_image) }}" 
                                             alt="ID Tail Image" 
                                             class="img-fluid rounded border" 
                                             style="max-height: 300px; width: 100%; object-fit: cover;">
                                    </div>
                                    <a href="{{ Storage::url($beachReservation->id_tail_image) }}" 
                                       target="_blank" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-external-link-alt"></i> View Full Size
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<style>
.badge {
    font-size: 0.9em;
    font-weight: 500;
    padding: 0.5em 1em;
}
.badge.bg-warning {
    background-color: #ffc107 !important;
}
.badge.bg-info {
    background-color: #17a2b8 !important;
}
.badge.bg-success {
    background-color: #28a745 !important;
}
.badge.bg-danger {
    background-color: #dc3545 !important;
}
.form-control-static {
    padding: 0.375rem 0;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    background-color: #f8f9fa;
}
.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card {
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.card-title {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
}
</style>
@endsection