@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-building me-2 text-primary"></i>Booking Properties
            </h1>
            <p class="text-muted mb-0">Manage your accommodations, services, and bookable items</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('booking.properties.create', $website) }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-2"></i>Add Property
            </a>
            <a href="{{ route('booking.calendar', $website) }}" class="btn btn-outline-primary">
                <i class="bi bi-calendar3 me-2"></i>Calendar View
            </a>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(to right, #2948ff, #396afc);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-building display-4 mb-2"></i>
                    <h3 class="mb-1">{{ $properties->total() }}</h3>
                    <p class="mb-0 opacity-75">Total Properties</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-check-circle display-4 mb-2"></i>
                    <h3 class="mb-1">{{ $website->bookingProperties()->where('is_active', true)->count() }}</h3>
                    <p class="mb-0 opacity-75">Active Properties</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-calendar-event display-4 mb-2"></i>
                    <h3 class="mb-1">{{ $website->bookings()->where('status', 'confirmed')->count() }}</h3>
                    <p class="mb-0 opacity-75">Active Bookings</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                <div class="card-body text-white text-center">
                    <i class="bi bi-cash-stack display-4 mb-2"></i>
                    <h3 class="mb-1">RM {{ number_format($website->bookings()->where('payment_status', 'paid')->sum('total_price'), 0) }}</h3>
                    <p class="mb-0 opacity-75">Total Revenue</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Properties Grid -->
    @if($properties->count() > 0)
    <div class="row">
        @foreach($properties as $property)
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1 fw-semibold">{{ $property->name }}</h6>
                            <small class="text-muted">{{ ucfirst($property->type) }}</small>
                        </div>
                        <span class="badge bg-{{ $property->is_active ? 'success' : 'secondary' }}">
                            {{ $property->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    @if($property->short_description)
                    <p class="text-muted small mb-3">{{ Str::limit($property->short_description, 100) }}</p>
                    @endif

                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-semibold text-primary">{{ $property->formatted_price }}</span>
                            <small class="text-muted">Max {{ $property->max_guests }} guests</small>
                        </div>
                    </div>

                    <div class="row text-center">
                        <div class="col-4">
                            <div class="border-end">
                                <div class="fw-semibold">{{ $property->bookings()->where('status', 'confirmed')->count() }}</div>
                                <small class="text-muted">Bookings</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="border-end">
                                <div class="fw-semibold">{{ $property->bookings()->where('start_datetime', '>=', now())->count() }}</div>
                                <small class="text-muted">Upcoming</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="fw-semibold">RM {{ number_format($property->bookings()->where('payment_status', 'paid')->sum('total_price'), 0) }}</div>
                            <small class="text-muted">Revenue</small>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0">
                    <div class="d-flex gap-2">
                        <a href="{{ route('booking.properties.show', [$website, $property]) }}"
                           class="btn btn-primary btn-sm flex-fill">
                            <i class="bi bi-eye me-1"></i>View
                        </a>
                        <a href="{{ route('booking.properties.edit', [$website, $property]) }}"
                           class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <form action="{{ route('booking.properties.toggle-active', [$website, $property]) }}"
                              method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-{{ $property->is_active ? 'warning' : 'success' }} btn-sm">
                                <i class="bi bi-{{ $property->is_active ? 'pause' : 'play' }}"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-center">
        {{ $properties->links() }}
    </div>
    @else
    <!-- Empty State -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center py-5">
                    <i class="bi bi-building display-1 text-muted mb-4"></i>
                    <h4 class="text-muted mb-3">No Properties Yet</h4>
                    <p class="text-muted mb-4">Start by adding your first bookable property, service, or accommodation.</p>
                    <a href="{{ route('booking.properties.create', $website) }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>Add Your First Property
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<style>
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.border-end {
    border-right: 1px solid #dee2e6 !important;
}
</style>
@endsection