@extends('layouts.master')
@section('body_id', 'vendor_add_room_page')
@section('content')

    <style>
        .status-dropdown-fixed-box {
            position: relative !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            clear: both !important;
        }
        select.status-select-direct {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100% !important;
            height: 45px !important;
            padding: 10px 15px !important;
            font-size: 14px !important;
            color: #334155 !important;
            background-color: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 6px !important;
            appearance: auto !important;
            -webkit-appearance: menulist !important;
            -moz-appearance: menulist !important;
        }
    </style>

    <section class="vendor_dashboard_main_wrapper">
        <div class="container">
            <div class="row">
                
                @include('frontend.vendor.partials.sidebar')

                <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    <div class="premium-dashboard-core">
                        
                        <div class="elite-dashboard-header clearfix">
                            <div class="header-left-greetings">
                                <h2 class="main-welcome-heading">Add New Room Layout</h2>
                                <p class="sub-welcome-caption">Configure inventory stock layers, price per night grids, and property room specifications.</p>
                            </div>
                            <div class="header-right-actions-group">
                                <a href="{{ route('vendor.rooms.index') }}" class="btn btn-elite-secondary"><i class="fa fa-arrow-left"></i> Back to List</a>
                            </div>
                        </div>

                        <div class="row table-content-row">
                            <div class="col-xs-12">
                                <div class="elite-form-card-wrapper">
                                    
                                    <form action="{{ route('vendor.rooms.store') }}" method="POST" enctype="multipart/form-data" id="roomAddForm">
                                        @csrf

                                        @if ($errors->any())
                                            <div class="alert alert-danger" style="margin-top: 15px; color: #dc2626; background-color: #fef2f2; border: 1px solid #fca5a5; padding: 12px; border-radius: 6px;">
                                                <ul style="margin: 0; padding-left: 20px;">
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                        
                                        <div class="form-section-title-bar">
                                            <h4><i class="fa fa-info-circle"></i> Room Specifications & Parent Mapping</h4>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-5 col-sm-5 col-xs-12 form-group custom-form-group">
                                                <label for="hotel_id" class="custom-form-label">Select Parent Property <span class="required-star">*</span></label>
                                                <select class="form-control custom-form-input" id="hotel_id" name="hotel_id" required style="padding: 10px 15px;">
                                                    <option value="">-- Select Registered Hotel --</option>
                                                    @foreach($hotels as $hotel)
                                                        <option value="{{ $hotel->id }}" {{ old('hotel_id') == $hotel->id ? 'selected' : '' }}>{{ $hotel->hotel_name }} ({{ $hotel->city }})</option>
                                                    @endforeach
                                                </select>
                                                <span class="field-error-message" id="error_hotel_id"></span>
                                            </div>

                                            <div class="col-md-7 col-sm-7 col-xs-12 form-group custom-form-group">
                                                <label for="room_type" class="custom-form-label">Room Type / Class Designation <span class="required-star">*</span></label>
                                                <input type="text" class="form-control custom-form-input" id="room_type" name="room_type" value="{{ old('room_type') }}" required placeholder="e.g. Executive Deluxe Suite, Premium Sea View Room">
                                                <span class="field-error-message" id="error_room_type"></span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-4 col-sm-4 col-xs-12 form-group custom-form-group-spaced">
                                                <label for="price_per_night" class="custom-form-label">Base Price / Night (INR) <span class="required-star">*</span></label>
                                                <input type="number" step="0.01" min="0" class="form-control custom-form-input" id="price_per_night" name="price_per_night" value="{{ old('price_per_night') }}" required placeholder="e.g. 3500">
                                                <span class="field-error-message" id="error_price_per_night"></span>
                                            </div>

                                            <div class="col-md-4 col-sm-4 col-xs-12 form-group custom-form-group-spaced">
                                                <label for="total_rooms" class="custom-form-label">Total Rooms In Inventory <span class="required-star">*</span></label>
                                                <input type="number" min="1" class="form-control custom-form-input" id="total_rooms" name="total_rooms" value="{{ old('total_rooms') }}" required placeholder="e.g. 10">
                                                <span class="field-error-message" id="error_total_rooms"></span>
                                            </div>

                                            <div class="col-md-4 col-sm-4 col-xs-12 form-group custom-form-group-spaced">
                                                <label for="max_occupancy" class="custom-form-label">Max Guest Capacity <span class="required-star">*</span></label>
                                                <input type="number" min="1" class="form-control custom-form-input" id="max_occupancy" name="max_occupancy" value="{{ old('max_occupancy') }}" required placeholder="e.g. 3 Guests Max">
                                                <span class="field-error-message" id="error_max_occupancy"></span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 form-group custom-form-group-spaced">
                                                <label for="description" class="custom-form-label">Room Infrastructure Description <span class="optional-text">(Optional)</span></label>
                                                <textarea class="form-control custom-form-textarea" id="description" name="description" rows="4" placeholder="Briefly write about bed dimensions, view projections, balcony setups, custom bathroom integrations..."></textarea>
                                            </div>
                                        </div>

                                        <div class="form-section-title-bar margin-top-30">
                                            <h4><i class="fa fa-camera"></i> Room Visuals & Gallery Multi-Uploads</h4>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 col-xs-12 form-group custom-form-group">
                                                <label for="room_images" class="custom-form-label">Select Room Images <span class="optional-text">(Multi-select array segment queue, Max 10MB each - JPEG, PNG, WEBP)</span></label>
                                                <div class="file-upload-wrapper">
                                                    <input type="file" class="form-control custom-form-file-input" id="room_images" name="room_images[]" multiple accept="image/*">
                                                    <div class="file-upload-box">
                                                        <i class="fa fa-files-o"></i>
                                                        <p id="room-images-text">Click or drag multiple bedroom layout images here...</p>
                                                    </div>
                                                </div>
                                                <span class="field-error-message" id="error_room_images"></span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 col-sm-6 col-xs-12 form-group custom-form-group status-dropdown-fixed-box">
                                                <label for="status" class="custom-form-label">Select Room Status <span class="required-star">*</span></label>
                                                <select class="status-select-direct" id="status" name="status" required>
                                                    <option value="">-- Select Status --</option>
                                                    <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>Available</option>
                                                    <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Not Available</option>
                                                    <option value="2" {{ old('status') == '2' ? 'selected' : '' }}>Under Maintenance</option>
                                                </select>
                                                <span class="field-error-message" id="error_status"></span>
                                            </div>
                                        </div>

                                        <div class="form-section-title-bar margin-top-30">
                                            <h4><i class="fa fa-check-square-o"></i> Specific In-Room Amenities</h4>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="amenities-grid-container">
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Air Conditioning">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-snowflake-o"></i> <span>Air Conditioning</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="LED Smart TV">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-television"></i> <span>LED Smart TV</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Attached Washroom">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-shower"></i> <span>Attached Bath</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Geyser & Hot Water">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-thermometer-full"></i> <span>Geyser/Hot Water</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Mini Refrigerator">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-columns"></i> <span>Mini Fridge</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Tea / Coffee Maker">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-coffee"></i> <span>Kettle Set</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="In-Room Safe Box">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-lock"></i> <span>Locker Safe</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Balcony View">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-window-maximize"></i> <span>Balcony View</span>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row margin-top-40">
                                            <div class="col-xs-12">
                                                <div class="form-action-footer-wrapper">
                                                    <button type="submit" id="submitRoomBtn" class="btn btn-elite-primary-submit">Initialize Room Segment Stock</button>
                                                </div>
                                            </div>
                                        </div>

                                    </form>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {

        $('#hotel_id, #room_type, #price_per_night, #total_rooms, #max_occupancy, #status').on('blur change keyup', function() {
            validateRoomFields($(this));
        });

        $('#room_images').on('change', function() {
            let files = $(this)[0].files;
            if(files.length > 0) {
                $('#room-images-text').text(files.length + " room configuration visuals queued").css("color", "#0ea5e9");
            } else {
                $('#room-images-text').text("Click or drag multiple bedroom layout images here...").css("color", "#64748b");
            }
        });

        function validateRoomFields(input) {
            let id = input.attr('id');
            let val = input.val() ? input.val().trim() : '';
            let errorSpan = $('#error_' + id);
            let isValid = true;
            let message = "";

            if (id === 'hotel_id' && val === '') { message = "Please select a mapped parent hotel instance."; isValid = false; }
            if (id === 'room_type' && val === '') { message = "Room class structure name is completely required."; isValid = false; }
            if (id === 'price_per_night' && (val === '' || parseFloat(val) < 0)) { message = "Please assign a valid base pricing model rate."; isValid = false; }
            if (id === 'total_rooms' && (val === '' || parseInt(val) < 1)) { message = "Total available stock capacity must be at least 1 unit."; isValid = false; }
            if (id === 'max_occupancy' && (val === '' || parseInt(val) < 1)) { message = "Maximum guest limits tracking context field is required."; isValid = false; }
            if (id === 'status' && val === '') { message = "Please select a room status."; isValid = false; }

            if (!isValid) {
                input.addClass('is-invalid');
                errorSpan.text(message).show();
            } else {
                input.removeClass('is-invalid');
                errorSpan.text('').hide();
            }
            return isValid;
        }

        $('#roomAddForm').on('submit', function(e) {
            let isFormValid = true;

            $('#hotel_id, #room_type, #price_per_night, #total_rooms, #max_occupancy, #status').each(function() {
                if (!validateRoomFields($(this))) { isFormValid = false; }
            });

            if (!isFormValid) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: $('.is-invalid').first().offset().top - 120
                }, 500);
            }
        });
    });
    </script>

@endsection