@extends('layouts.backapp')

@section('title', 'Tambah 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(197, 214, 233, 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;
    }
    
    /* 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">
                        Tambah 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.store') }}">
                    @csrf
                    
                    <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)
                                        <option value="{{ $mechanic->id }}" {{ old('user_id') == $mechanic->id ? 'selected' : '' }}>
                                            {{ $mechanic->name }} ({{ $mechanic->dealer->name ?? 'N/A' }})
                                        </option>
                                    @endforeach
                                </select>
                                @if($mechanics->isEmpty())
                                    <div class="alert alert-warning mt-2">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        Tidak ada mekanik yang ditemukan. Pastikan ada user dengan role "mechanic" di sistem.
                                    </div>
                                @else
                                    <small class="form-text text-muted">
                                        Ditemukan {{ $mechanics->count() }} mekanik. 
                                        @if($mechanics->count() >= 50)
                                            Menampilkan 50 mekanik pertama. Gunakan pencarian untuk menemukan mekanik tertentu.
                                        @endif
                                    </small>
                                @endif
                                @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') }}" 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') }}</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', true) ? '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> Simpan 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
    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');
    }

    // 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