@extends('layouts.student')

@section('title', 'Accommodation')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">🏠 Accommodation Details</h5>
        </div>
        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @elseif(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <p>Welcome to the student accommodation portal. Here, you can view your current room allocation and application status.</p>

            {{-- Accommodation Table --}}
            <table class="table table-bordered table-striped mt-4">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Room Number</th>
                        <th>Campus</th>
                        <th>Block</th>
                        <th>Allocation Status</th>
                        <th>Check-In</th>
                        <th>Check-Out</th>
                        <th>Remarks</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($accommodation as $index => $record)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $record->room_number ?? '-' }}</td>
                            <td>{{ $record->campus }}</td>
                            <td>{{ $record->block ?? '-' }}</td>
                            <td>
                                <span class="badge bg-{{ $record->allocation_status === 'Allocated' ? 'success' : 'warning text-dark' }}">
                                    {{ $record->allocation_status }}
                                </span>
                            </td>
                            <td>{{ $record->check_in ? \Carbon\Carbon::parse($record->check_in)->format('Y-m-d') : '-' }}</td>
                            <td>{{ $record->check_out ? \Carbon\Carbon::parse($record->check_out)->format('Y-m-d') : '-' }}</td>
                            <td>{{ $record->remarks }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center">No accommodation record found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            {{-- Show form only if no accommodation record --}}
            @if ($accommodation->isEmpty())
            <form method="POST" action="{{ route('student.accommodation.store') }}" class="mt-4">
                @csrf
                <div class="row">
                    <div class="col-md-5 mb-3">
                        <label for="campus" class="form-label">Campus</label>
                        <select name="campus" id="campus" class="form-control" required>
                            <option value="">-- Select Campus --</option>
                            <option value="Main Campus">Main Campus</option>
                            <option value="City Campus">City Campus</option>
                        </select>
                    </div>
                    <div class="col-md-5 mb-3">
                        <label for="block" class="form-label">Block</label>
                        <input type="text" name="block" id="block" class="form-control" required>
                    </div>
                </div>
                <button class="btn btn-success">Apply for Accommodation</button>
            </form>
            @else
            <div class="mt-4">
                <a href="#" class="btn btn-outline-secondary">Download Allocation Letter</a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection