@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>{{ $property->name }}
            </h1>
            <p class="text-muted mb-0">{{ ucfirst($property->type) }} Property Details</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('booking.properties.index', $website) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Back to Properties
            </a>
            <a href="{{ route('booking.properties.edit', [$website, $property]) }}" class="btn btn-outline-primary">
                <i class="bi bi-pencil me-2"></i>Edit Property
            </a>
            <a href="{{ route('booking.calendar', $website) }}" class="btn btn-outline-primary">
                <i class="bi bi-calendar3 me-2"></i>View Calendar
            </a>
            <button type="button" class="btn btn-primary" onclick="toggleActiveStatus()">
                <i class="bi bi-{{ $property->is_active ? 'pause' : 'play' }} me-2"></i>
                {{ $property->is_active ? 'Deactivate' : 'Activate' }}
            </button>
        </div>
    </div>

    <div class="row">
        <!-- Property Information -->
        <div class="col-lg-8 mb-4">
            <!-- Basic Information -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>Property Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Property Name</label>
                            <div class="fw-semibold">{{ $property->name }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Type</label>
                            <div class="fw-semibold">{{ ucfirst($property->type) }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Maximum Guests</label>
                            <div class="fw-semibold">{{ $property->max_guests }} {{ Str::plural('guest', $property->max_guests) }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Status</label>
                            <div>
                                <span class="badge bg-{{ $property->is_active ? 'success' : 'danger' }} fs-6">
                                    {{ $property->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                        </div>
                        @if($property->description)
                        <div class="col-12 mb-3">
                            <label class="form-label text-muted">Description</label>
                            <div class="bg-light p-3 rounded">{{ $property->description }}</div>
                        </div>
                        @endif
                        @if($property->amenities)
                        <div class="col-12 mb-3">
                            <label class="form-label text-muted">Amenities</label>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($property->amenities as $amenity)
                                <span class="badge bg-primary">{{ $amenity }}</span>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Pricing Information -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-currency-dollar me-2"></i>Pricing
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Base Price</label>
                            <div class="fw-semibold fs-4 text-primary">RM {{ number_format($property->base_price, 2) }}</div>
                            <small class="text-muted">per {{ $property->pricing_type }}</small>
                        </div>
                        @if($property->cleaning_fee > 0)
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Cleaning Fee</label>
                            <div class="fw-semibold">RM {{ number_format($property->cleaning_fee, 2) }}</div>
                        </div>
                        @endif
                        @if($property->extra_guest_fee > 0)
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Extra Guest Fee</label>
                            <div class="fw-semibold">RM {{ number_format($property->extra_guest_fee, 2) }}</div>
                            <small class="text-muted">per guest above {{ $property->included_guests ?? $property->max_guests }}</small>
                        </div>
                        @endif
                        @if($property->security_deposit > 0)
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Security Deposit</label>
                            <div class="fw-semibold">RM {{ number_format($property->security_deposit, 2) }}</div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Recent Bookings -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-calendar-event me-2"></i>Recent Bookings
                        </h5>
                        <a href="{{ route('booking.index', $website) }}?property={{ $property->id }}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-list-ul me-1"></i>View All
                        </a>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if($property->bookings->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Reference</th>
                                    <th>Customer</th>
                                    <th>Dates</th>
                                    <th>Guests</th>
                                    <th>Status</th>
                                    <th>Amount</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($property->bookings as $booking)
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ $booking->booking_reference }}</div>
                                        <small class="text-muted">{{ $booking->created_at->format('M d, Y') }}</small>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $booking->customer_name }}</div>
                                        <small class="text-muted">{{ $booking->customer_email }}</small>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $booking->start_datetime->format('M d') }}</div>
                                        <small class="text-muted">to {{ $booking->end_datetime->format('M d, Y') }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ $booking->guests }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $booking->status_badge_class ?? 'secondary' }}">
                                            {{ ucfirst($booking->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">RM {{ number_format($booking->total_price, 2) }}</div>
                                    </td>
                                    <td>
                                        <a href="{{ route('booking.show', [$website, $booking]) }}" 
                                           class="btn btn-outline-primary btn-sm">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center py-4">
                        <i class="bi bi-calendar-x display-4 text-muted mb-3"></i>
                        <h6 class="text-muted">No bookings yet</h6>
                        <p class="text-muted mb-0">This property hasn't received any bookings.</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Statistics & Actions -->
        <div class="col-lg-4">
            <!-- Quick Stats -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-graph-up me-2"></i>Statistics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border-end">
                                <h4 class="text-primary mb-1">{{ $property->bookings()->count() }}</h4>
                                <small class="text-muted">Total Bookings</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <h4 class="text-success mb-1">{{ $property->bookings()->where('status', 'confirmed')->count() }}</h4>
                            <small class="text-muted">Confirmed</small>
                        </div>
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-info mb-1">RM {{ number_format($property->bookings()->where('payment_status', 'paid')->sum('total_price'), 0) }}</h4>
                                <small class="text-muted">Revenue</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-warning mb-1">{{ $property->bookings()->where('status', 'pending')->count() }}</h4>
                            <small class="text-muted">Pending</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-lightning me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#quickBookingModal">
                            <i class="bi bi-plus-circle me-2"></i>Create Booking
                        </button>
                        <a href="{{ route('booking.calendar', $website) }}?property={{ $property->id }}" class="btn btn-outline-primary">
                            <i class="bi bi-calendar3 me-2"></i>View Availability
                        </a>
                        <a href="{{ route('booking.properties.edit', [$website, $property]) }}" class="btn btn-outline-secondary">
                            <i class="bi bi-pencil me-2"></i>Edit Details
                        </a>
                        @if($property->is_active)
                        <button type="button" class="btn btn-outline-warning" onclick="toggleActiveStatus()">
                            <i class="bi bi-pause me-2"></i>Deactivate Property
                        </button>
                        @else
                        <button type="button" class="btn btn-outline-success" onclick="toggleActiveStatus()">
                            <i class="bi bi-play me-2"></i>Activate Property
                        </button>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Property Images -->
            @if($property->images && count($property->images) > 0)
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-images me-2"></i>Images
                    </h5>
                </div>
                <div class="card-body p-2">
                    <div class="row g-2">
                        @foreach(array_slice($property->images, 0, 4) as $image)
                        <div class="col-6">
                            <img src="{{ $image }}" class="img-fluid rounded" style="height: 80px; width: 100%; object-fit: cover;" alt="Property Image">
                        </div>
                        @endforeach
                    </div>
                    @if(count($property->images) > 4)
                    <div class="text-center mt-2">
                        <small class="text-muted">+{{ count($property->images) - 4 }} more images</small>
                    </div>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Quick Booking Modal -->
<div class="modal fade" id="quickBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Booking for {{ $property->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="quickBookingForm">
                @csrf
                <input type="hidden" name="property_id" value="{{ $property->id }}">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="customer_name" class="form-label">Customer Name *</label>
                            <input type="text" class="form-control" id="customer_name" name="customer_name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="customer_email" class="form-label">Customer Email *</label>
                            <input type="email" class="form-control" id="customer_email" name="customer_email" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="customer_phone" class="form-label">Customer Phone</label>
                            <input type="tel" class="form-control" id="customer_phone" name="customer_phone">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="guests" class="form-label">Guests *</label>
                            <input type="number" class="form-control" id="guests" name="guests" min="1" max="{{ $property->max_guests }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="start_datetime" class="form-label">Check-in *</label>
                            <input type="datetime-local" class="form-control" id="start_datetime" name="start_datetime" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="end_datetime" class="form-label">Check-out *</label>
                            <input type="datetime-local" class="form-control" id="end_datetime" name="end_datetime" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="special_requests" class="form-label">Special Requests</label>
                        <textarea class="form-control" id="special_requests" name="special_requests" rows="2"></textarea>
                    </div>
                    <div class="alert alert-info" id="price-calculation" style="display: none;">
                        <strong>Estimated Total:</strong> <span id="estimated-total">RM 0.00</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-2"></i>Create Booking
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Toggle property active status
function toggleActiveStatus() {
    const isActive = {{ $property->is_active ? 'true' : 'false' }};
    const action = isActive ? 'deactivate' : 'activate';
    
    if (!confirm(`Are you sure you want to ${action} this property?`)) {
        return;
    }

    fetch('{{ route("booking.properties.toggle-active", [$website, $property]) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', `Property ${action}d successfully!`);
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert('error', data.message || `Failed to ${action} property`);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', `An error occurred while ${action}ing the property`);
    });
}

// Calculate booking price
function calculatePrice() {
    const startDate = document.getElementById('start_datetime').value;
    const endDate = document.getElementById('end_datetime').value;
    const guests = document.getElementById('guests').value;
    
    if (startDate && endDate && guests) {
        // Calculate nights
        const start = new Date(startDate);
        const end = new Date(endDate);
        const nights = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
        
        if (nights > 0) {
            const basePrice = {{ $property->base_price }};
            const cleaningFee = {{ $property->cleaning_fee ?? 0 }};
            const extraGuestFee = {{ $property->extra_guest_fee ?? 0 }};
            const includedGuests = {{ $property->included_guests ?? $property->max_guests }};
            
            let total = basePrice * nights + cleaningFee;
            
            if (guests > includedGuests) {
                total += extraGuestFee * (guests - includedGuests) * nights;
            }
            
            document.getElementById('estimated-total').textContent = `RM ${total.toFixed(2)}`;
            document.getElementById('price-calculation').style.display = 'block';
        }
    }
}

// Add event listeners for price calculation
['start_datetime', 'end_datetime', 'guests'].forEach(id => {
    document.getElementById(id).addEventListener('change', calculatePrice);
});

// Quick booking form submission
document.getElementById('quickBookingForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('{{ route("booking.properties.store", $website) }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', 'Booking created successfully!');
            bootstrap.Modal.getInstance(document.getElementById('quickBookingModal')).hide();
            this.reset();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert('error', data.message || 'Failed to create booking');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'An error occurred while creating the booking');
    });
});

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertAdjacentHTML('afterbegin', alertHtml);
    
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) alert.remove();
    }, 5000);
}
</script>

<style>
.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
}

.badge {
    font-size: 0.75em;
}

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