@section('title', 'Edit Button', '')
<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">{{ __('Edit Button') }}</h3>
        </div>
    </div>

    <div class="card-body border-top p-9">
        @include('partials.alerts.main')
         <div id="form_container">
             <form method="POST" action="{{ route('button.update', $button['id']) }}" class="form w-100" id="kt_button_edit_form" novalidate="novalidate">
                 @csrf
 
                 <div class="row mb-6">
                    <label class="col-lg-4 col-form-label text-dark fs-6">{{ __('Select Item') }}</label>
                    <div class="col-lg-8 fv-row">
                        <select data-hide-search="true" id="select_item" onchange="disableSelect()" name="item" aria-label="{{ __('Select a Item') }}" data-placeholder="{{ __('Select a Item') }}" class="form-select form-select-solid form-select-lg">
                            <option value="">{{ __('Select a Item...') }}</option>
                            @foreach($items as $key => $item)
                                <option value="{{ $item['id'] }}"
                                    {{ old('item') == $item['id'] || $button['item_id'] != null && $button['item_id'] == $item['id'] ? 'selected' : '' }}>
                                    {{-- {{ ucwords(str_replace('-', ' ', $item['type'])) ?? '' }} --}}
                                    {{ $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()" name="item_row" 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'] }}" 
                                    {{ old('item_row') == $item_row['id'] || ($button['item_row_id'] != null && $button['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 required">{{ __('Link') }}</label>
 
                     <div class="col-lg-8">
                         <input type="text" name="link" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Button Link" value="{{ $button['link'] ?? '' }}"/>
                     </div>
                 </div>
 
                 <div class="row mb-6">
                     <label class="col-lg-4 col-form-label text-dark fs-6 ">{{ __('Text') }}</label>
 
                     <div class="col-lg-8">
                         <input type="text" id="button_text" name="text" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Button Text" value="{{ $button['text'] ?? '' }}"/>
 
                     </div>
                 </div>
 
                 {{-- <div class="row mb-6">
                     <label class="col-lg-4 col-form-label text-dark fs-6 required">{{ __('Color') }}</label>
 
                     <div class="col-lg-8">
                         <input type="text" id="button_color" name="color" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Button Color" value="{{ $button['color'] ?? '' }}"/>
 
                     </div>
                 </div> --}}
 
                 {{-- <div class="separator separator my-8"></div> --}}
 
             </form>
         </div>
     </div>

    <div class="card-footer">
        <div class="text-center">
            <button type="submit" form="kt_button_edit_form" class="btn btn-lg btn-primary" onclick="handleSubmit(this)">
                @include('partials.general._button-indicator')
            </button>
        </div>
    </div>
    <script>
        window.onload = function() {
            disableSelect();
        };

        function disableSelect(){
            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;
            }
        }
        
    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_button_edit_form");
            form.submit();
        }
    </script>
</div>