@extends('layouts.app')

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card">
            <form action="{{ route('orders.update', ['order' => $order]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>{{ __('orders.edit') }}</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="required fs-6 fw-semibold form-label">{{ __('common.customer') }}</label>
                                <select name="customer_id" class="form-select form-select-solid" data-control="select2">
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}" @selected(old('customer_id', $order->customer_id) == $customer->id)>
                                            {{ $customer->first_name }} {{ $customer->last_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="required fs-6 fw-semibold form-label">{{ __('common.status') }}</label>
                                <select name="status" class="form-select form-select-solid" data-control="select2" data-hide-search="true">
                                    @php
                                        $status = old('status', $order->status);
                                    @endphp
                                    <option value="draft" @selected($status === 'draft' || $status === 'Draft')>{{ __('orders.status_draft') }}</option>
                                    <option value="pending_approval" @selected($status === 'pending_approval')>{{ __('orders.status_pending_approval') }}</option>
                                    <option value="active" @selected($status === 'active' || $status === 'In Production')>{{ __('orders.status_active') }}</option>
                                    <option value="completed" @selected($status === 'completed' || $status === 'Completed')>{{ __('orders.status_completed') }}</option>
                                    <option value="cancelled" @selected($status === '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">{{ __('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 }}" @selected((int) old('responsible_user_id', $order->responsible_user_id) === $user->id)>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row row-cols-1 row-cols-md-4 mt-3">
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="required fs-6 fw-semibold form-label">{{ __('orders.order_date') }}</label>
                                <input type="date" name="order_date" class="form-control form-control-solid" value="{{ old('order_date', $order->order_date?->format('Y-m-d')) }}">
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="required fs-6 fw-semibold form-label">{{ __('orders.total_price') }}</label>
                                <div class="input-group input-group-solid">
                                    <input type="number" step="0.01" name="total_price" class="form-control form-control-solid" value="{{ old('total_price', $order->total_price) }}">
                                    <span class="input-group-text currency-symbol">{{ $order->currency?->symbol ?? '₺' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label">{{ __('messages.advance_payment') }}</label>
                                <div class="input-group input-group-solid">
                                    <input type="number" step="0.01" name="advance_payment" class="form-control form-control-solid" value="{{ old('advance_payment', $order->advance_payment) }}">
                                    <span class="input-group-text currency-symbol">{{ $order->currency?->symbol ?? '₺' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label">{{ __('invoices.payment_method') }}</label>
                                <select name="payment_method" class="form-select form-select-solid" data-control="select2" data-hide-search="true">
                                    <option value="cash" {{ old('payment_method', $order->payment_method) === 'cash' ? 'selected' : '' }}>{{ __('invoices.cash') }}</option>
                                    <option value="bank_transfer" {{ old('payment_method', $order->payment_method) === 'bank_transfer' ? 'selected' : '' }}>{{ __('invoices.bank_transfer') }}</option>
                                    <option value="credit_card" {{ old('payment_method', $order->payment_method) === 'credit_card' ? 'selected' : '' }}>{{ __('invoices.credit_card') }}</option>
                                </select>
                            </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 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 }}" {{ old('currency_id', $order->currency_id) == $currency->id ? 'selected' : '' }}>
                                            {{ $currency->short_code }} ({{ $currency->symbol }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col" id="exchange_rate_container" style="{{ ($order->currency?->short_code ?? 'TRY') === 'TRY' ? 'display: none;' : '' }}">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label required">{{ __('common.exchange_rate') }}</label>
                                <input type="number" step="0.000001" class="form-control form-control-solid" id="exchange_rate" name="exchange_rate" value="{{ old('exchange_rate', $order->exchange_rate) }}" />
                            </div>
                        </div>
                    </div>

                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label">{{ __('messages.note') }}</label>
                        <textarea name="note" class="form-control form-control-solid" rows="3">{{ old('note', $order->note) }}</textarea>
                    </div>

                    <div class="separator my-8"></div>
                    <h3 class="mb-5">{{ __('orders.order_items') }}</h3>
                    @foreach($order->items as $item)
                        <div class="card card-bordered mb-7">
                            <div class="card-header">
                                <h4 class="card-title mb-0">{{ $item->clothType->title ?? __('orders.not_available') }}</h4>
                            </div>
                            <div class="card-body">
                                <input type="hidden" name="items[{{ $loop->index }}][id]" value="{{ $item->id }}">
                                <div class="row row-cols-1 row-cols-md-4">
                                    <div class="col">
                                        <div class="fv-row mb-5">
                                            <label class="fs-7 fw-semibold form-label">{{ __('common.status') }}</label>
                                            <select name="items[{{ $loop->index }}][status]" class="form-select form-select-solid">
                                                @php
                                                    $itemStatus = old('items.'.$loop->index.'.status', $item->status);
                                                    $normalizedStatus = strtolower(str_replace(' ', '_', $itemStatus));
                                                    $knownNormalized = ['received', 'in_production', 'cutting', 'sewing', 'trial', 'ready', 'delivered'];
                                                @endphp
                                                
                                                <option value="received" @selected($normalizedStatus === 'received' || $itemStatus === 'Sipariş Alındı')>{{ __('messages.item_received') }}</option>
                                                <option value="in_production" @selected($normalizedStatus === 'in_production' || $itemStatus === 'Üretimde')>{{ __('messages.item_in_production') }}</option>
                                                <option value="cutting" @selected($normalizedStatus === 'cutting' || $itemStatus === 'Kesimde')>{{ __('messages.item_cutting') }}</option>
                                                <option value="sewing" @selected($normalizedStatus === 'sewing' || $itemStatus === 'Dikimde')>{{ __('messages.item_sewing') }}</option>
                                                <option value="trial" @selected($normalizedStatus === 'trial' || $itemStatus === 'Provada')>{{ __('messages.item_trial') }}</option>
                                                <option value="ready" @selected($normalizedStatus === 'ready' || $itemStatus === 'Hazır')>{{ __('messages.item_ready') }}</option>
                                                <option value="delivered" @selected($normalizedStatus === 'delivered' || $itemStatus === 'Teslim Edildi')>{{ __('messages.item_delivered') }}</option>
                                                
                                                @if($itemStatus && !in_array($normalizedStatus, $knownNormalized) && !in_array($itemStatus, ['Sipariş Alındı', 'Üretimde', 'Kesimde', 'Dikimde', 'Provada', 'Hazır', 'Teslim Edildi']))
                                                    <option value="{{ $itemStatus }}" selected>{{ $itemStatus }}</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="fv-row mb-5">
                                            <label class="fs-7 fw-semibold form-label">{{ __('orders.trial_date') }}</label>
                                            <input type="date"
                                                   name="items[{{ $loop->index }}][trial_date]"
                                                   class="form-control form-control-solid"
                                                   value="{{ old('items.'.$loop->index.'.trial_date', $item->trial_date?->format('Y-m-d')) }}">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="fv-row mb-5">
                                            <label class="fs-7 fw-semibold form-label">{{ __('orders.delivery_date') }}</label>
                                            <input type="date"
                                                   name="items[{{ $loop->index }}][delivery_date]"
                                                   class="form-control form-control-solid"
                                                   value="{{ old('items.'.$loop->index.'.delivery_date', $item->delivery_date?->format('Y-m-d')) }}">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="fv-row mb-5">
                                            <label class="fs-7 fw-semibold form-label">{{ __('orders.price') }}</label>
                                            <div class="input-group input-group-solid">
                                                <input type="number"
                                                       step="0.01"
                                                       name="items[{{ $loop->index }}][price]"
                                                       class="form-control form-control-solid"
                                                       value="{{ old('items.'.$loop->index.'.price', $item->price) }}">
                                                <span class="input-group-text currency-symbol">{{ $order->currency?->symbol ?? '₺' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row row-cols-1 row-cols-md-2 g-5">
                                    <div class="col">
                                        <div class="border rounded p-4 h-100">
                                            <div class="fw-bold mb-3">{{ __('orders.measurements') }}</div>
                                            @foreach($item->details->where('type', 'measurement') as $detail)
                                                <div class="mb-3">
                                                    <label class="fs-7 text-muted d-block">{{ $detail->label }}</label>
                                                    <input type="text"
                                                           name="items[{{ $loop->parent->index }}][details][{{ $detail->id }}]"
                                                           class="form-control form-control-solid"
                                                           value="{{ old('items.'.$loop->parent->index.'.details.'.$detail->id, $detail->value) }}">
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="border rounded p-4 h-100">
                                            <div class="fw-bold mb-3">{{ __('orders.specs_attributes') }}</div>
                                            @foreach($item->details->where('type', 'attribute') as $detail)
                                                @php
                                                    $isOnlyImage = $detail->attribute ? $detail->attribute->only_image : false;
                                                    $isExtraImage = $detail->attribute ? $detail->attribute->extra_image : true;
                                                @endphp
                                                <div class="mb-5 attribute-edit-group">
                                                    <label class="fs-7 text-muted d-block mb-1">{{ $detail->label }}</label>
                                                    <div class="{{ $isOnlyImage ? 'd-flex justify-content-start' : 'input-group input-group-sm input-group-solid' }}">
                                                        @if(!$isOnlyImage)
                                                            @if($detail->cloth_attribute_id && $detail->attribute && $detail->attribute->options->isNotEmpty())
                                                                <select name="items[{{ $loop->parent->index }}][details][{{ $detail->id }}]"
                                                                        class="form-select form-select-solid attribute-select"
                                                                        data-control="select2"
                                                                        data-placeholder="{{ $detail->label }} Seçin">
                                                                    <option value=""></option>
                                                                    @foreach($detail->attribute->options as $option)
                                                                        <option value="{{ $option->name }}"
                                                                                @selected(old('items.'.$loop->parent->index.'.details.'.$detail->id, $detail->value) == $option->name)
                                                                                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)) : '' }}">
                                                                            {{ $option->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            @else
                                                                <input type="text"
                                                                       name="items[{{ $loop->parent->index }}][details][{{ $detail->id }}]"
                                                                       class="form-control form-control-solid"
                                                                       value="{{ old('items.'.$loop->parent->index.'.details.'.$detail->id, $detail->value) }}">
                                                            @endif
                                                        @endif

                                                        @if($isOnlyImage || $isExtraImage)
                                                            <button type="button" class="btn upload-detail-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[{{ $loop->parent->index }}][detail_images][{{ $detail->id }}]" class="d-none detail-image-file-input" accept="image/*" />
                                                    <input type="hidden" name="items[{{ $loop->parent->index }}][remove_detail_images][{{ $detail->id }}]" value="0" class="remove-detail-image-input" />
                                                    
                                                    <!-- Preview wrapper -->
                                                    <div class="mt-2 text-center detail-image-preview-wrapper {{ $detail->image_path ? '' : 'd-none' }}">
                                                        <div class="image-input image-input-outline" data-kt-image-input="true">
                                                            <div class="image-input-wrapper w-80px h-80px detail-image-preview" style="background-size: cover; background-position: center; background-image: url('{{ $detail->image_path ? asset('storage/' . $detail->image_path) : '' }}')"></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-detail-image-btn" title="Görseli Kaldır">
                                                                <i class="ki-outline ki-cross fs-6"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <a href="{{ route('orders.show', ['order' => $order]) }}" class="btn btn-light btn-active-light-primary me-2">{{ __('common.cancel') }}</a>
                    <button type="submit" class="btn btn-primary">{{ __('common.update') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        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>'
            );
        }

        $('.attribute-select').each(function() {
            $(this).select2({
                templateResult: formatAttributeOption,
                templateSelection: formatAttributeOption,
                minimumResultsForSearch: Infinity,
                width: '100%'
            });
        });

        $('#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');
        // Handle attribute detail image upload
        $(document).on('click', '.upload-detail-image-btn', function() {
            $(this).closest('.attribute-edit-group').find('.detail-image-file-input').click();
        });

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

            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');
                    removeInput.val('0'); // Do not remove
                };
                reader.readAsDataURL(input.files[0]);
            }
        });

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

            input.val('');
            preview.css('background-image', '');
            previewWrapper.addClass('d-none');
            btn.removeClass('btn-light-success').addClass('btn-light-primary');
            removeInput.val('1'); // Flag for removal
        });
    });
</script>
@endpush