@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="{{ route('room_types.index') }}">Room Category</a></li>
                <li class="breadcrumb-item active">Create</li>
            </ol>

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

            <!-- Error Messages -->
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <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 Form Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-cog"></i> Room Type Configuration
                    </h4>
                </div>

                <div class="panel-body">
                    <form id="room-type-form" action="{{ route('room_types.store') }}" method="POST" novalidate>
                        @csrf

                        <!-- Basic Information Section -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="fas fa-info-circle"></i> Basic Information
                            </h5>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name" class="form-label required">Room Type Name</label>
                                        <input type="text" name="name" id="name"
                                            class="form-control @error('name') is-invalid @enderror"
                                            value="{{ old('name') }}" maxlength="255" required autocomplete="off"
                                            placeholder="e.g., Standard, Deluxe, Suite">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="description" class="form-label">Description</label>
                                        <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror"
                                            rows="3" maxlength="1000" placeholder="Optional description of this room type">{{ old('description') }}</textarea>
                                        <small class="form-text text-muted">
                                            <span id="desc-count">0</span>/1000 characters
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Channels Configuration Section -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="fas fa-tv"></i> Channels Configuration
                                <small class="text-muted">({{ $channels->count() }} available)</small>
                            </h5>

                            @if ($channels->count() > 0)
                                <div class="selection-controls mb-3">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="select-all-channels">
                                        <i class="fas fa-check-square"></i> Select All
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                        id="deselect-all-channels">
                                        <i class="fas fa-square"></i> Deselect All
                                    </button>
                                    <span class="ml-3 text-muted">
                                        <span id="selected-channels-count">0</span> channels selected
                                    </span>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="selection-container">
                                            <h6 class="container-title">Available Channels</h6>
                                            <div class="sortable-container" id="available-channels">
                                                @foreach ($channels as $channel)
                                                    <div class="sortable-item" data-id="{{ $channel->id }}"
                                                        data-type="channel">
                                                        <div class="item-content">
                                                            <i class="fas fa-grip-vertical drag-handle"></i>
                                                            <div class="item-checkbox">
                                                                <input type="checkbox" class="channel-checkbox"
                                                                    name="channels[]" value="{{ $channel->id }}"
                                                                    id="channel-{{ $channel->id }}">
                                                            </div>
                                                            <label for="channel-{{ $channel->id }}" class="item-label">
                                                                {{ $channel->name }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="selection-container">
                                            <h6 class="container-title">Selected Channels</h6>
                                            <div class="sortable-container" id="selected-channels">
                                                <div class="empty-state" id="channels-empty-state">
                                                    <i class="fas fa-tv text-muted"></i>
                                                    <p class="text-muted">No channels selected</p>
                                                    <small class="text-muted">Drag channels here or use checkboxes</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i>
                                    No channels are available. Please create channels first.
                                </div>
                            @endif
                        </div>

                        <!-- Menu Controls Configuration Section -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="fas fa-list"></i> Menu Controls Configuration
                                <small class="text-muted">({{ $menuControls->count() }} available)</small>
                            </h5>

                            @if ($menuControls->count() > 0)
                                <div class="selection-controls mb-3">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="select-all-menus">
                                        <i class="fas fa-check-square"></i> Select All
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                        id="deselect-all-menus">
                                        <i class="fas fa-square"></i> Deselect All
                                    </button>
                                    <span class="ml-3 text-muted">
                                        <span id="selected-menus-count">0</span> menus selected
                                    </span>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="selection-container">
                                            <h6 class="container-title">Available Menu Controls</h6>
                                            <div class="sortable-container" id="available-menus">
                                                @foreach ($menuControls as $menuControl)
                                                    <div class="sortable-item" data-id="{{ $menuControl->id }}"
                                                        data-type="menu">
                                                        <div class="item-content">
                                                            <i class="fas fa-grip-vertical drag-handle"></i>
                                                            <div class="item-checkbox">
                                                                <input type="checkbox" class="menu-checkbox"
                                                                    name="menu_controls[]" value="{{ $menuControl->id }}"
                                                                    id="menu-{{ $menuControl->id }}">
                                                            </div>
                                                            <label for="menu-{{ $menuControl->id }}" class="item-label">
                                                                {{ $menuControl->title }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="selection-container">
                                            <h6 class="container-title">Selected Menu Controls</h6>
                                            <div class="sortable-container" id="selected-menus">
                                                <div class="empty-state" id="menus-empty-state">
                                                    <i class="fas fa-list text-muted"></i>
                                                    <p class="text-muted">No menu controls selected</p>
                                                    <small class="text-muted">Drag menu controls here or use
                                                        checkboxes</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i>
                                    No menu controls are available. Please create menu controls first.
                                </div>
                            @endif
                        </div>

                        <!-- Form Actions -->
                        <div class="form-actions">
                            <button type="submit" class="btn btn-custom btn-lg" id="submit-btn">
                                <i class="fas fa-save"></i> Create Room Type
                            </button>
                            <a href="{{ route('room_types.index') }}" class="btn btn-custom btn-lg">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                            <button type="reset" class="btn btn-custom btn-lg" id="reset-btn">
                                <i class="fas fa-undo"></i> Reset Form
                            </button>
                        </div>
                    </form>
                </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>
        .form-section {
            margin-bottom: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #eee;
        }

        .form-section:last-child {
            border-bottom: none;
            margin-bottom: 1rem;
        }

        .section-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #007bff;
            display: inline-block;
            min-width: 200px;
        }

        .form-label {
            font-weight: 600;
            color: #495057;
        }

        .form-label.required::after {
            content: " *";
            color: #dc3545;
        }

        .selection-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .selection-container {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1rem;
            height: 400px;
            display: flex;
            flex-direction: column;
        }

        .container-title {
            font-weight: 600;
            color: #495057;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #dee2e6;
        }

        .sortable-container {
            flex: 1;
            overflow-y: auto;
            background: white;
            border-radius: 4px;
            padding: 0.5rem;
            min-height: 200px;
        }

        .sortable-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            margin-bottom: 0.5rem;
            padding: 0.75rem;
            cursor: move;
            transition: all 0.2s ease;
        }

        .sortable-item:hover {
            border-color: #007bff;
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.15);
        }

        .sortable-item.sortable-chosen {
            background: #e3f2fd;
            border-color: #2196f3;
        }

        .sortable-item.sortable-ghost {
            opacity: 0.5;
            background: #f5f5f5;
        }

        .item-content {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .drag-handle {
            color: #6c757d;
            cursor: grab;
            font-size: 0.875rem;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .item-checkbox input[type="checkbox"] {
            margin: 0;
        }

        .item-label {
            margin: 0;
            flex: 1;
            cursor: pointer;
            font-weight: 500;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: #6c757d;
        }

        .empty-state i {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            opacity: 0.5;
        }

        .empty-state p {
            margin-bottom: 0.25rem;
            font-weight: 500;
        }

        .form-actions {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid #eee;
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .form-actions .btn {
            min-width: 140px;
        }

        #desc-count {
            font-weight: 600;
        }

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

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

        .alert-info {
            border-left-color: #17a2b8;
        }

        @media (max-width: 768px) {
            .form-actions {
                flex-direction: column;
            }

            .form-actions .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }

            .selection-container {
                margin-bottom: 1rem;
                height: 300px;
            }

            .selection-controls {
                justify-content: center;
                text-align: center;
            }
        }

        @media (max-width: 992px) {
            .row .col-lg-6:first-child {
                margin-bottom: 1rem;
            }
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize sortable functionality
            initializeSortables();

            // Initialize event listeners
            initializeEventListeners();

            // Initialize form validation
            initializeValidation();

            // Initialize character counter
            initializeCharacterCounter();
        });

        function initializeSortables() {
            // Channels sortable
            new Sortable(document.getElementById('available-channels'), {
                group: 'channels',
                animation: 150,
                handle: '.drag-handle',
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                onEnd: updateChannelOrder
            });

            new Sortable(document.getElementById('selected-channels'), {
                group: 'channels',
                animation: 150,
                handle: '.drag-handle',
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                onEnd: updateChannelOrder
            });

            // Menu controls sortable
            new Sortable(document.getElementById('available-menus'), {
                group: 'menus',
                animation: 150,
                handle: '.drag-handle',
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                onEnd: updateMenuOrder
            });

            new Sortable(document.getElementById('selected-menus'), {
                group: 'menus',
                animation: 150,
                handle: '.drag-handle',
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                onEnd: updateMenuOrder
            });
        }

        function initializeEventListeners() {
            // Channel checkboxes
            document.querySelectorAll('.channel-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', handleChannelChange);
            });

            // Menu checkboxes
            document.querySelectorAll('.menu-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', handleMenuChange);
            });

            // Select/Deselect all buttons
            document.getElementById('select-all-channels')?.addEventListener('click', () => selectAllChannels(true));
            document.getElementById('deselect-all-channels')?.addEventListener('click', () => selectAllChannels(false));
            document.getElementById('select-all-menus')?.addEventListener('click', () => selectAllMenus(true));
            document.getElementById('deselect-all-menus')?.addEventListener('click', () => selectAllMenus(false));

            // Reset button
            document.getElementById('reset-btn')?.addEventListener('click', handleFormReset);
        }

        function handleChannelChange(event) {
            const checkbox = event.target;
            const item = checkbox.closest('.sortable-item');

            if (checkbox.checked) {
                document.getElementById('selected-channels').appendChild(item);
            } else {
                document.getElementById('available-channels').appendChild(item);
            }

            updateChannelOrder();
            updateChannelCount();
            toggleEmptyState('channels');
        }

        function handleMenuChange(event) {
            const checkbox = event.target;
            const item = checkbox.closest('.sortable-item');

            if (checkbox.checked) {
                document.getElementById('selected-menus').appendChild(item);
            } else {
                document.getElementById('available-menus').appendChild(item);
            }

            updateMenuOrder();
            updateMenuCount();
            toggleEmptyState('menus');
        }

        function selectAllChannels(select) {
            document.querySelectorAll('.channel-checkbox').forEach(checkbox => {
                if (checkbox.checked !== select) {
                    checkbox.checked = select;
                    checkbox.dispatchEvent(new Event('change'));
                }
            });
        }

        function selectAllMenus(select) {
            document.querySelectorAll('.menu-checkbox').forEach(checkbox => {
                if (checkbox.checked !== select) {
                    checkbox.checked = select;
                    checkbox.dispatchEvent(new Event('change'));
                }
            });
        }

        function updateChannelOrder() {
            updateChannelCount();
            toggleEmptyState('channels');
        }

        function updateMenuOrder() {
            updateMenuCount();
            toggleEmptyState('menus');
        }

        function updateChannelCount() {
            const count = document.querySelectorAll('.channel-checkbox:checked').length;
            document.getElementById('selected-channels-count').textContent = count;
        }

        function updateMenuCount() {
            const count = document.querySelectorAll('.menu-checkbox:checked').length;
            document.getElementById('selected-menus-count').textContent = count;
        }

        function toggleEmptyState(type) {
            const selectedContainer = document.getElementById(`selected-${type}`);
            const emptyState = document.getElementById(`${type}-empty-state`);
            const hasItems = selectedContainer.querySelectorAll('.sortable-item').length > 0;

            if (emptyState) {
                emptyState.style.display = hasItems ? 'none' : 'flex';
            }
        }

        function handleFormReset() {
            setTimeout(() => {
                // Move all items back to available containers
                document.querySelectorAll('#selected-channels .sortable-item').forEach(item => {
                    document.getElementById('available-channels').appendChild(item);
                });

                document.querySelectorAll('#selected-menus .sortable-item').forEach(item => {
                    document.getElementById('available-menus').appendChild(item);
                });

                // Update counts and empty states
                updateChannelCount();
                updateMenuCount();
                toggleEmptyState('channels');
                toggleEmptyState('menus');

                // Reset character counter
                updateCharacterCount();
            }, 50);
        }

        function initializeValidation() {
            const form = document.getElementById('room-type-form');

            form.addEventListener('submit', function(event) {
                let isValid = true;

                // Validate required fields
                const nameInput = document.getElementById('name');
                if (!nameInput.value.trim()) {
                    nameInput.classList.add('is-invalid');
                    isValid = false;
                } else {
                    nameInput.classList.remove('is-invalid');
                }

                // if (!isValid) {
                //     event.preventDefault();

                //     // Scroll to first error
                //     const firstError = form.querySelector('.is-invalid');
                //     if (firstError) {
                //         firstError.scrollIntoView({
                //             behavior: 'smooth',
                //             block: 'center'
                //         });
                //         firstError.focus();
                //     }
                // }
            });

            // Real-time validation for name field
            document.getElementById('name').addEventListener('input', function() {
                if (this.value.trim()) {
                    this.classList.remove('is-invalid');
                }
            });
        }

        function initializeCharacterCounter() {
            const descTextarea = document.getElementById('description');
            const counter = document.getElementById('desc-count');

            function updateCharacterCount() {
                const length = descTextarea.value.length;
                counter.textContent = length;
                counter.style.color = length > 900 ? '#dc3545' : length > 700 ? '#ffc107' : '#28a745';
            }

            descTextarea.addEventListener('input', updateCharacterCount);
            updateCharacterCount(); // Initial count
        }

        // Initialize counts and empty states on page load
        document.addEventListener('DOMContentLoaded', function() {
            updateChannelCount();
            updateMenuCount();
            toggleEmptyState('channels');
            toggleEmptyState('menus');
        });
    </script>
@endsection