@extends('layouts.admin')

@section('title', 'Progress Tracking')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1>Progress Tracking</h1>
        <p class="text-muted">Track all booking progress updates</p>
    </div>
    <a href="{{ route('progress.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> New Update
    </a>
</div>

<!-- Progress Status Overview -->
<div class="row mb-4">
    <div class="col-md-2 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="badge badge-pending" style="font-size: 0.9rem;">Pending</span>
                <h4 class="mt-2">{{ $progressStats['pending'] }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="badge badge-confirmed" style="font-size: 0.9rem;">Confirmed</span>
                <h4 class="mt-2">{{ $progressStats['confirmed'] }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="badge badge-boarding" style="font-size: 0.9rem;">Boarding</span>
                <h4 class="mt-2">{{ $progressStats['boarding'] }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="badge badge-sailing" style="font-size: 0.9rem;">Sailing</span>
                <h4 class="mt-2">{{ $progressStats['sailing'] }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="badge badge-arrived" style="font-size: 0.9rem;">Arrived</span>
                <h4 class="mt-2">{{ $progressStats['arrived'] }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <span class="badge badge-completed" style="font-size: 0.9rem;">Completed</span>
                <h4 class="mt-2">{{ $progressStats['completed'] }}</h4>
            </div>
        </div>
    </div>
</div>

<!-- Progress Table -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">All Progress Updates</h5>
    </div>
    <div class="table-responsive">
        <table class="table table-hover">
            <thead class="table-light">
                <tr>
                    <th>Booking</th>
                    <th>User</th>
                    <th>Status</th>
                    <th>Location</th>
                    <th>Description</th>
                    <th>Updated</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($progress as $prog)
                    <tr>
                        <td>
                            <strong>{{ $prog->booking->booking_code }}</strong>
                        </td>
                        <td>{{ $prog->booking->user->name }}</td>
                        <td>
                            <span class="badge badge-{{ $prog->status }}">
                                {{ ucfirst($prog->status) }}
                            </span>
                        </td>
                        <td>{{ $prog->location ?? '-' }}</td>
                        <td>
                            <small>{{ Str::limit($prog->description, 50) }}</small>
                        </td>
                        <td>{{ $prog->updated_at_status->format('d/m/Y H:i') }}</td>
                        <td>
                            <a href="{{ route('progress.show', $prog) }}" class="btn btn-sm btn-info" title="View">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="{{ route('progress.edit', $prog) }}" class="btn btn-sm btn-warning" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('progress.destroy', $prog) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" title="Delete" onclick="return confirm('Are you sure?')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">No progress updates found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        {{ $progress->links() }}
    </div>
</div>
@endsection