@section('title', 'Create Style')
<style>
    select[disabled] {
    background-color: #EEF3F7 !important; /* Warna latar belakang */
    color: #c3d1df !important; /* Warna teks */
    cursor: not-allowed !important; /* Kursor */
}
</style>

<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">{{ __('Create Style') }}</h3>
        </div>
    </div>

    <div class="card-body border-top p-9">
       @include('partials.alerts.main')
        <div id="form_container">
            <form method="POST" action="{{ route('style.store') }}" class="form w-100" id="kt_style_create_form" novalidate="novalidate" enctype="multipart/form-data">
                @csrf

                <input type="hidden" id="item_type" name="item_type" value="">
                <input type="hidden" id="row_title" name="row_title" 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="true" id="select_item" onchange="disableSelect(this)" name="item_id" aria-label="{{ __('Select a Item') }}" data-placeholder="{{ __('Select a Item') }}" class="form-select form-select-solid form-select-lg">
                            <option value="">{{ __('Select a Item with Type...') }}</option>
                            @foreach($items as $key => $item)
                                <option value="{{ $item['id'] }}" {{ old('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">{{ __('Select Item Row') }}</label>
                    <div class="col-lg-8 fv-row">
                        <select data-hide-search="true" id="select_item_row" onchange="disableSelect(this)" name="item_row_id" aria-label="{{ __('Select a Item Row') }}" data-placeholder="{{ __('Select a Item Row') }}" class="form-select form-select-solid form-select-lg">
                            <option value="">{{ __('Select a Item Row...') }}</option>
                            @foreach($item_rows as $key => $item_row)
                                <option value="{{ $item_row['id'] }}" data-title="{{ $item_row['title'] }}" {{ old('item_row_id') == $item_row['id'] ? 'selected' : '' }}>{{ $item_row['title'] ?? '' }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>


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

                    <div class="col-lg-8">
                        {{-- <input type="text" name="key" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Key" value="{{ old('key') ?? '' }}"/> --}}
                        <select name="key" data-control="select2" data-placeholder="Select a Key..." class="form-select form-select-lg form-select-solid">
                            <option value="">{{ __('Select a Key...') }}</option>
                            <option value="image" {{ old('key') == 'image' ? 'selected' : '' }}>Image</option>
                            <option value="image1" {{ old('key') == 'image1' ? 'selected' : '' }}>Image 1</option>
                            <option value="image2" {{ old('key') == 'image2' ? 'selected' : '' }}>Image 2</option>
                            <option value="background" {{ old('key') == 'background' ? 'selected' : '' }}>Background</option>
                            <option value="background_image" {{ old('key') == 'background_image' ? 'selected' : '' }}>Background Image</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-6">
                    <label
                    class="col-lg-4 col-form-label fw-bolder text-dark fs-6 mt-5">{{ __('Value') }}</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"
                                    style="background-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="value"
                                            accept=".png, .jpg, .jpeg" />
                                        <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">
                                        <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>


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

    <div class="card-footer">
        <div class="text-center">
            <button type="submit" form="kt_style_create_form" class="btn btn-lg btn-primary" onclick="handleSubmit(this)">
                @include('partials.general._button-indicator')
            </button>
        </div>
    </div>
</div>

<script>
    window.onload = function() {
        var selectElementItem = document.getElementById('select_item');
        var selectElementRow = document.getElementById('select_item_row');
        if (selectElementItem && selectElementItem.value) {
            disableSelect(selectElementItem);
        } else if (selectElementRow && selectElementRow.value) {
            disableSelect(selectElementRow);
        }
    }

    function disableSelect(that){
        
        var selectedOption = that.options[that.selectedIndex];
        var item_type = selectedOption.getAttribute('data-type');
        var row_title = selectedOption.getAttribute('data-title');

        $('#item_type').val(item_type);
        $('#row_title').val(row_title);

        let item = document.getElementById("select_item").value;
        let item_row = document.getElementById("select_item_row").value;
        if(item == "" && item_row == ""){
            document.getElementById("select_item").disabled = false;
            document.getElementById("select_item_row").disabled = false;
        }else if(item == "" && item_row != ""){
            document.getElementById("select_item").disabled = true;
            document.getElementById("select_item_row").disabled = false;
        }else if(item != "" && item_row == ""){
            document.getElementById("select_item_row").disabled = true;
            document.getElementById("select_item").disabled = false;
        }
        
        if(item_type){
            if(item_type == "swiper-image-bandung"){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 765 × 610 px.");
            } else if(item_type.toLowerCase().includes("article")){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 739 × 493 px.");
            } else if(item_type == 'contact-banner'){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 3840 × 1800 px.");
            } else if(item_type == 'contact-information'){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1240 × 1636 px.");
            } else if (item_type == 'staytuned-with-background'){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 3840 × 624 px.");
            } else if (item_type == 'career'){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1920 × 1920 px.");
            } else if (item_type.toLowerCase().includes("purple")){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1383 × 2307 px.");
            } else if (item_type == 'image-right'){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1920 × 1080 px.");
            } else if (item_type.toLowerCase().includes("animate")){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1920 × 965 px.");
            } else if (item_type.toLowerCase().includes("slider")){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1440 × 1440 px.");
            } else if (item_type.toLowerCase().includes("square")){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 640 × 580 px.");
            } else if (item_type == 'ota-rank-bandung'){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1760 × 240 px.");
            } else {
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB.");
            }
        } else if(row_title){
            if (["classic", "suite", "executive"].some(keyword => row_title.toLowerCase().includes(keyword))) {
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 720 × 540 px.");
            } else if(row_title.toLowerCase().includes("deluxe")){
                $("#warning_image").text("*Please upload a valid file format. Max size: 2MB. Size requirement: 1080 × 810 px.");
            }
        }
    }
    
    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_style_create_form");
            form.submit();
        }
</script>