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

<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 Column') }}</h3>
        </div>
    </div>

    <div class="card-body border-top p-9">
       @include('partials.alerts.main')
        <div id="form_container">
            <form method="POST" action="{{ route('column.update', $column['id']) }}" class="form w-100" id="kt_column_edit_form" novalidate="novalidate">
                @csrf

                <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" 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'] }}" {{ $column['item_id'] != null && $column['item_id'] == $item['id'] ? 'selected' : '' }}>
                                {{-- {{ ucwords($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 required">{{ __('Position') }}</label>

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

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

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

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

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

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

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

<script>
    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_column_edit_form");
            form.submit();
        }
</script>