@extends('layouts.app')

@section('content')
<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">{{ __('orders.create') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ url('/') }}" class="text-muted text-hover-primary">{{ __('common.home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('orders.index') }}" class="text-muted text-hover-primary">{{ __('orders.title') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ __('orders.create') }}</li>
            </ul>
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <form action="{{ route('orders.store') }}" method="POST" id="kt_orders_create_form" enctype="multipart/form-data">
            @csrf
            
            <div class="card card-flush mb-8">
                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>1. {{ __('orders.order_basics') }}</h2>
                    </div>
                </div>
                <div class="card-body pt-5">
                    <div class="row row-cols-1 row-cols-md-3">
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('common.customer') }}</label>
                                <select name="customer_id" id="customer_select" class="form-select form-select-solid" data-control="select2" data-placeholder="{{ __('orders.select_customer') }}">
                                    <option></option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}" {{ ($selectedCustomer && $selectedCustomer->id == $customer->id) ? 'selected' : '' }}>
                                            {{ $customer->first_name }} {{ $customer->last_name }} ({{ $customer->customer_code }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('common.status') }}</label>
                                <select name="status" class="form-select form-select-solid" data-control="select2" data-hide-search="true">
                                    <option value="draft">{{ __('orders.status_draft') }}</option>
                                    <option value="pending_approval">{{ __('orders.status_pending_approval') }}</option>
                                    <option value="active" selected>{{ __('orders.status_active') }}</option>
                                    <option value="completed">{{ __('orders.status_completed') }}</option>
                                    <option value="cancelled">{{ __('orders.status_cancelled') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">{{ __('messages.responsible_user') }}</label>
                                <select name="responsible_user_id" class="form-select form-select-solid" data-control="select2">
                                    @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>
            </div>

            <div class="card card-flush mb-8">
                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>2. {{ __('orders.items_clothes') }}</h2>
                    </div>
                </div>
                <div class="card-body pt-5">
                    <div id="kt_order_items_repeater">
                        <div class="form-group">
                            <div data-repeater-list="items">
                                <div data-repeater-item class="card card-bordered mb-8 shadow-sm repeater-item-card">
                                    <div class="card-header pt-5 bg-light-primary min-h-60px d-flex align-items-center justify-content-between">
                                        <div class="card-title m-0">
                                            <h3 class="fw-bold text-primary mb-0 card-title-text">Yeni Ürün Kalemi</h3>
                                        </div>
                                        <div class="card-toolbar m-0">
                                            <button type="button" data-repeater-delete class="btn btn-sm btn-icon btn-light-danger rounded-circle">
                                                <i class="ki-duotone ki-trash fs-3">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                    <span class="path5"></span>
                                                </i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body pt-6">
                                        <div class="row g-5 mb-8 border-bottom pb-6">
                                            <div class="col-md-3">
                                                <label class="form-label required fw-semibold">{{ __('orders.cloth_type') }}</label>
                                                <select name="cloth_type_id" class="form-select form-select-solid cloth-type-select" data-placeholder="{{ __('orders.select_type') }}">
                                                    <option></option>
                                                    @foreach($clothTypes as $type)
                                                        <option value="{{ $type->id }}">{{ $type->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label fw-semibold">{{ __('orders.trial_date') }}</label>
                                                <input type="date" class="form-control form-control-solid" name="trial_date" />
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label fw-semibold">{{ __('orders.delivery_date') }}</label>
                                                <input type="date" class="form-control form-control-solid" name="delivery_date" />
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label required fw-semibold">{{ __('orders.price') }}</label>
                                                <div class="input-group input-group-solid">
                                                    <input type="number" step="0.01" class="form-control form-control-solid item-price" name="price" value="0" />
                                                    <span class="input-group-text currency-symbol">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Dynamic Fields Section (Hidden by default, shown via JS) -->
                                        <div class="item-specs-container mt-5" style="display:none;">
                                            <!-- Measurements sub-section -->
                                            <div class="mb-8">
                                                <h4 class="text-gray-800 fw-bold mb-4">{{ __('orders.measurements') }}</h4>
                                                <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4 measurements-grid">
                                                    <!-- Injected via JS -->
                                                </div>
                                            </div>
                                            
                                            <div class="separator separator-dashed my-6"></div>

                                            <!-- Attributes sub-section -->
                                            <div class="attributes-section">
                                                <h4 class="text-gray-800 fw-bold mb-4">{{ __('orders.attributes') }}</h4>
                                                <div class="row g-5 attributes-grid">
                                                    <!-- Injected via JS -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mt-5">
                            <button type="button" data-repeater-create class="btn btn-sm btn-light-primary">
                                <i class="ki-duotone ki-plus fs-3"></i> {{ __('orders.add_another_item') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-flush mb-8">
                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>3. {{ __('orders.payments_notes') }}</h2>
                    </div>
                </div>
                <div class="card-body pt-5">
                    <div class="row row-cols-1 row-cols-md-5">
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('orders.order_date') }}</label>
                                <input type="date" class="form-control form-control-solid" name="order_date" value="{{ date('Y-m-d') }}" />
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('orders.total_price') }}</label>
                                <div class="input-group input-group-solid">
                                    <input type="number" step="0.01" class="form-control form-control-solid fs-2 fw-bold" id="total_price_display" name="total_price" value="0" readonly />
                                    <span class="input-group-text currency-symbol">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">{{ __('orders.advance_payment') }}</label>
                                <div class="input-group input-group-solid">
                                    <input type="number" step="0.01" class="form-control form-control-solid" id="advance_payment" name="advance_payment" value="0" />
                                    <span class="input-group-text currency-symbol">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">{{ __('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>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">{{ __('orders.balance_due') }}</label>
                                <div class="d-flex align-items-center gap-1 mt-3">
                                    <span class="fs-2 fw-bold text-danger" id="balance_display">0.00</span>
                                    <span class="fs-2 fw-bold text-danger currency-symbol">{{ app('current_company')->currency?->symbol ?? '₺' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row row-cols-1 row-cols-md-2 mt-3">
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">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>
                        <div class="col" id="exchange_rate_container" style="display: none;">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('common.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>
                    </div>
                    
                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label mt-3">{{ __('orders.order_note') }}</label>
                        <textarea class="form-control form-control-solid" name="note" rows="3"></textarea>
                    </div>

                    <div class="mb-10">
                        <div class="form-check form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" name="create_invoice" value="1" id="create_invoice" checked />
                            <label class="form-check-label fw-bold text-gray-700" for="create_invoice">
                                {{ __('orders.create_invoice_automatically') }}
                            </label>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <a href="{{ route('orders.index') }}" class="btn btn-light btn-active-light-primary me-2">{{ __('common.cancel') }}</a>
                        <button type="submit" name="action" value="save_create_new" class="btn btn-light-primary me-2">
                            {{ __('common.save_and_create_new') }}
                        </button>
                        <button type="submit" name="action" value="save" class="btn btn-primary">
                            {{ __('orders.create') }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<template id="measurement-template">
    <div class="col">
        <div class="bg-gray-100 rounded p-4 text-center h-100 d-flex flex-column justify-content-between">
            <label class="fs-7 fw-bold text-gray-700 mb-2 d-block">{label}</label>
            <div class="input-group input-group-sm input-group-solid">
                <input type="number" step="0.01" name="items[{index}][measurements][{id}]" class="form-control text-center fw-bold fs-6 p-2" />
                <span class="input-group-text fs-9 px-2 bg-light">{unit}</span>
            </div>
        </div>
    </div>
</template>

<template id="attribute-template">
    <div class="col-md-4 mb-4">
        <label class="form-label fs-7 fw-bold text-gray-700 mb-2 d-block">{label}</label>
        <div class="input-group input-group-sm input-group-solid">
            <select name="items[{index}][attributes][{id}]" class="form-select form-select-sm form-select-solid attribute-select-dynamic" data-placeholder="Seçiniz">
                <option value="">Seçim Yok</option>
                {options}
            </select>
            <button type="button" class="btn btn-icon btn-light-primary upload-attribute-image-btn" title="Görsel Yükle/Çek">
                <i class="fas fa-camera fs-3"></i>
            </button>
        </div>
        <input type="file" name="items[{index}][attribute_images][{id}]" class="d-none attribute-image-file-input" accept="image/*" />
        
        <!-- Preview wrapper -->
        <div class="mt-2 text-center attribute-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 attribute-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-attribute-image-btn" title="Görseli Kaldır">
                    <i class="ki-outline ki-cross fs-6"></i>
                </button>
            </div>
        </div>
    </div>
</template>

@endsection

@push('scripts')
<script src="{{ asset('metronic/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
<script>
    const clothTypes = @json($clothTypes);
    let customerLatestMeasurements = {};
    
    $(document).ready(function() {
        // Handle attribute image upload
        $(document).on('click', '.upload-attribute-image-btn', function() {
            $(this).closest('.col-md-4').find('.attribute-image-file-input').click();
        });

        $(document).on('change', '.attribute-image-file-input', function() {
            const input = this;
            const col = $(input).closest('.col-md-4');
            const previewWrapper = col.find('.attribute-image-preview-wrapper');
            const preview = col.find('.attribute-image-preview');
            const btn = col.find('.upload-attribute-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-attribute-image-btn', function() {
            const col = $(this).closest('.col-md-4');
            const input = col.find('.attribute-image-file-input');
            const previewWrapper = col.find('.attribute-image-preview-wrapper');
            const preview = col.find('.attribute-image-preview');
            const btn = col.find('.upload-attribute-image-btn');

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

        $('#kt_order_items_repeater').repeater({
            initEmpty: false,
            show: function () {
                $(this).slideDown();
                initItemEvents($(this));
            },
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement, function() {
                    calculateGrandTotal();
                });
            }
        });

        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>'
            );
        }

        function initItemEvents($item) {
            const index = $item.index();
            const $selector = $item.find('.cloth-type-select');
            
            $selector.on('change', function() {
                const typeId = $(this).val();
                if (!typeId) {
                    $item.find('.item-specs-container').hide();
                    $item.find('.card-title-text').text("Yeni Ürün Kalemi");
                    return;
                }

                const type = clothTypes.find(t => t.id == typeId);
                if (type) {
                    $item.find('.card-title-text').text(type.title);
                    renderSpecs($item, type, index);
                }
            });

            $item.find('.item-price').on('input', calculateGrandTotal);
        }

        function renderSpecs($item, type, index) {
            const $container = $item.find('.item-specs-container');
            const $mGrid = $item.find('.measurements-grid');
            const $aGrid = $item.find('.attributes-grid');
            
            $mGrid.empty();
            $aGrid.empty();

            // Render Measurements
            type.measure_types.forEach(m => {
                let val = '';
                if (customerLatestMeasurements && customerLatestMeasurements[type.id] && customerLatestMeasurements[type.id][m.id] !== undefined) {
                    val = customerLatestMeasurements[type.id][m.id];
                }

                let html = $('#measurement-template').html()
                    .replace('{label}', m.title)
                    .replace('{unit}', m.unit ? m.unit.name : 'cm')
                    .replace('{id}', m.id)
                    .replace('{index}', index);
                
                const $html = $(html);
                $html.find('input').val(val);
                $mGrid.append($html);
            });

            // Render Attributes
            if (type.attributes && type.attributes.length > 0) {
                $item.find('.attributes-section').show();
                type.attributes.forEach(a => {
                    let optionsHtml = a.options.map(o => {
                        const img = o.image_path ? (o.image_path.startsWith('http') || o.image_path.startsWith('//') ? o.image_path : '/storage/' + o.image_path) : '';
                        return `<option value="${o.id}" data-image="${img}">${o.name} ${o.code ? '(' + o.code + ')' : ''}</option>`;
                    }).join('');

                    let html = $('#attribute-template').html()
                        .replace('{label}', a.title)
                        .replace('{options}', optionsHtml)
                        .replace('{id}', a.id)
                        .replace('{index}', index);
                    
                    const $html = $(html);
                    
                    if (a.only_image) {
                        $html.find('select').remove();
                        $html.find('.input-group').removeClass('input-group').addClass('d-flex justify-content-start');
                        $html.find('.upload-attribute-image-btn').removeClass('btn-light-primary btn-icon').addClass('btn-primary w-100 py-3').html('<i class="fas fa-camera me-2 fs-3"></i> Görsel Ekle / Çek');
                    } else {
                        if (!a.extra_image) {
                            $html.find('.upload-attribute-image-btn').remove();
                        }
                    }
                    
                    $aGrid.append($html);
                });

                // Initialize Select2 with dynamic images formatting
                $aGrid.find('.attribute-select-dynamic').each(function() {
                    $(this).select2({
                        templateResult: formatAttributeOption,
                        templateSelection: formatAttributeOption,
                        minimumResultsForSearch: Infinity,
                        width: '100%'
                    });
                });
            } else {
                $item.find('.attributes-section').hide();
            }

            $container.show();
        }

        function calculateGrandTotal() {
            let total = 0;
            $('.item-price').each(function() {
                total += parseFloat($(this).val()) || 0;
            });
            $('#total_price_display').val(total.toFixed(2));
            calculateBalance();
        }

        function calculateBalance() {
            const total = parseFloat($('#total_price_display').val()) || 0;
            const advance = parseFloat($('#advance_payment').val()) || 0;
            const balance = total - advance;
            $('#balance_display').text(balance.toLocaleString(undefined, {minimumFractionDigits: 2}));
        }

        $('#advance_payment').on('input', calculateBalance);

        $('#currency_id').on('change', function() {
            const selectedOpt = $(this).find(':selected');
            const code = selectedOpt.data('code');
            const symbol = selectedOpt.data('symbol');

            if (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');
        
        // Init first item
        initItemEvents($('#kt_order_items_repeater [data-repeater-item]').first());

        // Fetch Customer Measurements on Customer Selection
        function updateAllItemsMeasurements() {
            $('#kt_order_items_repeater [data-repeater-item]').each(function() {
                const $item = $(this);
                const typeId = $item.find('.cloth-type-select').val();
                if (typeId && customerLatestMeasurements && customerLatestMeasurements[typeId]) {
                    const clothMeasures = customerLatestMeasurements[typeId];
                    Object.keys(clothMeasures).forEach(measureTypeId => {
                        const val = clothMeasures[measureTypeId];
                        const input = $item.find(`input[name*="[measurements][${measureTypeId}]"]`);
                        if (input.length) {
                            input.val(val);
                        }
                    });
                }
            });
        }

        $(document).on('change', '#customer_select', function() {
            const customerId = $(this).val();
            customerLatestMeasurements = {};

            if (!customerId) {
                return;
            }

            const blockTarget = document.querySelector("#kt_orders_create_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 ö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 bUI = KTBlockUI.getInstance(blockTarget);
                    if (bUI) bUI.release();
                    if (response && response.latest_measurements) {
                        customerLatestMeasurements = response.latest_measurements;
                        updateAllItemsMeasurements();
                    }
                },
                error: function(xhr) {
                    const bUI = KTBlockUI.getInstance(blockTarget);
                    if (bUI) bUI.release();
                    console.error('AJAX Load Error:', xhr);
                }
            });
        });

        // Trigger change on load if customer is pre-selected
        const initialCustomerSelect = $('#customer_select');
        if (initialCustomerSelect.val()) {
            initialCustomerSelect.trigger('change');
        }
    });
</script>
@endpush