{{-- resources/views/pages/hotel_guide_categories/create.blade.php --}}
@extends('layouts.app')

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

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin 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('hotel_guide_categories.index') }}">Hotel Guide Categories</a>
                </li>
                <li class="breadcrumb-item active">Create</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">
                Add Hotel Guide Category
            </h1>
            <!-- end page-header -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Category Information</h4>
                    <div class="panel-heading-btn">
                        <a href="{{ route('hotel_guide_categories.index') }}" class="btn btn-sm btn-default">
                            <i class="fa fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>

                <div class="panel-body">
                    <!-- Display validation errors -->
                    @if ($errors->any())
                        <div class="alert alert-danger fade show" role="alert">
                            <h5 class="alert-heading">
                                <i class="fa fa-exclamation-triangle"></i> Validation Errors
                            </h5>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- Display success message -->
                    @if (session('success'))
                        <div class="alert alert-success fade show" role="alert">
                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                        </div>
                    @endif

                    <!-- Display error message -->
                    @if (session('error'))
                        <div class="alert alert-danger fade show" role="alert">
                            <i class="fa fa-times-circle"></i> {{ session('error') }}
                        </div>
                    @endif

                    <form action="{{ route('hotel_guide_categories.store') }}" method="POST" novalidate>
                        @csrf

                        <div class="form-group row">
                            <label for="category_name" class="col-sm-2 col-form-label">
                                Category Name <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-10">
                                <input type="text" name="category_name" id="category_name" class="form-control"
                                    value="{{ old('category_name') }}" placeholder="Enter category name" maxlength="255"
                                    required autocomplete="off">
                                <small class="form-text text-muted">
                                    Enter a unique category name (alphanumeric characters, spaces, hyphens, underscores, and
                                    ampersands only).
                                </small>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-10 offset-sm-2">
                                <button type="submit" class="btn btn-custom">
                                    <i class="fa fa-save"></i> Create
                                </button>
                                <a href="{{ route('hotel_guide_categories.index') }}" class="btn btn-custom ml-2">
                                    <i class="fa fa-arrow-left"></i> Back
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

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

@push('scripts')
    <script>
        $(document).ready(function() {
            // Auto-hide alerts after 5 seconds
            setTimeout(function() {
                $('.alert').fadeOut('slow');
            }, 5000);

            // Form validation
            $('#category_name').on('input', function() {
                let value = $(this).val();
                let regex = /^[a-zA-Z0-9\s\-_&]*$/;

                if (!regex.test(value)) {
                    $(this).addClass('is-invalid');
                    $(this).siblings('.invalid-feedback').remove();
                    $(this).after(
                        '<div class="invalid-feedback">Category name contains invalid characters.</div>'
                    );
                } else {
                    $(this).removeClass('is-invalid');
                    $(this).siblings('.invalid-feedback').remove();
                }
            });

            // Character counter
            $('#category_name').after(
                '<div class="text-muted small mt-1">Characters: <span id="char-count">0</span>/255</div>');

            $('#category_name').on('input', function() {
                let length = $(this).val().length;
                $('#char-count').text(length);

                if (length > 255) {
                    $('#char-count').addClass('text-danger');
                } else {
                    $('#char-count').removeClass('text-danger');
                }
            });
        });
    </script>
@endpush