@extends('admin.layouts.app')

@section('title', 'Rooms & Suites')
@section('page_title', 'Rooms & Suites')

@section('content')
    <div class="page-heading">
        <div>
            <h1>Rooms & Suites</h1>
            <p>Manage room types, pricing, capacity and gallery images.</p>
        </div>

        <a href="{{ route('admin.room-types.create') }}" class="btn btn-primary">
            + Add Room Type
        </a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Room Type List</h2>
                <div class="panel-subtitle">Total {{ $roomTypes->total() }} room types</div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="room-table">
                <thead>
                    <tr>
                        <th>SL</th>
                        <th>Room Type</th>
                        <th>Pricing</th>
                        <th>Capacity</th>
                        <th class="text-center">Gallery</th>
                        <th class="text-center">Featured</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Order</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($roomTypes as $roomType)
                        <tr>
                            <td>{{ $roomTypes->firstItem() + $loop->index }}</td>
                            <td>
                                <div class="room-summary">
                                    <div class="room-thumbnail">
                                        @if($roomType->featured_image)
                                            <img src="{{ asset('storage/' . $roomType->featured_image) }}"
                                                 alt="{{ $roomType->name }}">
                                        @else
                                            <span>ROOM</span>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="room-name">{{ $roomType->name }}</div>
                                        @if($roomType->small_title)
                                            <div class="muted-text">{{ $roomType->small_title }}</div>
                                        @endif
                                        <div class="slug-text">{{ $roomType->slug }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($roomType->has_discount)
                                    <div class="price-current">৳{{ number_format((float) $roomType->discount_price, 2) }}</div>
                                    <div class="price-old">৳{{ number_format((float) $roomType->base_price, 2) }}</div>
                                @else
                                    <div class="price-current">৳{{ number_format((float) $roomType->base_price, 2) }}</div>
                                @endif
                                <div class="muted-text">Per night</div>
                            </td>
                            <td>
                                <div>{{ $roomType->maximum_guests }} Guests</div>
                                <div class="muted-text">
                                    {{ $roomType->maximum_adults }} Adults,
                                    {{ $roomType->maximum_children }} Children
                                </div>
                                <div class="muted-text">{{ $roomType->total_rooms }} room(s)</div>
                            </td>
                            <td class="text-center"><span class="badge badge-role">{{ $roomType->images_count }}</span></td>
                            <td class="text-center">
                                <form action="{{ route('admin.room-types.toggle-featured', $roomType) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                            class="status-button {{ $roomType->is_featured ? 'is-featured' : '' }}"
                                            title="Change featured status">
                                        {{ $roomType->is_featured ? 'Featured' : 'Regular' }}
                                    </button>
                                </form>
                            </td>
                            <td class="text-center">
                                <form action="{{ route('admin.room-types.toggle-status', $roomType) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                            class="badge status-button {{ $roomType->status ? 'badge-success' : 'badge-danger' }}">
                                        {{ $roomType->status ? 'Active' : 'Inactive' }}
                                    </button>
                                </form>
                            </td>
                            <td class="text-center"><span class="badge badge-role">{{ $roomType->sort_order }}</span></td>
                            <td class="text-right">
                                <div class="action-group action-group-end">
                                    <a href="{{ route('admin.room-types.edit', $roomType) }}" class="btn btn-secondary btn-small">Edit</a>
                                    <form action="{{ route('admin.room-types.destroy', $roomType) }}"
                                          method="POST" class="delete-room-form">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-small">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="empty-state">
                                    <div class="empty-state-mark">R</div>
                                    <h3>No room type found</h3>
                                    <p>Add your first room type to start the Rooms & Suites section.</p>
                                    <a href="{{ route('admin.room-types.create') }}" class="btn btn-primary">+ Add Room Type</a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($roomTypes->hasPages())
            <div class="panel-footer pagination">{{ $roomTypes->links() }}</div>
        @endif
    </div>
@endsection

@push('styles')
<style>
    .panel-subtitle, .muted-text, .slug-text { color: var(--muted); font-size: 12px; }
    .panel-subtitle { margin-top: 5px; }
    .slug-text { margin-top: 3px; }
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .room-table { min-width: 1120px; }
    .room-summary { display: flex; align-items: center; gap: 13px; min-width: 270px; }
    .room-thumbnail { width: 76px; height: 56px; flex: 0 0 76px; overflow: hidden; display: grid; place-items: center; border-radius: 8px; background: #edf2f5; color: #91a0a8; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
    .room-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
    .room-name, .price-current { color: var(--navy); font-weight: 700; }
    .price-old { color: #9aa4aa; font-size: 12px; text-decoration: line-through; }
    .status-button { min-height: 30px; padding: 6px 10px; border: 0; border-radius: 20px; cursor: pointer; background: #edf2f5; color: #526975; font-size: 11px; font-weight: 700; }
    .status-button.is-featured { background: #fff7df; color: #946c16; }
    .action-group-end { justify-content: flex-end; }
    .btn-small { min-height: 34px; padding: 7px 11px; }
    .panel-footer { padding: 0 24px 22px; }
    .empty-state { padding: 55px 20px; text-align: center; }
    .empty-state-mark { width: 52px; height: 52px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; background: #edf2f5; color: var(--navy); font-family: Georgia, serif; font-size: 24px; }
    .empty-state h3 { margin: 0 0 8px; font-family: Georgia, serif; font-weight: 500; }
    .empty-state p { margin: 0 0 18px; color: var(--muted); }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.delete-room-form').forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!window.confirm('Are you sure you want to delete this room type? All gallery images will also be deleted.')) {
                    event.preventDefault();
                }
            });
        });
    });
</script>
@endpush