@extends('layouts.app')

@section('title', 'Equipment Reservations')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">Equipment Reservations</h1>
                <div class="btn-group" role="group">
                    {{-- <a href="{{ route('equipment-reservations.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> New Reservation
                    </a> --}}
                    <a href="{{ route('equipment-reservations.calendar') }}" class="btn btn-outline-primary">
                        <i class="bi bi-calendar3"></i> Calendar View
                    </a>
                </div>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" action="{{ route('equipment-reservations.index') }}" class="row g-3">
                        <div class="col-md-2">
                            <label for="equipment_id" class="form-label">Equipment</label>
                            <select name="equipment_id" id="equipment_id" class="form-select">
                                <option value="">All Equipment</option>
                                @foreach($equipment as $item)
                                    <option value="{{ $item->id }}" {{ request('equipment_id') == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="equipment_type" class="form-label">Type</label>
                            <select name="equipment_type" id="equipment_type" class="form-select">
                                <option value="">All Types</option>
                                <option value="golf_car" {{ request('equipment_type') == 'golf_car' ? 'selected' : '' }}>Golf Car</option>
                                <option value="boat" {{ request('equipment_type') == 'boat' ? 'selected' : '' }}>Boat</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-select">
                                <option value="">All Status</option>
                                @foreach($statuses as $key => $name)
                                    <option value="{{ $key }}" {{ request('status') == $key ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="date_from" class="form-label">From Date</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" 
                                   value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="date_to" class="form-label">To Date</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" 
                                   value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="search" class="form-label">Search</label>
                            <input type="text" name="search" id="search" class="form-control" 
                                   placeholder="User or equipment..." value="{{ request('search') }}">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="bi bi-search"></i> Apply Filters
                            </button>
                            <a href="{{ route('equipment-reservations.index') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle"></i> Clear
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Reservations Table -->
            <div class="card">
                <div class="card-body">
                    @if($reservations->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Equipment</th>
                                        <th>User</th>
                                        <th>Date & Time</th>
                                        <th>Duration</th>
                                        <th>Status</th>
                                        <th>Notes</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($reservations as $reservation)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-sm bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                                                        <i class="bi bi-gear-wide-connected"></i>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">{{ $reservation->equipment->name }}</div>
                                                        <small class="text-muted">{{ $reservation->equipment->type_name }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                                                        {{ substr($reservation->user->name, 0, 1) }}
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">{{ $reservation->user->name }}</div>
                                                        <small class="text-muted">{{ $reservation->user->email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="fw-bold">{{ $reservation->formatted_date }}</div>
                                                <div class="text-muted">{{ $reservation->formatted_time_range }}</div>
                                                <small class="badge bg-{{ $reservation->is_today ? 'warning' : ($reservation->is_future ? 'success' : 'secondary') }}">
                                                    {{ $reservation->is_today ? 'Today' : ($reservation->is_future ? 'Upcoming' : 'Past') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="fw-bold">{{ $reservation->formatted_duration }}</div>
                                                <small class="text-muted">{{ $reservation->duration_minutes }} minutes</small>
                                            </td>
                                            <td>
                                                <span class="badge {{ $reservation->status_badge_class }}">
                                                    {{ $reservation->status_name }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($reservation->notes)
                                                    <span class="text-truncate d-inline-block" style="max-width: 150px;" 
                                                          title="{{ $reservation->notes }}">
                                                        {{ $reservation->notes }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('equipment-reservations.show', $reservation) }}" 
                                                       class="btn btn-outline-primary btn-sm" title="View Details">
                                                        <i class="bi bi-eye"></i>
                                                    </a>
                                                    {{-- <a href="{{ route('equipment-reservations.edit', $reservation) }}" 
                                                       class="btn btn-outline-secondary btn-sm" title="Edit">
                                                        <i class="bi bi-pencil"></i>
                                                    </a> --}}
                                                    @if($reservation->status === 'confirmed' && !$reservation->is_past)
                                                        <form action="{{ route('equipment-reservations.cancel', $reservation) }}" 
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="btn btn-outline-warning btn-sm" 
                                                                    title="Cancel Reservation"
                                                                    onclick="return confirm('Are you sure you want to cancel this reservation?')">
                                                                <i class="bi bi-x-circle"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                    @if($reservation->status === 'confirmed' && !$reservation->is_future)
                                                        <form action="{{ route('equipment-reservations.complete', $reservation) }}" 
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="btn btn-outline-success btn-sm" 
                                                                    title="Mark as Completed">
                                                                <i class="bi bi-check-circle"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                    @if(!$reservation->is_past)
                                                        <form action="{{ route('equipment-reservations.destroy', $reservation) }}" 
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-outline-danger btn-sm" 
                                                                    title="Delete Reservation"
                                                                    onclick="return confirm('Are you sure you want to delete this reservation?')">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        @if($reservations->hasPages())
                            <div class="d-flex justify-content-center mt-4">
                                {{ $reservations->appends(request()->query())->links() }}
                            </div>
                        @endif
                    @else
                        <div class="text-center py-5">
                            <i class="bi bi-calendar-x text-muted mb-3" style="font-size: 3rem;"></i>
                            <h5 class="text-muted">No Reservations Found</h5>
                            <p class="text-muted">No reservations match your current filters.</p>
                            {{-- <a href="{{ route('equipment-reservations.create') }}" class="btn btn-primary">
                                <i class="bi bi-plus-circle"></i> Create First Reservation
                            </a> --}}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Stats Modal -->
<div class="modal fade" id="statsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reservation Statistics</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white">
                            <div class="card-body text-center">
                                <h6 class="card-title">Total</h6>
                                <h3 class="mb-0">{{ $reservations->total() }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white">
                            <div class="card-body text-center">
                                <h6 class="card-title">Confirmed</h6>
                                <h3 class="mb-0">{{ $reservations->where('status', 'confirmed')->count() }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white">
                            <div class="card-body text-center">
                                <h6 class="card-title">Completed</h6>
                                <h3 class="mb-0">{{ $reservations->where('status', 'completed')->count() }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-danger text-white">
                            <div class="card-body text-center">
                                <h6 class="card-title">Cancelled</h6>
                                <h3 class="mb-0">{{ $reservations->where('status', 'cancelled')->count() }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when filters change
    const filterSelects = document.querySelectorAll('#equipment_id, #equipment_type, #status');
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            this.closest('form').submit();
        });
    });

    // Search with debounce
    let searchTimeout;
    const searchInput = document.getElementById('search');
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            this.closest('form').submit();
        }, 500);
    });

    // Date range validation
    const dateFrom = document.getElementById('date_from');
    const dateTo = document.getElementById('date_to');
    
    function validateDateRange() {
        if (dateFrom.value && dateTo.value) {
            if (dateFrom.value > dateTo.value) {
                dateTo.setCustomValidity('End date must be after start date');
            } else {
                dateTo.setCustomValidity('');
            }
        }
    }
    
    dateFrom.addEventListener('change', validateDateRange);
    dateTo.addEventListener('change', validateDateRange);
});
</script>
@endpush