@extends('layouts.backapp')

@section('title', 'Edit Target KPI')

@section('styles')
<style>
    .select2-container .select2-selection {
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .select2-container.select2-container--focus .select2-selection {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 0;
        line-height: 1.5;
    }
    
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 100%;
    }
    
    .select2-results__option--highlighted[aria-selected] {
        background-color: #007bff;
        color: white;
    }
    
    /* Ensure Select2 is visible */
    .select2-container {
        z-index: 9999;
    }
    
    .select2-dropdown {
        z-index: 9999;
    }
    
    /* Fix Select2 width */
    .select2-container--default .select2-selection--single {
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
    }
    
    /* Limit Select2 dropdown height */
    .select2-results__options {
        max-height: 200px;
        overflow-y: auto;
    }
    
    /* Style for Select2 results */
    .select2-results__option {
        padding: 8px 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .select2-results__option:last-child {
        border-bottom: none;
    }
    
    /* Improve Select2 search box */
    .select2-search--dropdown .select2-search__field {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
    }
</style>
@endsection

@section('content')
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__head kt-portlet__head--lg">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        Edit Target KPI
                    </h3>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-actions">
                        <a href="{{ route('kpi.targets.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                    </div>
                </div>
            </div>
            <div class="kt-portlet__body">
                
                <form id="kpi-form" method="POST" action="{{ route('kpi.targets.update', $target->id) }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="user_id" class="form-control-label">Mekanik <span class="text-danger">*</span></label>
                                <select name="user_id" id="user_id" class="form-control select2" required>
                                    <option value="">Pilih Mekanik</option>
                                    @foreach($mechanics as $mechanic)
                                        @php
                                            $isSelected = old('user_id', $target->user_id) == $mechanic->id;
                                        @endphp
                                        <option value="{{ $mechanic->id }}" 
                                                {{ $isSelected ? 'selected' : '' }}>
                                            {{ $mechanic->name }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('user_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="target_value" class="form-control-label">Target Nilai <span class="text-danger">*</span></label>
                                <input type="number" name="target_value" id="target_value" class="form-control" 
                                       value="{{ old('target_value', $target->target_value) }}" min="1" required>
                                @error('target_value')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>



                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="description" class="form-control-label">Deskripsi</label>
                                <textarea name="description" id="description" class="form-control" rows="3" 
                                          placeholder="Deskripsi target (opsional)">{{ old('description', $target->description) }}</textarea>
                                @error('description')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" name="is_active" id="is_active" class="custom-control-input" 
                                           value="1" {{ old('is_active', $target->is_active) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_active">
                                        Target Aktif
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Update Target
                                </button>
                                <a href="{{ route('kpi.targets.index') }}" class="btn btn-secondary">Kembali</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('javascripts')
<script>
$(document).ready(function() {
    // Initialize Select2 with fallback and delay
    setTimeout(function() {
        try {
            // Initialize Select2 for mechanics with search limit
            $('#user_id').select2({
                theme: 'bootstrap4',
                width: '100%',
                placeholder: 'Pilih Mekanik',
                allowClear: true,
                minimumInputLength: 1,
                maximumInputLength: 50,
                maximumResultsForSearch: 10,
                language: {
                    inputTooShort: function() {
                        return "Masukkan minimal 1 karakter untuk mencari";
                    },
                    inputTooLong: function() {
                        return "Maksimal 50 karakter";
                    },
                    noResults: function() {
                        return "Tidak ada hasil ditemukan";
                    },
                    searching: function() {
                        return "Mencari...";
                    }
                }
            });


        } catch (error) {
            console.log('Select2 not available, using regular select');
            // Fallback: ensure regular select works
            $('.select2').removeClass('select2').addClass('form-control');
        }
    }, 100);

    // Form validation
    $('#kpi-form').on('submit', function(e) {
        var isValid = true;
        var errors = [];

        // Clear previous errors
        $('.text-danger').remove();

        // Validate required fields
        if (!$('#user_id').val()) {
            errors.push('Mekanik harus dipilih');
            isValid = false;
        }

        if (!$('#target_value').val() || $('#target_value').val() < 1) {
            errors.push('Target nilai harus diisi dan minimal 1');
            isValid = false;
        }



        if (!isValid) {
            e.preventDefault();
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Gagal',
                    html: errors.join('<br>'),
                    confirmButtonText: 'OK'
                });
            } else {
                alert('Validasi Gagal:\n' + errors.join('\n'));
            }
        }
    });
});
</script>
@endpush