@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Management</a></li>
                <li class="breadcrumb-item active">Room Types</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">
                Room Categories
            </h1>

            <!-- Success/Error Messages -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle"></i>
                    <strong>Success!</strong> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Error!</strong>
                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('room_types.create') }}" class="btn btn-custom">
                            <i class="fas fa-plus"></i> Add New Room Categories
                        </a>
                    </div>
                </div>

                <div class="panel-body">
                    @if ($roomTypes->count() > 0)
                        <div class="table-responsive">
                            <table id="room-types-table" class="table table-striped table-bordered table-td-valign-middle">
                                <thead>
                                    <tr>
                                        <th width="1%" class="text-center">#</th>
                                        <th width="20%">Name</th>
                                        <th width="25%">Description</th>
                                        <th width="20%">Channels</th>
                                        <th width="20%">Menu Controls</th>
                                        <th width="10%" class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($roomTypes as $roomType)
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-secondary">{{ $roomType->id }}</span>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column">
                                                    <span class="font-weight-bold">{{ $roomType->name }}</span>
                                                    <small class="text-muted">
                                                        {{ $roomType->created_at ? $roomType->created_at->format('M d, Y') : 'No date' }}
                                                    </small>
                                                </div>
                                            </td>
                                            <td>
                                                @if ($roomType->description)
                                                    <span class="text-truncate"
                                                        style="max-width: 200px; display: inline-block;"
                                                        title="{{ $roomType->description }}">
                                                        {{ $roomType->description }}
                                                    </span>
                                                @else
                                                    <span class="text-muted font-italic">No description</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($roomType->channels->count() > 0)
                                                    <div class="channel-tags">
                                                        @foreach ($roomType->channels->take(3) as $channel)
                                                            <span class="badge badge-info badge-sm mb-1">
                                                                {{ $channel->name }}
                                                            </span>
                                                        @endforeach
                                                        @if ($roomType->channels->count() > 3)
                                                            <span class="badge badge-secondary badge-sm mb-1">
                                                                +{{ $roomType->channels->count() - 3 }} more
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <small class="text-muted d-block">
                                                        Total: {{ $roomType->channels->count() }} channels
                                                    </small>
                                                @else
                                                    <span class="text-muted" style="color: black !important">No
                                                        channels assigned</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($roomType->menuControls->count() > 0)
                                                    <div class="menu-tags">
                                                        @foreach ($roomType->menuControls->take(3) as $menuControl)
                                                            <span class="badge badge-success badge-sm mb-1">
                                                                {{ $menuControl->title }}
                                                            </span>
                                                        @endforeach
                                                        @if ($roomType->menuControls->count() > 3)
                                                            <span class="badge badge-secondary badge-sm mb-1">
                                                                +{{ $roomType->menuControls->count() - 3 }} more
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <small class="text-muted d-block">
                                                        Total: {{ $roomType->menuControls->count() }} menus
                                                    </small>
                                                @else
                                                    <span class="text-muted" style="color: black !important">No
                                                        menus assigned</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('room_types.edit', $roomType) }}"
                                                        class="btn btn-custom" title="Edit Room Type">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-custom" title="Delete Room Type"
                                                        onclick="confirmDelete({{ $roomType->id }}, '{{ addslashes($roomType->name) }}')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>

                                                <!-- Hidden delete form -->
                                                <form id="delete-form-{{ $roomType->id }}"
                                                    action="{{ route('room_types.destroy', $roomType) }}" method="POST"
                                                    style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <!-- Empty State -->
                        <div class="text-center py-5">
                            <i class="fas fa-bed text-muted" style="font-size: 4rem; opacity: 0.3;"></i>
                            <h4 class="text-muted mt-3">No Room Types Found</h4>
                            <p class="text-muted">Get started by creating your first room type configuration.</p>
                            <a href="{{ route('room_types.create') }}" class="btn btn-custom">
                                <i class="fas fa-plus"></i> Create Room Type
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Scroll to top button -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fas fa-angle-up"></i>
        </a>
    </div>

    <style>
        .badge-sm {
            font-size: 0.75rem;
            padding: 0.25rem 0.4rem;
        }

        .channel-tags .badge,
        .menu-tags .badge {
            margin-right: 0.25rem;
            white-space: nowrap;
        }

        .table td {
            vertical-align: middle;
        }

        .text-truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Force name and description text to be black */
        #room-types-table tbody tr td:nth-child(2),
        #room-types-table tbody tr td:nth-child(2) *,
        #room-types-table tbody tr td:nth-child(3),
        #room-types-table tbody tr td:nth-child(3) * {
            color: black !important;
        }

        /* Specifically target the name column elements */
        #room-types-table tbody tr td:nth-child(2) .font-weight-bold,
        #room-types-table tbody tr td:nth-child(2) .text-muted,
        #room-types-table tbody tr td:nth-child(2) small {
            color: black !important;
        }

        /* Specifically target the description column elements */
        #room-types-table tbody tr td:nth-child(3) .text-truncate,
        #room-types-table tbody tr td:nth-child(3) .text-muted,
        #room-types-table tbody tr td:nth-child(3) .font-italic {
            color: black !important;
        }

        .btn-group .btn {
            margin-right: 2px;
        }

        .btn-group .btn:last-child {
            margin-right: 0;
        }

        .panel-heading .btn {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .alert {
            border-left: 4px solid;
            border-radius: 0.375rem;
        }

        .alert-success {
            border-left-color: #28a745;
        }

        .alert-danger {
            border-left-color: #dc3545;
        }

        @media (max-width: 768px) {
            .btn-group {
                display: flex;
                flex-direction: column;
                width: 100%;
            }

            .btn-group .btn {
                margin-bottom: 2px;
                margin-right: 0;
            }

            .channel-tags,
            .menu-tags {
                max-width: 150px;
            }
        }
    </style>

    <script>
        $(document).ready(function() {
            // Initialize DataTable if there are room types
            @if ($roomTypes->count() > 0)
                $('#room-types-table').DataTable({
                    responsive: true,
                    pageLength: 25,
                    order: [
                        [1, 'asc']
                    ], // Sort by name by default
                    columnDefs: [{
                            orderable: false,
                            targets: [5]
                        } // Disable sorting on actions column
                    ],
                    language: {
                        emptyTable: "No room types available",
                        info: "Showing _START_ to _END_ of _TOTAL_ room types",
                        infoEmpty: "Showing 0 to 0 of 0 room types",
                        lengthMenu: "Show _MENU_ room types per page",
                        search: "Search room types:",
                        paginate: {
                            first: "First",
                            last: "Last",
                            next: "Next",
                            previous: "Previous"
                        }
                    }
                });
            @endif

            // Auto-hide alerts after 5 seconds
            setTimeout(function() {
                $('.alert').fadeOut('slow');
            }, 5000);
        });

        /**
         * Confirm deletion of room type
         */
        function confirmDelete(id, name) {
            if (confirm(
                    `Are you sure you want to delete the room type "${name}"?\n\nThis action cannot be undone. Any rooms using this room type will have their room type removed.`
                )) {
                document.getElementById('delete-form-' + id).submit();
            }
        }

        /**
         * Show tooltip for truncated text
         */
        $(document).ready(function() {
            $('[title]').tooltip();
        });
    </script>
@endsection