@extends('layouts.admin')

@section('title', 'Bookings - ' . $shop->name)

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2">
                <li class="breadcrumb-item"><a href="{{ route('admin.shops.index') }}">Shops</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.shops.show', $shop) }}">{{ $shop->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Bookings</li>
            </ol>
        </nav>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Booking Management</h1>
        <p class="text-muted mb-0">Manage bookings for {{ $shop->name }}</p>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addBookingModal">
            <i class="bi bi-plus me-1"></i>
            New Booking
        </button>
        <a href="{{ route('admin.shops.show', $shop) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Shop
        </a>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-2">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="text-primary mb-2">
                    <i class="bi bi-calendar-check" style="font-size: 1.5rem;"></i>
                </div>
                <h5 class="mb-1">{{ $stats['total'] }}</h5>
                <p class="text-muted mb-0 small">Total</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="text-warning mb-2">
                    <i class="bi bi-clock" style="font-size: 1.5rem;"></i>
                </div>
                <h5 class="mb-1">{{ $stats['pending'] }}</h5>
                <p class="text-muted mb-0 small">Pending</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="text-info mb-2">
                    <i class="bi bi-check-circle" style="font-size: 1.5rem;"></i>
                </div>
                <h5 class="mb-1">{{ $stats['confirmed'] }}</h5>
                <p class="text-muted mb-0 small">Confirmed</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="text-success mb-2">
                    <i class="bi bi-star" style="font-size: 1.5rem;"></i>
                </div>
                <h5 class="mb-1">{{ $stats['completed'] }}</h5>
                <p class="text-muted mb-0 small">Completed</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="text-primary mb-2">
                    <i class="bi bi-calendar-day" style="font-size: 1.5rem;"></i>
                </div>
                <h5 class="mb-1">{{ $stats['today'] }}</h5>
                <p class="text-muted mb-0 small">Today</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="text-info mb-2">
                    <i class="bi bi-calendar-plus" style="font-size: 1.5rem;"></i>
                </div>
                <h5 class="mb-1">{{ $stats['upcoming'] }}</h5>
                <p class="text-muted mb-0 small">Upcoming</p>
            </div>
        </div>
    </div>
</div>

<!-- Search and Filters -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white border-0">
        <h5 class="card-title mb-0 fw-bold">Search & Filters</h5>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('admin.shops.bookings', $shop) }}" class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label">Search Bookings</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ request('search') }}" placeholder="Reference, customer name, email...">
            </div>
            <div class="col-md-2">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">All Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                    <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    <option value="no_show" {{ request('status') == 'no_show' ? 'selected' : '' }}>No Show</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="payment_status" class="form-label">Payment</label>
                <select class="form-select" id="payment_status" name="payment_status">
                    <option value="">All Payments</option>
                    <option value="pending" {{ request('payment_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="partial" {{ request('payment_status') == 'partial' ? 'selected' : '' }}>Partial</option>
                    <option value="paid" {{ request('payment_status') == 'paid' ? 'selected' : '' }}>Paid</option>
                    <option value="refunded" {{ request('payment_status') == 'refunded' ? 'selected' : '' }}>Refunded</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="date_from" class="form-label">From Date</label>
                <input type="date" class="form-control" id="date_from" name="date_from" 
                       value="{{ request('date_from') }}">
            </div>
            <div class="col-md-2">
                <label for="date_to" class="form-label">To Date</label>
                <input type="date" class="form-control" id="date_to" name="date_to" 
                       value="{{ request('date_to') }}">
            </div>
            <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                    <a href="{{ route('admin.shops.bookings', $shop) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Bookings Table -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-0">
        <h5 class="card-title mb-0 fw-bold">Bookings ({{ $bookings->total() }})</h5>
    </div>
    <div class="card-body p-0">
        @if($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>Service</th>
                            <th>Date & Time</th>
                            <th>Duration</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($bookings as $booking)
                            <tr>
                                <td>
                                    <div>
                                        <strong>{{ $booking->booking_reference }}</strong>
                                        @if($booking->invoice_number)
                                            <small class="d-block text-muted">{{ $booking->invoice_number }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <span class="fw-bold">{{ $booking->customer_name }}</span>
                                        <small class="d-block text-muted">{{ $booking->customer_email }}</small>
                                        <small class="d-block text-muted">{{ $booking->customer_phone }}</small>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        @if($booking->service)
                                            <span class="fw-bold">{{ $booking->service->name }}</span>
                                            @if($booking->assigned_staff_name)
                                                <small class="d-block text-muted">Staff: {{ $booking->assigned_staff_name }}</small>
                                            @endif
                                        @else
                                            <span class="text-muted">Service not found</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <span class="fw-bold">{{ $booking->booking_date->format('M d, Y') }}</span>
                                        <small class="d-block text-muted">
                                            {{ $booking->start_time }} - {{ $booking->end_time }}
                                        </small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">{{ $booking->duration_minutes }}min</span>
                                </td>
                                <td>
                                    <div>
                                        <span class="fw-bold">${{ number_format($booking->total_amount, 2) }}</span>
                                        <span class="badge bg-{{ $booking->payment_status === 'paid' ? 'success' : ($booking->payment_status === 'partial' ? 'warning' : 'secondary') }} ms-1">
                                            {{ ucfirst($booking->payment_status) }}
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-{{ 
                                        $booking->status === 'completed' ? 'success' : 
                                        ($booking->status === 'confirmed' ? 'info' : 
                                        ($booking->status === 'in_progress' ? 'warning' : 
                                        ($booking->status === 'cancelled' ? 'danger' : 'secondary'))) 
                                    }}">
                                        {{ ucfirst(str_replace('_', ' ', $booking->status)) }}
                                    </span>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                            Actions
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#" onclick="viewBooking({{ $booking->id }})">
                                                <i class="bi bi-eye me-2"></i>View Details
                                            </a></li>
                                            @if($booking->status === 'pending')
                                                <li><a class="dropdown-item text-success" href="#" onclick="confirmBooking({{ $booking->id }})">
                                                    <i class="bi bi-check-circle me-2"></i>Confirm
                                                </a></li>
                                            @endif
                                            @if(in_array($booking->status, ['pending', 'confirmed']))
                                                <li><a class="dropdown-item text-warning" href="#" onclick="rescheduleBooking({{ $booking->id }})">
                                                    <i class="bi bi-calendar-event me-2"></i>Reschedule
                                                </a></li>
                                            @endif
                                            @if($booking->status === 'confirmed')
                                                <li><a class="dropdown-item text-info" href="#" onclick="startBooking({{ $booking->id }})">
                                                    <i class="bi bi-play-circle me-2"></i>Start Service
                                                </a></li>
                                            @endif
                                            @if($booking->status === 'in_progress')
                                                <li><a class="dropdown-item text-success" href="#" onclick="completeBooking({{ $booking->id }})">
                                                    <i class="bi bi-check-square me-2"></i>Complete
                                                </a></li>
                                            @endif
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item" href="#" onclick="editBooking({{ $booking->id }})">
                                                <i class="bi bi-pencil me-2"></i>Edit
                                            </a></li>
                                            @if(in_array($booking->status, ['pending', 'confirmed']))
                                                <li><a class="dropdown-item text-danger" href="#" onclick="cancelBooking({{ $booking->id }})">
                                                    <i class="bi bi-x-circle me-2"></i>Cancel
                                                </a></li>
                                            @endif
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-calendar-check" style="font-size: 4rem; color: #dee2e6;"></i>
                <h4 class="text-muted mt-3">No bookings found</h4>
                <p class="text-muted">Start managing your appointments by creating your first booking.</p>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addBookingModal">
                    <i class="bi bi-plus"></i> Create First Booking
                </button>
            </div>
        @endif
    </div>
</div>

<!-- Pagination -->
@if($bookings->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $bookings->withQueryString()->links() }}
    </div>
@endif

<!-- Add Booking Modal -->
<div class="modal fade" id="addBookingModal" tabindex="-1" aria-labelledby="addBookingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBookingModalLabel">Create New Booking</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.shops.bookings.store', $shop) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="booking_service_id" class="form-label">Service <span class="text-danger">*</span></label>
                            <select class="form-select" id="booking_service_id" name="service_id" required>
                                <option value="">Select Service</option>
                                @foreach($shop->shopServices as $service)
                                    <option value="{{ $service->id }}" data-duration="{{ $service->duration_minutes }}" data-price="{{ $service->current_price }}">
                                        {{ $service->name }} - ${{ number_format($service->current_price, 2) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="booking_customer_id" class="form-label">Customer <span class="text-danger">*</span></label>
                            <select class="form-select" id="booking_customer_id" name="customer_id" required>
                                <option value="">Select Customer</option>
                                @foreach(\App\Models\User::where('role', 'customer')->get() as $customer)
                                    <option value="{{ $customer->id }}" data-email="{{ $customer->email }}" data-phone="{{ $customer->phone ?? '' }}">
                                        {{ $customer->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="booking_date" class="form-label">Booking Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="booking_date" name="booking_date" 
                                   min="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="booking_start_time" class="form-label">Start Time <span class="text-danger">*</span></label>
                            <input type="time" class="form-control" id="booking_start_time" name="start_time" required>
                        </div>
                        <div class="col-md-6">
                            <label for="booking_customer_name" class="form-label">Customer Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="booking_customer_name" name="customer_name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="booking_customer_email" class="form-label">Customer Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="booking_customer_email" name="customer_email" required>
                        </div>
                        <div class="col-md-6">
                            <label for="booking_customer_phone" class="form-label">Customer Phone <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control" id="booking_customer_phone" name="customer_phone" required>
                        </div>
                        <div class="col-md-6">
                            <label for="booking_total_amount" class="form-label">Total Amount <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="booking_total_amount" name="total_amount" step="0.01" min="0" required>
                        </div>
                        <div class="col-12">
                            <label for="booking_special_instructions" class="form-label">Special Instructions</label>
                            <textarea class="form-control" id="booking_special_instructions" name="special_instructions" rows="3"></textarea>
                        </div>
                    </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">Create Booking</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// Auto-populate customer details when customer is selected
document.getElementById('booking_customer_id').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    if (selectedOption.value) {
        document.getElementById('booking_customer_name').value = selectedOption.text;
        document.getElementById('booking_customer_email').value = selectedOption.dataset.email;
        document.getElementById('booking_customer_phone').value = selectedOption.dataset.phone;
    }
});

// Auto-populate service price when service is selected
document.getElementById('booking_service_id').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    if (selectedOption.value) {
        document.getElementById('booking_total_amount').value = selectedOption.dataset.price;
    }
});

function viewBooking(bookingId) {
    // Implement view booking functionality
    window.location.href = `{{ route('admin.shops.bookings.show', ['shop' => $shop->id, 'booking' => ':bookingId']) }}`.replace(':bookingId', bookingId);
}

function confirmBooking(bookingId) {
    if (confirm('Are you sure you want to confirm this booking?')) {
        updateBookingStatus(bookingId, 'confirmed');
    }
}

function startBooking(bookingId) {
    if (confirm('Are you sure you want to start this service?')) {
        updateBookingStatus(bookingId, 'in_progress');
    }
}

function completeBooking(bookingId) {
    if (confirm('Are you sure you want to mark this booking as completed?')) {
        updateBookingStatus(bookingId, 'completed');
    }
}

function cancelBooking(bookingId) {
    const reason = prompt('Please enter the cancellation reason:');
    if (reason) {
        updateBookingStatus(bookingId, 'cancelled', reason);
    }
}

function updateBookingStatus(bookingId, status, reason = null) {
    const formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('_method', 'PUT');
    formData.append('status', status);
    if (reason) {
        formData.append('cancellation_reason', reason);
    }

    fetch(`{{ route('admin.shops.bookings.update', ['shop' => $shop->id, 'booking' => ':bookingId']) }}`.replace(':bookingId', bookingId), {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error updating booking status');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error updating booking status');
    });
}

function editBooking(bookingId) {
    // Implement edit booking functionality
    window.location.href = `{{ route('admin.shops.bookings.show', ['shop' => $shop->id, 'booking' => ':bookingId']) }}`.replace(':bookingId', bookingId) + '/edit';
}

function rescheduleBooking(bookingId) {
    // Implement reschedule functionality
    const newDate = prompt('Enter new date (YYYY-MM-DD):');
    const newTime = prompt('Enter new time (HH:MM):');
    
    if (newDate && newTime) {
        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('_method', 'PUT');
        formData.append('booking_date', newDate);
        formData.append('start_time', newTime);

        fetch(`{{ route('admin.shops.bookings.update', ['shop' => $shop->id, 'booking' => ':bookingId']) }}`.replace(':bookingId', bookingId), {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error rescheduling booking');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error rescheduling booking');
        });
    }
}
</script>
@endsection