@extends('layouts.master')
@section('body_id', 'vendor_edit_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">Edit Room Segment</h2>
                                <p class="sub-welcome-caption">Modify configuration grids, adjust dynamic pricing parameters, and update room asset stock records.</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.update', $room->id) }}" method="POST" enctype="multipart/form-data" id="roomEditForm">
                                        @csrf
                                        @method('PUT')

                                        @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">Parent Property Reference <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', $room->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', $room->room_type) }}" required placeholder="e.g. Executive Deluxe Suite">
                                                <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', $room->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 Stock <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', $room->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', $room->max_occupancy) }}" required placeholder="e.g. 3">
                                                <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 bedroom dimensions...">{{ old('description', $room->description) }}</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">Upload Additional Room Images <span class="optional-text">(Leave empty to retain existing database assets - Max 10MB each)</span></label>
                                                
                                                @if(!empty($room->images) && is_array($room->images))
                                                    <div class="current-gallery-grid-flex" style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px;">
                                                        @foreach($room->images as $img_asset)
                                                            <div style="width: 80px; height: 60px; border-radius: 6px; overflow: hidden; border: 1px solid #cbd5e1; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                                                                <img src="{{ asset($img_asset) }}" style="width: 100%; height: 100%; object-fit: cover;">
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif

                                                <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 new room images to append onto infrastructure logs...</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">Update Operational Status <span class="required-star">*</span></label>
                                                <select class="status-select-direct" id="status" name="status" required>
                                                    <option value="1" {{ old('status', $room->status) == 1 ? 'selected' : '' }}>Available</option>
                                                    <option value="0" {{ old('status', $room->status) == 0 ? 'selected' : '' }}>Not Available</option>
                                                    <option value="2" {{ old('status', $room->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>

                                        @php 
                                            $roomAmenities = is_array($room->amenities) ? $room->amenities : []; 
                                        @endphp

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="amenities-grid-container">
                                                    @foreach([
                                                        'Air Conditioning' => 'fa-snowflake-o', 
                                                        'LED Smart TV' => 'fa-television', 
                                                        'Attached Washroom' => 'fa-shower', 
                                                        'Geyser & Hot Water' => 'fa-thermometer-full', 
                                                        'Mini Refrigerator' => 'fa-columns', 
                                                        'Tea / Coffee Maker' => 'fa-coffee', 
                                                        'In-Room Safe Box' => 'fa-lock', 
                                                        'Balcony View' => 'fa-window-maximize'
                                                    ] as $value => $icon)
                                                        <label class="amenity-checkbox-card">
                                                            <input type="checkbox" name="amenities[]" value="{{ $value }}" {{ in_array($value, $roomAmenities) ? 'checked' : '' }}>
                                                            <div class="amenity-content">
                                                                <i class="fa {{ $icon }}"></i> <span>{{ $value == 'Tea / Coffee Maker' ? 'Kettle Set' : ($value == 'In-Room Safe Box' ? 'Locker Safe' : $value) }}</span>
                                                            </div>
                                                        </label>
                                                    @endforeach
                                                </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">Save Modified Layout Settings</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').on('blur change keyup', function() {
            validateRoomFields($(this));
        });

        $('#status').on('change', function() {
            validateRoomFields($(this));
        });

        $('#room_images').on('change', function() {
            let files = $(this)[0].files;
            if(files.length > 0) {
                $('#room-images-text').text(files.length + " new layout images appended onto configuration queue").css("color", "#0ea5e9");
            } else {
                $('#room-images-text').text("Click or drag new room images to append onto infrastructure logs...").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 = "Parent hotel entity reference validation failed."; isValid = false; }
            if (id === 'room_type' && val === '') { message = "Room layout designation string token is required."; isValid = false; }
            if (id === 'price_per_night' && (val === '' || parseFloat(val) < 0)) { message = "Pricing configuration model rate must be positive."; isValid = false; }
            if (id === 'total_rooms' && (val === '' || parseInt(val) < 1)) { message = "Inventory capacity layout constraint violation mapped."; 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 assign a valid operational status mode."; isValid = false; }

            if (!isValid) {
                input.css("border-color", "#dc2626");
                if(errorSpan.length) { errorSpan.text(message).show(); }
            } else {
                input.css("border-color", "#cbd5e1");
                if(errorSpan.length) { errorSpan.text('').hide(); }
            }
            return isValid;
        }

        $('#roomEditForm').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: $('[style*="border-color: rgb(220, 38, 38)"]').first().offset().top - 120
                }, 500);
            }
        });
    });
    </script>

@endsection