@section('title', 'Create Row')

<div class="card">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_user_register" aria-expanded="true" aria-controls="kt_user_register">
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">{{ __('Update Row') }}</h3>
        </div>
    </div>

    <div class="card-body border-top p-9">
       @include('partials.alerts.main')
        <div id="form_container">
            <form method="POST" action="{{ route('row.update', $rows['id']) }}" class="form w-100" id="kt_row_edit_form" novalidate="novalidate" enctype="multipart/form-data">
                @csrf
                {{-- @dump($items) --}}
                <input type="hidden" id="item_type" name="item_type" value="">
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label text-dark fs-6 required">{{ __('Select Item') }}</label>
                    <div class="col-lg-8 fv-row">
                        <select data-hide-search="false" data-control="select2" id="select_item" name="item_id" {{-- onchange="disableSelect()" --}} aria-label="{{ __('Select a Item') }}" data-placeholder="{{ __('Select a Item') }}" class="form-select form-select-solid form-select-lg" onchange="selectType(this)">
                            <option value="">{{ __('Select a Item...') }}</option>
                            @foreach($items as $key => $item)
                            <option value="{{ $item['id'] }}" data-type="{{ $item['type'] ?? '' }}" {{ old('item_id') == $item['id'] || $rows['item_id'] != null && $rows['item_id'] == $item['id'] ? 'selected' : '' }}>{{ $item['type'].' ('.$item['section'].')' ?? '' }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- <div class="row mb-6">
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Image') }}</label>

                    <div class="col-lg-8">
                        <input type="text" name="image" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Image" value="{{ $rows['image'] ?? '' }}"/>
                    </div>
                </div> --}}
                <div class="row mb-6" hidden id="input_image">
                    <label
                    class="col-lg-4 col-form-label fw-bolder text-dark fs-6 mt-5">{{ __('Image') }}</label>

                    <div class="col-lg-8 mt-7">
                        <div class="row">
                            <div class="col-lg-4 fv-row">
                                <input type="hidden" name="image_url">
                                <div class="image-input image-input-empty" data-kt-image-input="true" id="image_preview"
                                style="background-image: url('{{ isset($rows['image']) && file_exists(storage_path('app/public/' . $rows['image'])) ? asset('storage/' . $rows['image']) : url('/custom/blank.png') }}')">

                                    <div class="image-input-wrapper w-125px h-125px"></div>
                                    <label
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-white shadow"
                                        data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                        data-bs-dismiss="click" title="change image">
                                        <i class="bi bi-pencil-fill fs-7"></i>
                                        <input type="file" class="aaa" name="image"
                                            accept=".png, .jpg, .jpeg" {{-- onchange="previewImage(event)" --}}  value="{{ isset($rows['image']) ? asset('storage/' . $rows['image']) : '' }}"/>
                                        <input type="hidden" name="image_before" id="image_before" value="{{ $rows['image'] ?? '' }}" />
                                        <input type="hidden" name="avatar_remove" />
                                    </label>
                                    <span
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-white shadow"
                                        data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                        data-bs-dismiss="click" title="Remove avatar" onclick="removeImage()">
                                        <i class="bi bi-x fs-2"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <span id="warning_image" class="pt-4 text-danger" style="display:block;  font-style: italic;">*Please upload a valid file format. Max size: 2MB.</span> 
                    </div>
                </div>

                <div id="input_price" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Price') }}</label>

                    <div class="col-lg-8">
                        <input type="text" id="price" name="price" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Price" value="{{ old('price', $rows['price'] ?? '')}}"/>
                    </div>
                </div>

                <div id="input_link" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Link') }}</label>

                    <div class="col-lg-8">
                        <input type="text" id="link" name="link" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Link" value="{{ old('link', $rows['link'] ?? '') }}"/>
                    </div>
                </div>


                <div id="input_caption" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Caption') }}</label>

                    <div class="col-lg-8">
                        <input type="text" id="caption" name="caption" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Caption" value="{{ old('caption', $rows['caption'] ?? '') }}"/>
                    </div>
                </div>


                <div id="input_phone" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Phone') }}</label>

                    <div class="col-lg-8">
                        <input type="text" id="phone" name="phone" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Phone" value="{{ old('phone', $rows['phone'] ?? '') }}"/>
                    </div>
                </div>


                <div id="input_email" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Email') }}</label>

                    <div class="col-lg-8">
                        <input type="text" id="email" name="email" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Email" value="{{ old('email', $rows['email'] ?? '') }}"/>
                    </div>
                </div>


                <div id="input_title" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Title') }}</label>

                    <div class="col-lg-8">
                        <input type="text" id="title" name="title" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Title" value="{{ old('title', $rows['title'] ?? '') }}"/>
                    </div>
                </div>


                <div id="input_subtitle" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Subtitle') }}</label>

                    <div class="col-lg-8">
                        <input type="text" id="subtitle" name="subtitle" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Subtitle" value="{{ old('subtitle', $rows['subtitle'] ?? '') }}"/>
                    </div>
                </div>


                <div id="input_desc" class="row mb-6" hidden>
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Description') }}</label>

                    <div class="col-lg-8">
                        <textarea type="text" id="desc" name="desc" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"  rows="5" placeholder="Description">{{ old('desc', $rows['desc'] ?? '') }}</textarea>
                    </div>
                </div>

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

    <div class="card-footer">
        <div class="text-center">
            <button type="submit" form="kt_row_edit_form" class="btn btn-lg btn-primary" onclick="handleSubmit(this)">
                @include('partials.general._button-indicator')
            </button>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function removeImage() {
            $('#image_preview').css('background-image', 'url(/custom/blank.png)');
            $('input[name="image"]').val('');
            $('input[name="image_before"]').val('');
        }


    function handleSubmit(button) {
        // Cegah multiple submit
        button.disabled = true;

        // Ubah tampilan button dari label ke progress
        let indicatorLabel = button.querySelector(".indicator-label");
        let indicatorProgress = button.querySelector(".indicator-progress");

        if (indicatorLabel && indicatorProgress) {
            indicatorLabel.style.display = "none";  // Sembunyikan label
            indicatorProgress.style.display = "inline-block"; // Tampilkan loading
        }

        let form = document.getElementById("kt_row_edit_form");
        form.submit();
    }

    $(document).ready(function() {
        var selectElement = document.getElementById('select_item');
        if (selectElement.value) {
            selectType(selectElement);
        }
    });

    function selectType(that) {
            var selectedOption = that.options[that.selectedIndex];
            
            var type = selectedOption.getAttribute('data-type');
            $('#item_type').val(type);
        // alert(type);

            if (type == "accommodation" || type == "accomodation") {
                $('#input_image').attr('hidden', false);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', true);
                $('#input_caption').attr('hidden', false);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', false);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 602 × 320 px.");
            } else if (type.includes("our-accommodation")) {
                $('#input_image').attr('hidden', true);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', true);
                $('#input_caption').attr('hidden', true);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', false);
                $('#warning_image').text("");
            } else if (type.toLowerCase().includes("swiper")) {
                $('#input_image').attr('hidden', false);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', true);
                $('#input_caption').attr('hidden', true);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', true);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', true);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 765 × 610 px.");
            } else if (type == "three-image") {
                $('#input_image').attr('hidden', false);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', false);
                $('#input_caption').attr('hidden', false);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', true);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 618 × 840 px.");
            } else if (type == "three-image-caption") {
                $('#input_image').attr('hidden', false);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', true);
                $('#input_caption').attr('hidden', false);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', false);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 400 × 480 px.");
            } else if (type.toLowerCase().includes("event")) {
                $('#input_image').attr('hidden', false);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', false);
                $('#input_caption').attr('hidden', true);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', false);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 760 × 320 px.");
            } else if (type.toLowerCase().includes("experience")) {
                $('#input_image').attr('hidden', false);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', false);
                $('#input_caption').attr('hidden', true);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', false);
                $('#input_desc').attr('hidden', false);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 920 × 834 px.");
            } else if (type == "Column With Icon Yogyakarta Home") {
                $('#input_image').attr('hidden', false);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', true);
                $('#input_caption').attr('hidden', true);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', false);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 48 × 48 px.");
            } else if (type == "Room Slide Our Accommodations Yogyakarta Accomodations" || type == "Room Slide  Our Accommodations Yogyakarta Accomodations")
            //data di staging dan prod typo spasi disini bikin error
            {
                $('#input_image').attr('hidden', true);
                $('#input_price').attr('hidden', true);
                $('#input_link').attr('hidden', true);
                $('#input_caption').attr('hidden', true);
                $('#input_phone').attr('hidden', true);
                $('#input_email').attr('hidden', true);
                $('#input_title').attr('hidden', false);
                $('#input_subtitle').attr('hidden', true);
                $('#input_desc').attr('hidden', false);
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB. Size requirement: 48 × 48 px.");
            } else {
                $('#warning_image').text("*Please upload a valid file format. Max size: 2MB.");
            }
    }
</script>