@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">My Equipment Reservations</h3>
                    <div class="card-tools">
                        <a href="{{ route('equipment-reservations.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> New Reservation
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="status_filter">Status:</label>
                            <select id="status_filter" class="form-control">
                                <option value="">All Statuses</option>
                                @foreach($statuses as $status => $name)
                                    <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="date_from">From Date:</label>
                            <input type="date" id="date_from" class="form-control" value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="date_to">To Date:</label>
                            <input type="date" id="date_to" class="form-control" value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-3">
                            <label>&nbsp;</label>
                            <button type="button" id="apply_filters" class="btn btn-secondary btn-block">
                                <i class="fas fa-filter"></i> Apply Filters
                            </button>
                        </div>
                    </div>

                    <!-- Reservations Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Equipment</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Status</th>
                                    <th>Notes</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($reservations as $reservation)
                                    <tr>
                                        <td>
                                            <strong>{{ $reservation->equipment->name }}</strong>
                                            <br>
                                            <small class="text-muted">{{ $reservation->equipment->type_name }}</small>
                                        </td>
                                        <td>
                                            {{ \Carbon\Carbon::parse($reservation->reservation_date)->format('M d, Y') }}
                                            <br>
                                            <small class="text-muted">{{ \Carbon\Carbon::parse($reservation->reservation_date)->format('l') }}</small>
                                        </td>
                                        <td>
                                            {{ $reservation->start_time }} - {{ $reservation->end_time }}
                                        </td>
                                        <td>
                                            @switch($reservation->status)
                                                @case('confirmed')
                                                    <span class="badge badge-success">Confirmed</span>
                                                    @break
                                                @case('cancelled')
                                                    <span class="badge badge-danger">Cancelled</span>
                                                    @break
                                                @case('completed')
                                                    <span class="badge badge-info">Completed</span>
                                                    @break
                                                @default
                                                    <span class="badge badge-secondary">{{ ucfirst($reservation->status) }}</span>
                                            @endswitch
                                        </td>
                                        <td>
                                            @if($reservation->notes)
                                                {{ Str::limit($reservation->notes, 50) }}
                                            @else
                                                <span class="text-muted">No notes</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('equipment-reservations.show', $reservation) }}" 
                                                   class="btn btn-sm btn-info" title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                
                                                @if($reservation->status === 'confirmed')
                                                    @if(!$reservation->isPast())
                                                        <form action="{{ route('equipment-reservations.cancel', $reservation) }}" 
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="btn btn-sm btn-warning" 
                                                                    onclick="return confirm('Are you sure you want to cancel this reservation?')"
                                                                    title="Cancel Reservation">
                                                                <i class="fas fa-times"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                    
                                                    @if($reservation->isPast())
                                                        <form action="{{ route('equipment-reservations.complete', $reservation) }}" 
                                                              method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="btn btn-sm btn-success" 
                                                                    onclick="return confirm('Mark this reservation as completed?')"
                                                                    title="Mark as Completed">
                                                                <i class="fas fa-check"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            <p class="text-muted my-3">No reservations found.</p>
                                            <a href="{{ route('equipment-reservations.create') }}" class="btn btn-primary">
                                                <i class="fas fa-plus"></i> Make Your First Reservation
                                            </a>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if($reservations->hasPages())
                        <div class="d-flex justify-content-center">
                            {{ $reservations->appends(request()->query())->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reservation Details Modal -->
<div class="modal fade" id="reservationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reservation Details</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="reservationModalBody">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Filter functionality
    $('#apply_filters').click(function() {
        let url = new URL(window.location);
        let status = $('#status_filter').val();
        let dateFrom = $('#date_from').val();
        let dateTo = $('#date_to').val();
        
        if (status) {
            url.searchParams.set('status', status);
        } else {
            url.searchParams.delete('status');
        }
        
        if (dateFrom) {
            url.searchParams.set('date_from', dateFrom);
        } else {
            url.searchParams.delete('date_from');
        }
        
        if (dateTo) {
            url.searchParams.set('date_to', dateTo);
        } else {
            url.searchParams.delete('date_to');
        }
        
        window.location.href = url.toString();
    });
    
    // Enter key on filters
    $('#status_filter, #date_from, #date_to').keypress(function(e) {
        if (e.which == 13) {
            $('#apply_filters').click();
        }
    });
    
    // Clear filters
    $('.clear-filters').click(function() {
        window.location.href = '{{ route("equipment-reservations.my-reservations") }}';
    });
});
</script>
@endpush