@extends('layouts.app')

@section('content')
<!--begin::Toolbar-->
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                {{ __('quick_orders.title') }}
            </h1>
        </div>
    </div>
</div>
<!--end::Toolbar-->

<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">

        @if ($errors->any())
            <div class="alert alert-danger d-flex align-items-center p-5 mb-10">
                <i class="ki-duotone ki-shield-search fs-2hx text-danger me-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                <div class="d-flex flex-column">
                    <h4 class="mb-1 text-dark">{{ __('quick_orders.fix_errors_helper') }}</h4>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <form action="{{ route('quick-orders.store', ['company' => app('current_company')->uuid]) }}" method="POST" id="kt_quick_order_form" enctype="multipart/form-data">
            @csrf

            <!-- BÖLÜM 1: MÜŞTERİ BİLGİLERİ -->
            <div class="card card-flush mb-6">
                <div class="card-header pt-5">
                    <div class="card-title d-flex flex-column">
                        <h2>1. {{ __('quick_orders.select_customer') }}</h2>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <!-- Müşteri Tipi Seçimi -->
                    <div class="d-flex flex-wrap gap-5 mb-7" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                        <label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
                            <span class="form-check form-check-custom form-check-solid form-check-sm me-5">
                                <input class="form-check-input" type="radio" name="customer_type" value="existing" checked id="type_existing" />
                            </span>
                            <span class="ms-2">
                                <span class="fs-4 fw-bold text-gray-900 d-block">{{ __('quick_orders.existing_customer') }}</span>
                                <span class="fs-7 text-muted">{{ __('quick_orders.search_existing_customer_helper') }}</span>
                            </span>
                        </label>

                        <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
                            <span class="form-check form-check-custom form-check-solid form-check-sm me-5">
                                <input class="form-check-input" type="radio" name="customer_type" value="new" id="type_new" />
                            </span>
                            <span class="ms-2">
                                <span class="fs-4 fw-bold text-gray-900 d-block">{{ __('quick_orders.new_customer') }}</span>
                                <span class="fs-7 text-muted">{{ __('quick_orders.create_new_customer_helper') }}</span>
                            </span>
                        </label>
                    </div>

                    <!-- Mevcut Müşteri Arama (Select2) -->
                    <div class="fv-row mb-7" id="existing_customer_section">
                        <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.select_customer') }}</label>
                        <select name="customer_id" id="customer_select" class="form-select form-select-solid" data-control="select2" data-placeholder="{{ __('quick_orders.select_customer_placeholder') }}">
                            <option></option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" {{ old('customer_id', $selectedCustomerId ?? '') == $customer->id ? 'selected' : '' }}>
                                    {{ $customer->first_name }} {{ $customer->last_name }} ({{ $customer->customer_code }}) - {{ $customer->phone }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Yeni Müşteri / Ortak Müşteri Alanları -->
                    <div class="row g-9 mb-7" id="customer_fields_section">
                        <!--begin::Image input-->
                        <div class="col-12 fv-row mb-5 text-center" id="field_photo">
                            <label class="d-block fw-semibold fs-6 mb-3">Müşteri Fotoğrafı</label>
                            <div class="image-input image-input-outline image-input-placeholder" data-kt-image-input="true">
                                <div class="image-input-wrapper w-125px h-125px" style="background-image: url({{ asset('assets/media/avatars/blank.png') }})"></div>
                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Fotoğraf Değiştir">
                                    <i class="ki-outline ki-pencil fs-7"></i>
                                    <input type="file" name="photo" 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-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="İptal Et">
                                    <i class="ki-outline ki-cross fs-2"></i>
                                </span>
                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Kaldır">
                                    <i class="ki-outline ki-cross fs-2"></i>
                                </span>
                            </div>
                            <div class="form-text">İzin verilen dosya tipleri: png, jpg, jpeg. Maksimum: 4MB.</div>
                            @error('photo')
                                <div class="text-danger fs-7 mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <!--end::Image input-->

                        <div class="col-md-6 fv-row" id="field_first_name">
                            <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.first_name') }}</label>
                            <input type="text" name="first_name" id="c_first_name" class="form-control form-control-solid" value="{{ old('first_name') }}" />
                        </div>
                        <div class="col-md-6 fv-row" id="field_last_name">
                            <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.last_name') }}</label>
                            <input type="text" name="last_name" id="c_last_name" class="form-control form-control-solid" value="{{ old('last_name') }}" />
                        </div>
                        <div class="col-md-6 fv-row">
                            <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.phone') }}</label>
                            <input type="text" name="phone" id="c_phone" class="form-control form-control-solid" value="{{ old('phone') }}" />
                        </div>
                        <div class="col-md-6 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.email') }}</label>
                            <input type="email" name="email" id="c_email" class="form-control form-control-solid" value="{{ old('email') }}" />
                        </div>

                        <!-- Detaylar (Kilo, Boy vb. Tablet için ek girdiler) -->
                        <div class="col-md-4 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.height') }}</label>
                            <input type="number" step="0.1" name="height" id="c_height" class="form-control form-control-solid" value="{{ old('height') }}" />
                        </div>
                        <div class="col-md-4 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.weight') }}</label>
                            <input type="number" step="0.1" name="weight" id="c_weight" class="form-control form-control-solid" value="{{ old('weight') }}" />
                        </div>
                        <div class="col-md-4 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.shoe_size') }}</label>
                            <input type="number" step="0.1" name="shoe_size" id="c_shoe_size" class="form-control form-control-solid" value="{{ old('shoe_size') }}" />
                        </div>
                        <div class="col-md-4 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('messages.gender') }}</label>
                            <select name="gender" id="c_gender" class="form-select form-select-solid">
                                <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>{{ __('messages.male') }}</option>
                                <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>{{ __('messages.female') }}</option>
                            </select>
                        </div>
                        <div class="col-md-4 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.birth_date') }}</label>
                            <input type="date" name="birth_date" id="c_birth_date" class="form-control form-control-solid" value="{{ old('birth_date') }}" />
                        </div>
                        <div class="col-md-4 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.wedding_anniversary') }}</label>
                            <input type="date" name="wedding_anniversary" id="c_wedding_anniversary" class="form-control form-control-solid" value="{{ old('wedding_anniversary') }}" />
                        </div>
                        <div class="col-12 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('messages.address') }}</label>
                            <textarea name="address" id="c_address" class="form-control form-control-solid" rows="2">{{ old('address') }}</textarea>
                        </div>
                        <div class="col-md-6 fv-row">
                            <label class="fs-6 fw-semibold mb-2">{{ __('customers.type') }}</label>
                            <select name="type" id="c_type" class="form-select form-select-solid">
                                <option value="individual" {{ old('type', 'individual') == 'individual' ? 'selected' : '' }}>{{ __('customers.individual') }}</option>
                                <option value="corporate" {{ old('type') == 'corporate' ? 'selected' : '' }}>{{ __('customers.corporate') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6 fv-row" id="field_tckimlik">
                            <label class="fs-6 fw-semibold mb-2">{{ __('customers.tckimlik') }}</label>
                            <input type="text" name="tckimlik" id="c_tckimlik" class="form-control form-control-solid" value="{{ old('tckimlik') }}" maxlength="11" />
                        </div>
                        <div class="col-md-6 fv-row" id="field_tax_office" style="display: none;">
                            <label class="fs-6 fw-semibold mb-2">{{ __('customers.tax_office') }}</label>
                            <input type="text" name="tax_office" id="c_tax_office" class="form-control form-control-solid" value="{{ old('tax_office') }}" />
                        </div>
                        <div class="col-md-6 fv-row" id="field_tax_number" style="display: none;">
                            <label class="fs-6 fw-semibold mb-2">{{ __('customers.tax_number') }}</label>
                            <input type="text" name="tax_number" id="c_tax_number" class="form-control form-control-solid" value="{{ old('tax_number') }}" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- BÖLÜM 2: KIYAFET TÜRÜ SEÇİMİ -->
            <div class="card card-flush mb-6">
                <div class="card-header pt-5">
                    <div class="card-title d-flex flex-column">
                        <h2>2. {{ __('quick_orders.select_cloth_types') }}</h2>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <div class="d-flex flex-wrap gap-5">
                        @foreach($clothTypes as $clothType)
                            <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex align-items-center p-5 px-8 cursor-pointer mb-0 rounded-3 min-w-150px">
                                <span class="form-check form-check-custom form-check-solid form-check-sm me-4">
                                    <input class="form-check-input cloth-type-checkbox" type="checkbox" name="items[{{ $clothType->id }}][selected]" value="1" data-id="{{ $clothType->id }}" {{ old("items.{$clothType->id}.selected") ? 'checked' : '' }} />
                                </span>
                                <span>
                                    <span class="fs-4 fw-bold text-gray-900">{{ $clothType->title }}</span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- BÖLÜM 3: ÖLÇÜLER VE ÜRÜN BİLGİLERİ (DİNAMİK KARTLAR) -->
            <div id="quick_order_items_container">
                @foreach($clothTypes as $clothType)
                    <div class="card card-flush mb-6 cloth-type-section d-none" id="cloth_section_{{ $clothType->id }}">
                        <input type="hidden" name="items[{{ $clothType->id }}][cloth_type_id]" value="{{ $clothType->id }}">
                        
                        <div class="card-header pt-5 bg-light-primary min-h-60px">
                            <div class="card-title">
                                <h3 class="fw-bold text-primary mb-0">{{ $clothType->title }}</h3>
                            </div>
                        </div>

                        <div class="card-body pt-6">
                            <!-- Tarihler ve Fiyat -->
                            <div class="row g-5 mb-8 border-bottom pb-6">
                                <div class="col-md-4">
                                    <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.price') }}</label>
                                    <div class="input-group input-group-solid">
                                        <input type="number" step="0.01" name="items[{{ $clothType->id }}][price]" class="form-control cloth-price-input" value="{{ old("items.{$clothType->id}.price", 0) }}" required />
                                        <span class="input-group-text">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.trial_date') }}</label>
                                    <input type="date" name="items[{{ $clothType->id }}][trial_date]" class="form-control form-control-solid" value="{{ old("items.{$clothType->id}.trial_date") }}" />
                                    <span class="fs-7 text-muted">{{ __('quick_orders.trial_date_helper') }}</span>
                                </div>
                                <div class="col-md-4">
                                    <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.delivery_date') }}</label>
                                    <input type="date" name="items[{{ $clothType->id }}][delivery_date]" class="form-control form-control-solid" value="{{ old("items.{$clothType->id}.delivery_date") }}" />
                                    <span class="fs-7 text-muted">{{ __('quick_orders.delivery_date_helper') }}</span>
                                </div>
                            </div>

                            <!-- ÖLÇÜ KALEMLERİ -->
                            <div class="mb-8">
                                <h4 class="text-gray-800 fw-bold mb-4">{{ __('quick_orders.measurements') }}</h4>
                                <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
                                    @forelse($clothType->measureTypes as $measureType)
                                        <div class="col">
                                            <div class="bg-gray-100 rounded p-4 text-center">
                                                <label class="fs-7 fw-bold text-gray-700 mb-1 d-block">{{ $measureType->title }}</label>
                                                <div class="input-group input-group-sm input-group-solid">
                                                    <input type="text" name="items[{{ $clothType->id }}][measurements][{{ $measureType->id }}]" 
                                                           class="form-control text-center fw-bold fs-6 p-2 measure-input-field" 
                                                           data-cloth="{{ $clothType->id }}" 
                                                           data-measure="{{ $measureType->id }}"
                                                           value="{{ old("items.{$clothType->id}.measurements.{$measureType->id}") }}" />
                                                    @if($measureType->unit)
                                                        <span class="input-group-text fs-9 px-2 bg-light">{{ $measureType->unit->symbol }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12 text-muted fs-7">Bu kıyafet türüne ait tanımlı ölçü kalemi bulunmuyor.</div>
                                    @endforelse
                                </div>
                            </div>

                            <!-- KIYAFET ÖZELLİKLERİ -->
                            @if($clothType->attributes->count() > 0)
                                <div>
                                    <h4 class="text-gray-800 fw-bold mb-4">{{ __('quick_orders.attributes') }}</h4>
                                    <div class="row g-5">
                                        @foreach($clothType->attributes as $attribute)
                                            @php
                                                $isOnlyImage = $attribute->only_image;
                                                $isExtraImage = $attribute->extra_image;
                                            @endphp
                                            <div class="col-md-4 mb-4 attribute-quick-group">
                                                <label class="fs-6 fw-semibold mb-2">{{ $attribute->title }}</label>
                                                <div class="{{ $isOnlyImage ? 'd-flex justify-content-start' : 'input-group input-group-sm input-group-solid' }}">
                                                    @if(!$isOnlyImage)
                                                        <select name="items[{{ $clothType->id }}][attributes][{{ $attribute->id }}]" class="form-select form-select-solid attribute-select" data-placeholder="Özellik Seçin">
                                                            <option value="" data-image="">Seçim Yok</option>
                                                            @foreach($attribute->options as $option)
                                                                <option value="{{ $option->id }}" 
                                                                        data-image="{{ $option->image_path ? (str_starts_with($option->image_path, 'http') || str_starts_with($option->image_path, '//') ? $option->image_path : asset('storage/' . $option->image_path)) : '' }}"
                                                                        {{ old("items.{$clothType->id}.attributes.{$attribute->id}") == $option->id ? 'selected' : '' }}>
                                                                    {{ $option->name }} @if($option->code) ({{ $option->code }}) @endif
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    @endif

                                                    @if($isOnlyImage || $isExtraImage)
                                                        <button type="button" class="btn upload-quick-image-btn {{ $isOnlyImage ? 'btn-primary w-100 py-3' : 'btn-icon btn-light-primary' }}" title="Görsel Yükle/Çek">
                                                            @if($isOnlyImage)
                                                                <i class="fas fa-camera me-2 fs-3"></i> Görsel Ekle / Çek
                                                            @else
                                                                <i class="fas fa-camera fs-3"></i>
                                                            @endif
                                                        </button>
                                                    @endif
                                                </div>
                                                <input type="file" name="items[{{ $clothType->id }}][attribute_images][{{ $attribute->id }}]" class="d-none quick-image-file-input" accept="image/*" />
                                                
                                                <!-- Preview wrapper -->
                                                <div class="mt-2 text-center quick-image-preview-wrapper d-none">
                                                    <div class="image-input image-input-outline" data-kt-image-input="true">
                                                        <div class="image-input-wrapper w-80px h-80px quick-image-preview" style="background-size: cover; background-position: center;"></div>
                                                        <button type="button" class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-20px h-20px bg-body shadow remove-quick-image-btn" title="Görseli Kaldır">
                                                            <i class="ki-outline ki-cross fs-6"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>
                @endforeach
            </div>

            <!-- BÖLÜM 4: MUHASEBE & ÖDEME BİLGİLERİ -->
            <div class="card card-flush mb-6">
                <div class="card-header pt-5">
                    <div class="card-title d-flex flex-column">
                        <h2>3. {{ __('quick_orders.payment_details') }}</h2>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <div class="row g-5">
                        <div class="col-md-2">
                            <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.order_date') }}</label>
                            <input type="date" name="order_date" id="order_date" class="form-control form-control-solid" value="{{ old('order_date', date('Y-m-d')) }}" required />
                        </div>
                        <div class="col-md-2">
                            <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.total_price') }}</label>
                            <div class="input-group input-group-solid">
                                <input type="number" step="0.01" name="total_price" id="total_price" class="form-control fw-bold fs-4 text-success" value="{{ old('total_price', 0) }}" required />
                                <span class="input-group-text currency-symbol">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.advance_payment') }}</label>
                            <div class="input-group input-group-solid">
                                <input type="number" step="0.01" name="advance_payment" id="advance_payment" class="form-control fw-bold fs-4 text-primary" value="{{ old('advance_payment', 0) }}" />
                                <span class="input-group-text currency-symbol">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="fs-6 fw-semibold mb-2">{{ __('invoices.payment_method') }}</label>
                            <select name="payment_method" class="form-select form-select-solid" data-control="select2" data-hide-search="true">
                                <option value="cash" selected>{{ __('invoices.cash') }}</option>
                                <option value="bank_transfer">{{ __('invoices.bank_transfer') }}</option>
                                <option value="credit_card">{{ __('invoices.credit_card') }}</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.balance') }}</label>
                            <div class="input-group input-group-solid">
                                <input type="number" step="0.01" id="balance" class="form-control fw-bold fs-4 text-danger" value="0.00" readonly />
                                <span class="input-group-text currency-symbol">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="row g-5 mt-2">
                        <div class="col-md-6">
                            <label class="required fs-6 fw-semibold mb-2">Para Birimi</label>
                            <select name="currency_id" id="currency_id" class="form-select form-select-solid" data-control="select2" data-placeholder="Seçiniz">
                                @foreach($currencies as $currency)
                                    <option value="{{ $currency->id }}" data-code="{{ $currency->short_code }}" data-symbol="{{ $currency->symbol }}" {{ $currency->id == app('current_company')->currency_id ? 'selected' : '' }}>
                                        {{ $currency->short_code }} ({{ $currency->symbol }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6" id="exchange_rate_container" style="display: none;">
                            <label class="required fs-6 fw-semibold mb-2">Döviz Kuru (Exchange Rate)</label>
                            <input type="number" step="0.000001" class="form-control form-control-solid" id="exchange_rate" name="exchange_rate" value="1.000000" />
                        </div>

                        <div class="col-md-8">
                            <label class="fs-6 fw-semibold mb-2">{{ __('quick_orders.note') }}</label>
                            <textarea name="note" class="form-control form-control-solid" rows="3" placeholder="{{ __('quick_orders.write_order_note') }}">{{ old('note') }}</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="required fs-6 fw-semibold mb-2">{{ __('quick_orders.responsible_user') }}</label>
                            <select name="responsible_user_id" class="form-select form-select-solid" data-control="select2" required>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('responsible_user_id', auth()->id()) == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end py-6 px-9 bg-light-neutral border-top">
                    <a href="{{ route('orders.index') }}" class="btn btn-light me-3">{{ __('common.cancel') }}</a>
                    <button type="submit" class="btn btn-success btn-lg px-10 fw-bold">{{ __('quick_orders.save') }}</button>
                </div>
            </div>

        </form>
    </div>
</div>
<!--end::Content-->
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 1. Helper to retrieve DOM elements dynamically to avoid initialization timing issues
        function getDOM() {
            return {
                typeExisting: document.getElementById('type_existing'),
                typeNew: document.getElementById('type_new'),
                existingSection: document.getElementById('existing_customer_section'),
                customerFieldsSection: document.getElementById('customer_fields_section'),
                customerSelect: $('#customer_select'),
                clothCheckboxes: document.querySelectorAll('.cloth-type-checkbox'),
                totalPriceInput: document.getElementById('total_price'),
                advancePaymentInput: document.getElementById('advance_payment'),
                balanceInput: document.getElementById('balance'),
                customerInputs: {
                    first_name: document.getElementById('c_first_name'),
                    last_name: document.getElementById('c_last_name'),
                    phone: document.getElementById('c_phone'),
                    email: document.getElementById('c_email'),
                    height: document.getElementById('c_height'),
                    weight: document.getElementById('c_weight'),
                    shoe_size: document.getElementById('c_shoe_size'),
                    gender: document.getElementById('c_gender'),
                    birth_date: document.getElementById('c_birth_date'),
                    wedding_anniversary: document.getElementById('c_wedding_anniversary'),
                    address: document.getElementById('c_address'),
                    type: document.getElementById('c_type'),
                    tckimlik: document.getElementById('c_tckimlik'),
                    tax_office: document.getElementById('c_tax_office'),
                    tax_number: document.getElementById('c_tax_number')
                }
            };
        }

        // 2. Calculation Helpers
        function calculateBalance() {
            const dom = getDOM();
            if (!dom.totalPriceInput || !dom.balanceInput) return;
            const total = parseFloat(dom.totalPriceInput.value) || 0;
            const advance = parseFloat(dom.advancePaymentInput ? dom.advancePaymentInput.value : 0) || 0;
            const balance = Math.max(0, total - advance);
            dom.balanceInput.value = balance.toFixed(2);
        }

        function calculateTotalPrice() {
            const dom = getDOM();
            if (!dom.totalPriceInput) return;
            let total = 0;
            document.querySelectorAll('.cloth-price-input').forEach(input => {
                const section = input.closest('.cloth-type-section');
                if (section && !section.classList.contains('d-none')) {
                    total += parseFloat(input.value) || 0;
                }
            });
            dom.totalPriceInput.value = total.toFixed(2);
            calculateBalance();
        }

        function toggleTaxFields() {
            const dom = getDOM();
            const typeVal = dom.customerInputs.type ? dom.customerInputs.type.value : 'individual';
            const fieldTckimlik = document.getElementById('field_tckimlik');
            const fieldTaxOffice = document.getElementById('field_tax_office');
            const fieldTaxNumber = document.getElementById('field_tax_number');

            if (typeVal === 'corporate') {
                if (fieldTckimlik) fieldTckimlik.style.display = 'none';
                if (fieldTaxOffice) fieldTaxOffice.style.display = 'block';
                if (fieldTaxNumber) fieldTaxNumber.style.display = 'block';
            } else {
                if (fieldTckimlik) fieldTckimlik.style.display = 'block';
                if (fieldTaxOffice) fieldTaxOffice.style.display = 'none';
                if (fieldTaxNumber) fieldTaxNumber.style.display = 'none';
            }
        }

        // 3. UI/UX Toggle Functions
        function toggleCustomerType() {
            const dom = getDOM();
            if (!dom.typeExisting || !dom.typeNew) return;

            if (dom.typeExisting.checked) {
                if (dom.existingSection) dom.existingSection.classList.remove('d-none');
                if (dom.customerInputs.first_name) dom.customerInputs.first_name.removeAttribute('required');
                if (dom.customerInputs.last_name) dom.customerInputs.last_name.removeAttribute('required');
                if (dom.customerInputs.phone) dom.customerInputs.phone.removeAttribute('required');
                
                if (dom.customerFieldsSection) {
                    if (dom.customerSelect && dom.customerSelect.val()) {
                        dom.customerFieldsSection.classList.remove('d-none');
                    } else {
                        dom.customerFieldsSection.classList.add('d-none');
                    }
                }
                
                toggleTaxFields();
            } else {
                if (dom.existingSection) dom.existingSection.classList.add('d-none');
                if (dom.customerSelect && dom.customerSelect.length) dom.customerSelect.val(null).trigger('change');
                
                Object.values(dom.customerInputs).forEach(input => {
                    if (input) {
                        input.value = '';
                        input.removeAttribute('readonly');
                    }
                });
                
                if (dom.customerInputs.type) dom.customerInputs.type.value = 'individual';
                if (dom.customerInputs.gender) dom.customerInputs.gender.value = 'male';
                if (dom.customerInputs.first_name) dom.customerInputs.first_name.setAttribute('required', 'required');
                if (dom.customerInputs.last_name) dom.customerInputs.last_name.setAttribute('required', 'required');
                if (dom.customerInputs.phone) dom.customerInputs.phone.setAttribute('required', 'required');
                
                $('.image-input-wrapper').css('background-image', 'url(' + "{{ asset('assets/media/avatars/blank.png') }}" + ')');
                
                if (dom.customerFieldsSection) dom.customerFieldsSection.classList.remove('d-none');
                
                document.querySelectorAll('.measure-input-field').forEach(input => {
                    input.value = '';
                });
                toggleTaxFields();
            }
        }

        function toggleClothSection(checkbox) {
            const id = checkbox.getAttribute('data-id');
            const section = document.getElementById(`cloth_section_${id}`);
            
            if (section) {
                if (checkbox.checked) {
                    section.classList.remove('d-none');
                    const priceInput = section.querySelector('.cloth-price-input');
                    if (priceInput) priceInput.setAttribute('required', 'required');
                } else {
                    section.classList.add('d-none');
                    const priceInput = section.querySelector('.cloth-price-input');
                    if (priceInput) {
                        priceInput.removeAttribute('required');
                        priceInput.value = 0;
                    }
                    calculateTotalPrice();
                }
            }
        }

        // 4. Initialization & Event Listeners
        const dom = getDOM();

        if (dom.typeExisting) dom.typeExisting.addEventListener('change', toggleCustomerType);
        if (dom.typeNew) dom.typeNew.addEventListener('change', toggleCustomerType);
        if (dom.customerInputs.type) dom.customerInputs.type.addEventListener('change', toggleTaxFields);
        toggleCustomerType(); // Init state

        if (dom.clothCheckboxes) {
            dom.clothCheckboxes.forEach(cb => {
                cb.addEventListener('change', function() {
                    toggleClothSection(this);
                });
                toggleClothSection(cb); // Init state
            });
        }

        // Fetch Customer Data via AJAX (Event delegation for select2 safety)
        $(document).on('change', '#customer_select', function() {
            const customerId = $(this).val();
            console.log('Customer selected ID via delegation:', customerId);
            
            document.querySelectorAll('.measure-input-field').forEach(input => {
                input.value = '';
            });

            const currentDom = getDOM();

            if (!customerId) {
                Object.values(currentDom.customerInputs).forEach(input => {
                    if (input) input.value = '';
                });
                $('.image-input-wrapper').css('background-image', 'url(' + "{{ asset('assets/media/avatars/blank.png') }}" + ')');
                
                if (currentDom.typeExisting && currentDom.typeExisting.checked && currentDom.customerFieldsSection) {
                    currentDom.customerFieldsSection.classList.add('d-none');
                }
                return;
            }

            if (currentDom.customerFieldsSection) {
                currentDom.customerFieldsSection.classList.remove('d-none');
            }

            const blockTarget = document.querySelector("#kt_quick_order_form") || document.body;
            let blockUI = KTBlockUI.getInstance(blockTarget);
            if (!blockUI) {
                blockUI = new KTBlockUI(blockTarget, {
                    message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> Müşteri verileri ve ölçüleri yükleniyor...</div>'
                });
            }
            blockUI.block();

            $.ajax({
                url: "{{ url('/') }}/{{ app('current_company')->uuid }}/quick-orders/customer-data/" + customerId,
                method: 'GET',
                success: function(response) {
                    const target = document.querySelector("#kt_quick_order_form") || document.body;
                    const bUI = KTBlockUI.getInstance(target);
                    if (bUI) bUI.release();
                    try {
                        const c = response.customer;
                        const measurements = response.latest_measurements;

                        console.log('Loaded customer data:', c);
                        console.log('Loaded measurements:', measurements);

                        const currentInputs = getDOM().customerInputs;

                        if (currentInputs.first_name) currentInputs.first_name.value = c.first_name || '';
                        if (currentInputs.last_name) currentInputs.last_name.value = c.last_name || '';
                        if (currentInputs.phone) currentInputs.phone.value = c.phone || '';
                        if (currentInputs.email) currentInputs.email.value = c.email || '';
                        if (currentInputs.height) currentInputs.height.value = c.height || '';
                        if (currentInputs.weight) currentInputs.weight.value = c.weight || '';
                        if (currentInputs.shoe_size) currentInputs.shoe_size.value = c.shoe_size || '';
                        if (currentInputs.gender) currentInputs.gender.value = c.gender || 'male';
                        
                        if (c.birth_date && typeof c.birth_date === 'string' && currentInputs.birth_date) {
                            currentInputs.birth_date.value = c.birth_date.substring(0, 10);
                        } else if (currentInputs.birth_date) {
                            currentInputs.birth_date.value = '';
                        }
                        
                        if (c.wedding_anniversary && typeof c.wedding_anniversary === 'string' && currentInputs.wedding_anniversary) {
                            currentInputs.wedding_anniversary.value = c.wedding_anniversary.substring(0, 10);
                        } else if (currentInputs.wedding_anniversary) {
                            currentInputs.wedding_anniversary.value = '';
                        }
                        
                        if (currentInputs.address) currentInputs.address.value = c.address || '';
                        if (currentInputs.type) currentInputs.type.value = c.type || 'individual';
                        if (currentInputs.tckimlik) currentInputs.tckimlik.value = c.tckimlik || '';
                        if (currentInputs.tax_office) currentInputs.tax_office.value = c.tax_office || '';
                        if (currentInputs.tax_number) currentInputs.tax_number.value = c.tax_number || '';
                        toggleTaxFields();

                        if (c.photo) {
                            $('.image-input-wrapper').css('background-image', 'url(' + "{{ asset('storage') }}" + '/' + c.photo + ')');
                        } else {
                            $('.image-input-wrapper').css('background-image', 'url(' + "{{ asset('assets/media/avatars/blank.png') }}" + ')');
                        }

                        if (measurements) {
                            Object.keys(measurements).forEach(clothTypeId => {
                                const clothMeasures = measurements[clothTypeId];
                                Object.keys(clothMeasures).forEach(measureTypeId => {
                                    const val = clothMeasures[measureTypeId];
                                    const input = document.querySelector(`.measure-input-field[data-cloth="${clothTypeId}"][data-measure="${measureTypeId}"]`);
                                    if (input) {
                                        input.value = val;
                                    }
                                });
                            });
                        }
                    } catch (err) {
                        console.error('JS Processing Error:', err);
                    }
                },
                error: function(xhr) {
                    const target = document.querySelector("#kt_quick_order_form") || document.body;
                    const bUI = KTBlockUI.getInstance(target);
                    if (bUI) bUI.release();
                    console.error('AJAX Load Error:', xhr);
                    Swal.fire({
                        text: 'Müşteri verileri yüklenirken bir hata oluştu.',
                        icon: 'error',
                        buttonsStyling: false,
                        confirmButtonText: 'Tamam',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        }
                    });
                }
            });
        });

        // Listen for price inputs in sections
        document.addEventListener('input', function(e) {
            if (e.target.classList.contains('cloth-price-input')) {
                calculateTotalPrice();
            }
        });

        if (dom.totalPriceInput) {
            dom.totalPriceInput.addEventListener('input', calculateBalance);
        }
        if (dom.advancePaymentInput) {
            dom.advancePaymentInput.addEventListener('input', calculateBalance);
        }

        $('#currency_id').on('change', function() {
            const selectedOpt = $(this).find(':selected');
            const code = selectedOpt.data('code');
            const symbol = selectedOpt.data('symbol');
            
            $('.currency-symbol').text(symbol);
            
            if (code === 'TRY') {
                $('#exchange_rate_container').hide();
                $('#exchange_rate').val('1.000000');
            } else {
                $('#exchange_rate_container').show();
                $.get("{{ url('/') }}/{{ app('current_company')->uuid }}/exchange-rates/" + code, function(data) {
                    if (data && data.rate) {
                        $('#exchange_rate').val(data.rate);
                    }
                });
            }
        }).trigger('change');

        // 5. Select2 Custom Formatting for Attributes with Images
        function formatAttributeOption(state) {
            if (!state.id) {
                return state.text;
            }
            const element = state.element;
            const imageUrl = element ? element.getAttribute('data-image') : '';
            if (!imageUrl) {
                return state.text;
            }
            return $(
                '<span class="d-flex align-items-center"><img src="' + imageUrl + '" class="w-25px h-25px rounded me-2 object-fit-cover border shadow-sm" alt="" />' + state.text + '</span>'
            );
        }

        // Initialize Select2 on attribute select elements with custom template formatting
        $('.attribute-select').each(function() {
            $(this).select2({
                templateResult: formatAttributeOption,
                templateSelection: formatAttributeOption,
                minimumResultsForSearch: Infinity, // Hides search bar
                width: '100%'
            });
        });

        // Trigger customer change on page load if customer is pre-selected
        const initialCustomerSelect = $('#customer_select');
        if (initialCustomerSelect.val()) {
            initialCustomerSelect.trigger('change');
        }
        // Handle quick order attribute image upload
        $(document).on('click', '.upload-quick-image-btn', function() {
            $(this).closest('.attribute-quick-group').find('.quick-image-file-input').click();
        });

        $(document).on('change', '.quick-image-file-input', function() {
            const input = this;
            const group = $(input).closest('.attribute-quick-group');
            const previewWrapper = group.find('.quick-image-preview-wrapper');
            const preview = group.find('.quick-image-preview');
            const btn = group.find('.upload-quick-image-btn');

            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.css('background-image', 'url(' + e.target.result + ')');
                    previewWrapper.removeClass('d-none');
                    btn.removeClass('btn-light-primary').addClass('btn-light-success');
                };
                reader.readAsDataURL(input.files[0]);
            }
        });

        $(document).on('click', '.remove-quick-image-btn', function() {
            const group = $(this).closest('.attribute-quick-group');
            const input = group.find('.quick-image-file-input');
            const previewWrapper = group.find('.quick-image-preview-wrapper');
            const preview = group.find('.quick-image-preview');
            const btn = group.find('.upload-quick-image-btn');

            input.val('');
            preview.css('background-image', '');
            previewWrapper.addClass('d-none');
            btn.removeClass('btn-light-success').addClass('btn-light-primary');
        });

        // Sipariş formu gönderildiğinde butonu pasifleştirip yükleniyor durumuna al
        $('#kt_orders_create_form').on('submit', function () {
            const btn = $(this).find('button[type="submit"]');
            if (btn.length) {
                const originalText = btn.html();
                btn.prop('disabled', true);
                btn.html('<span class="spinner-border spinner-border-sm align-middle me-2"></span> Siparişiniz oluşturuluyor...');
                
                // Olası ağ kesintilerinde veya uzun süren işlemlerde formun kilitli kalmasını önlemek için (Fail-safe)
                setTimeout(function() {
                    btn.prop('disabled', false);
                    btn.html(originalText);
                }, 15000); // 15 saniye sonra butonu otomatik aç
            }
        });
    });
</script>
@endpush