@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <!-- Equipment Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Equipment Details</h5>
                        <div class="btn-group" role="group">
                            <a href="{{ route('equipment.edit', $equipment) }}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-pencil"></i> Edit
                            </a>
                            <a href="{{ route('equipment.index') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-left"></i> Back
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            @if($equipment->image)
                                <img src="{{ $equipment->image_url }}" alt="{{ $equipment->name }}" 
                                     class="img-fluid rounded border">
                            @else
                                <div class="bg-light rounded border d-flex align-items-center justify-content-center" 
                                     style="height: 200px;">
                                    <i class="bi bi-gear-wide-connected text-muted" style="font-size: 3rem;"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-8">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h4 class="mb-1">{{ $equipment->name }}</h4>
                                <div>
                                    @if($equipment->is_active)
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-secondary">Inactive</span>
                                    @endif
                                    <span class="badge bg-info">{{ $equipment->type_name }}</span>
                                </div>
                            </div>
                            
                            @if($equipment->description)
                                <p class="text-muted mb-3">{{ $equipment->description }}</p>
                            @endif
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-primary">Operating Hours</h6>
                                    <p class="mb-2">
                                        <i class="bi bi-clock"></i> 
                                        {{ $equipment->start_time->format('H:i') }} - {{ $equipment->end_time->format('H:i') }}
                                    </p>
                                    <p class="mb-2">
                                        <i class="bi bi-calendar"></i> 
                                        Slot Duration: {{ $equipment->slot_duration }} minutes
                                    </p>
                                    <p class="mb-2">
                                        <i class="bi bi-sort-numeric-down"></i> 
                                        Sort Order: {{ $equipment->sort_order }}
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-primary">Statistics</h6>
                                    <p class="mb-2">
                                        <i class="bi bi-calendar-check"></i> 
                                        Total Reservations: {{ $equipment->reservations->count() }}
                                    </p>
                                    <p class="mb-2">
                                        <i class="bi bi-check-circle"></i> 
                                        Active Reservations: {{ $equipment->reservations->where('status', 'confirmed')->count() }}
                                    </p>
                                    <p class="mb-2">
                                        <i class="bi bi-calendar"></i> 
                                        Created: {{ $equipment->created_at->format('M d, Y') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Reservations -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Recent Reservations</h5>
                        <a href="{{ route('equipment-reservations.index', ['equipment_id' => $equipment->id]) }}" 
                           class="btn btn-outline-primary btn-sm">
                            View All Reservations
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if($equipment->reservations->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>User</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($equipment->reservations->take(10) as $reservation)
                                        <tr>
                                            <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>
                                                <small class="text-muted">
                                                    {{ $reservation->is_today ? 'Today' : ($reservation->is_future ? 'Upcoming' : 'Past') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="fw-bold">{{ $reservation->formatted_time_range }}</div>
                                                <small class="text-muted">{{ $reservation->formatted_duration }}</small>
                                            </td>
                                            <td>
                                                <span class="badge {{ $reservation->status_badge_class }}">
                                                    {{ $reservation->status_name }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('equipment-reservations.show', $reservation) }}" 
                                                       class="btn btn-outline-primary btn-sm">
                                                        <i class="bi bi-eye"></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" 
                                                                    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">
                                                                <i class="bi bi-check-circle"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="bi bi-calendar-x text-muted mb-3" style="font-size: 3rem;"></i>
                            <h6 class="text-muted">No Reservations</h6>
                            <p class="text-muted">This equipment has no reservations yet.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('equipment.time-slots', $equipment) }}" class="btn btn-outline-primary">
                            <i class="bi bi-clock"></i> View Time Slots
                        </a>
                        <a href="{{ route('equipment-reservations.create', ['equipment_id' => $equipment->id]) }}" 
                           class="btn btn-outline-success">
                            <i class="bi bi-plus-circle"></i> Create Reservation
                        </a>
                        <form action="{{ route('equipment.toggle-active', $equipment) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-outline-{{ $equipment->is_active ? 'warning' : 'success' }} w-100">
                                <i class="bi bi-toggle-{{ $equipment->is_active ? 'on' : 'off' }}"></i>
                                {{ $equipment->is_active ? 'Deactivate' : 'Activate' }} Equipment
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Equipment Info -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">Equipment Information</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <i class="bi bi-tag text-primary"></i>
                            <strong>Type:</strong> {{ $equipment->type_name }}
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-clock text-primary"></i>
                            <strong>Operating Hours:</strong><br>
                            {{ $equipment->start_time->format('H:i') }} - {{ $equipment->end_time->format('H:i') }}
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-calendar text-primary"></i>
                            <strong>Slot Duration:</strong> {{ $equipment->slot_duration }} minutes
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-sort-numeric-down text-primary"></i>
                            <strong>Sort Order:</strong> {{ $equipment->sort_order }}
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-calendar text-primary"></i>
                            <strong>Created:</strong> {{ $equipment->created_at->format('M d, Y H:i') }}
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-clock text-primary"></i>
                            <strong>Updated:</strong> {{ $equipment->updated_at->format('M d, Y H:i') }}
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Reservation Stats -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Reservation Statistics</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-primary mb-1">{{ $equipment->reservations->count() }}</h4>
                                <small class="text-muted">Total</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-success mb-1">{{ $equipment->reservations->where('status', 'confirmed')->count() }}</h4>
                            <small class="text-muted">Active</small>
                        </div>
                    </div>
                    <hr>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-info mb-1">{{ $equipment->reservations->where('status', 'completed')->count() }}</h4>
                                <small class="text-muted">Completed</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-danger mb-1">{{ $equipment->reservations->where('status', 'cancelled')->count() }}</h4>
                            <small class="text-muted">Cancelled</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection