@extends('layouts.app')
@section('title', 'Room Types')
@section('page-title', 'Room Types')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span>Room Types</div>
        <h1>Room Types</h1>
        <p>Define room categories for your hotel. Each type has its own pricing.</p>
    </div>
    <button onclick="openModal('add-type')" class="btn btn-primary"><i class="fas fa-plus"></i> Add Room Type</button>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead><tr><th>Name</th><th>Description</th><th>Base Price/Night</th><th>Rooms</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
                @forelse($roomTypes as $type)
                <tr>
                    <td style="font-weight:700;font-size:14px;">{{ $type->name }}</td>
                    <td style="font-size:13px;color:#6b7280;max-width:240px;">{{ Str::limit($type->description, 60) ?: '—' }}</td>
                    <td style="font-weight:600;font-size:14px;">₦{{ number_format($type->base_price, 0) }}</td>
                    <td><span class="badge badge-primary">{{ $type->rooms_count }} room{{ $type->rooms_count !== 1 ? 's' : '' }}</span></td>
                    <td>
                        @if($type->is_active) <span class="badge badge-success">Active</span>
                        @else <span class="badge badge-secondary">Inactive</span> @endif
                    </td>
                    <td>
                        <div style="display:flex;gap:6px;">
                            <button onclick="openModal('edit-type-{{ $type->id }}')" class="btn btn-sm btn-outline"><i class="fas fa-edit"></i></button>
                            <form method="POST" action="{{ route('hotel.room-types.toggle', $type) }}">@csrf
                                <button type="submit" class="btn btn-sm {{ $type->is_active ? 'btn-warning' : 'btn-success' }}" title="{{ $type->is_active ? 'Deactivate' : 'Activate' }}">
                                    <i class="fas fa-{{ $type->is_active ? 'eye-slash' : 'eye' }}"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                <!-- Edit Modal -->
                <div class="modal-overlay" id="edit-type-{{ $type->id }}">
                    <div class="modal">
                        <div class="modal-header"><span class="modal-title">Edit — {{ $type->name }}</span><button class="modal-close" onclick="closeModal('edit-type-{{ $type->id }}')">×</button></div>
                        <form method="POST" action="{{ route('hotel.room-types.update', $type) }}">@csrf @method('PUT')
                            <div class="modal-body">
                                <div class="form-group">
                                    <label class="form-label">Name <span class="required">*</span></label>
                                    <input type="text" name="name" class="form-control" value="{{ $type->name }}" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Description</label>
                                    <textarea name="description" class="form-control" rows="2">{{ $type->description }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Base Price per Night (₦) <span class="required">*</span></label>
                                    <input type="number" name="base_price" class="form-control" value="{{ $type->base_price }}" required min="0" step="0.01">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline" onclick="closeModal('edit-type-{{ $type->id }}')">Cancel</button>
                                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Update</button>
                            </div>
                        </form>
                    </div>
                </div>
                @empty
                <tr><td colspan="6"><div class="empty-state"><i class="fas fa-layer-group"></i><h3>No room types yet</h3><p>Add your first room type to start adding rooms.</p></div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Add Type Modal -->
<div class="modal-overlay" id="add-type">
    <div class="modal">
        <div class="modal-header"><span class="modal-title">Add Room Type</span><button class="modal-close" onclick="closeModal('add-type')">×</button></div>
        <form method="POST" action="{{ route('hotel.room-types.store') }}">@csrf
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Type Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="e.g. Standard, Deluxe, Suite" required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="2" placeholder="Brief description of this room type..."></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Base Price per Night (₦) <span class="required">*</span></label>
                    <input type="number" name="base_price" class="form-control @error('base_price') is-invalid @enderror" placeholder="e.g. 15000" required min="0" step="0.01">
                    @error('base_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal('add-type')">Cancel</button>
                <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Add Type</button>
            </div>
        </form>
    </div>
</div>

@if($errors->any())
<script>document.addEventListener('DOMContentLoaded', () => openModal('add-type'));</script>
@endif
@endsection