{% extends "base.html" %}

{% block content %}
<form method="POST" enctype="multipart/form-data" 
      x-data="{ 
          materialMode: 'sheet', 
          searchCustomer: '',
          openCustomer: false
      }">

    <!-- TOP BAR: Order Info -->
    <div class="win-card mb-6 animate-bounce-in">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
            
            <!-- Date & Time (Read Only) -->
            <div>
                <label class="form-label text-slate-500">تاریخ و زمان ثبت</label>
                <div class="flex items-center gap-2 text-lg font-bold text-slate-700 bg-slate-100 px-4 py-2 rounded-md border border-slate-200">
                    <svg class="w-5 h-5 text-theme-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <span dir="ltr">{{ current_date }}</span>
                </div>
            </div>

            <!-- Order ID (Auto Generated) -->
            <div>
                <label class="form-label text-slate-500">شماره سفارش</label>
                <div class="flex items-center gap-2 text-xl font-black text-theme-primary bg-blue-50 px-4 py-2 rounded-md border border-blue-100">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path></svg>
                    <input type="text" name="order_number" value="{{ order_code }}" readonly class="bg-transparent border-none w-full focus:ring-0 font-mono tracking-widest" dir="ltr">
                </div>
            </div>

        </div>
    </div>

    <!-- SECTION 1: General Specifications -->
    <div class="win-card mb-6">
        <h3 class="text-lg font-bold text-slate-800 border-b pb-3 mb-4 flex items-center gap-2">
            <span class="w-2 h-6 bg-theme-primary rounded-full"></span>
            مشخصات کلی سفارش
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            <!-- Customer with Live Search & Add Button -->
            <div class="relative" x-data="{ open: false, search: '', selected: '' }">
                <div class="flex justify-between items-center mb-1">
                    <label class="form-label">نام مشتری</label>
                    <button type="button" @click="$dispatch('open-add-modal', {type: 'customer'})" class="text-theme-primary hover:bg-blue-50 rounded-full p-1 transition-colors" title="افزودن مشتری جدید">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    </button>
                </div>
                
                <!-- Searchable Dropdown UI -->
                <div class="relative">
                    <input type="text" x-model="search" @focus="open = true" @click.outside="open = false" 
                           class="form-input" placeholder="جستجو مشتری..." name="customer_name_display">
                    
                    <div x-show="open" class="absolute z-10 w-full bg-white border border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto mt-1" x-transition>
                        <!-- Iterate over customers passed from Flask -->
                        {% for customer in customers %}
                        <div class="px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm" 
                             x-show="'{{ customer.name }}'.includes(search)"
                             @click="search = '{{ customer.name }}'; open = false">
                             {{ customer.name }}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Brand Name -->
            <div>
                <label class="form-label">نام برند (محصول)</label>
                <input type="text" name="brand_name" class="form-input" placeholder="مثال: خرمای پیارم" required>
            </div>

            <!-- Quantity -->
            <div>
                <label class="form-label">تعداد سفارش</label>
                <input type="number" name="order_quantity" class="form-input" placeholder="0" required>
            </div>
        </div>
    </div>

    <!-- SECTION 2: Carton Specifications -->
    <div class="win-card mb-6">
        <h3 class="text-lg font-bold text-slate-800 border-b pb-3 mb-4 flex items-center gap-2">
            <span class="w-2 h-6 bg-orange-500 rounded-full"></span>
            مشخصات کارتن
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-4">
            <!-- Carton Type -->
            <div class="md:col-span-2">
                <div class="flex justify-between items-center mb-1">
                    <label class="form-label">نوع کارتن</label>
                    <button type="button" @click="$dispatch('open-add-modal', {type: 'carton_type'})" class="text-theme-primary hover:bg-blue-50 rounded-full p-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    </button>
                </div>
                <select name="carton_type" class="form-input">
                    <option value="" disabled selected>انتخاب کنید...</option>
                    {% for item in carton_types %}
                    <option value="{{ item.id }}">{{ item.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Services -->
            <div class="md:col-span-2">
                <div class="flex justify-between items-center mb-1">
                    <label class="form-label">خدمات</label>
                    <button type="button" @click="$dispatch('open-add-modal', {type: 'service'})" class="text-theme-primary hover:bg-blue-50 rounded-full p-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    </button>
                </div>
                <select name="service" class="form-input">
                    <option value="" disabled selected>انتخاب کنید...</option>
                    {% for item in services %}
                    <option value="{{ item.id }}">{{ item.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-- Dimensions Row -->
        <div class="grid grid-cols-1 md:grid-cols-6 gap-4 items-end">
            <!-- Carton Dimensions -->
            <div class="md:col-span-3 bg-slate-50 p-3 rounded-lg border border-slate-200">
                <label class="form-label text-center border-b border-slate-300 mb-2 pb-1 block">ابعاد کارتن (میلی‌متر)</label>
                <div class="flex gap-2">
                    <div class="flex-1">
                        <input type="number" step="0.1" name="dim_length" placeholder="طول" class="form-input text-center text-sm">
                    </div>
                    <div class="flex-1">
                        <input type="number" step="0.1" name="dim_width" placeholder="عرض" class="form-input text-center text-sm">
                    </div>
                    <div class="flex-1">
                        <input type="number" step="0.1" name="dim_height" placeholder="ارتفاع" class="form-input text-center text-sm">
                    </div>
                </div>
            </div>

            <!-- Blade to Blade -->
            <div class="md:col-span-2 bg-slate-50 p-3 rounded-lg border border-slate-200">
                <label class="form-label text-center border-b border-slate-300 mb-2 pb-1 block">تیغ به تیغ قالب</label>
                <div class="flex gap-2">
                    <div class="flex-1">
                        <input type="number" step="0.1" name="net_length" placeholder="طول" class="form-input text-center text-sm">
                    </div>
                    <div class="flex-1">
                        <input type="number" step="0.1" name="net_width" placeholder="عرض" class="form-input text-center text-sm">
                    </div>
                </div>
            </div>

            <!-- Color -->
            <div class="md:col-span-1">
                <label class="form-label">نوع رنگ</label>
                <select name="color_type" class="form-input">
                    <option value="4color">۴ رنگ</option>
                    <option value="spot">تک رنگ (Spot)</option>
                    <option value="none">بدون چاپ</option>
                </select>
            </div>
        </div>
    </div>

    <!-- SECTION 3: Sheet/Paper (ورق / شیت) -->
    <div class="win-card mb-6">
        <h3 class="text-lg font-bold text-slate-800 border-b pb-3 mb-4 flex justify-between items-center">
            <div class="flex items-center gap-2">
                <span class="w-2 h-6 bg-green-500 rounded-full"></span>
                <span x-text="materialMode == 'sheet' ? 'مشخصات شیت' : 'مشخصات ورق'"></span>
            </div>
            
            <!-- Radio Toggle -->
            <div class="flex bg-slate-100 p-1 rounded-lg">
                <button type="button" @click="materialMode = 'sheet'" 
                        :class="materialMode == 'sheet' ? 'bg-white shadow-sm text-theme-primary font-bold' : 'text-slate-500'"
                        class="px-4 py-1.5 rounded-md text-sm transition-all">شیت</button>
                <button type="button" @click="materialMode = 'cardboard'" 
                        :class="materialMode == 'cardboard' ? 'bg-white shadow-sm text-theme-primary font-bold' : 'text-slate-500'"
                        class="px-4 py-1.5 rounded-md text-sm transition-all">ورق</button>
            </div>
            <input type="hidden" name="material_mode" :value="materialMode">
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
            
            <!-- Combination -->
            <div>
                <div class="flex justify-between items-center mb-1">
                    <label class="form-label" x-text="materialMode == 'sheet' ? 'ترکیب شیت' : 'ترکیب ورق'"></label>
                    <button type="button" @click="$dispatch('open-add-modal', {type: 'material'})" class="text-theme-primary hover:bg-blue-50 rounded-full p-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    </button>
                </div>
                <select name="material_combo" class="form-input">
                    <option value="" disabled selected>انتخاب کنید...</option>
                    {% for item in materials %}
                    <option value="{{ item.id }}">{{ item.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Supplier -->
            <div>
                <div class="flex justify-between items-center mb-1">
                    <label class="form-label">تامین کننده</label>
                    <button type="button" @click="$dispatch('open-add-modal', {type: 'supplier'})" class="text-theme-primary hover:bg-blue-50 rounded-full p-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    </button>
                </div>
                <select name="supplier" class="form-input">
                    <option value="" disabled selected>انتخاب کنید...</option>
                    {% for item in suppliers %}
                    <option value="{{ item.id }}">{{ item.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Quantity -->
            <div>
                <label class="form-label" x-text="materialMode == 'sheet' ? 'تعداد شیت' : 'تعداد ورق'"></label>
                <input type="number" name="material_qty" class="form-input">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Dimensions -->
            <div class="bg-slate-50 p-3 rounded-lg border border-slate-200">
                <label class="form-label text-center border-b border-slate-300 mb-2 pb-1 block" x-text="materialMode == 'sheet' ? 'ابعاد شیت' : 'ابعاد ورق'"></label>
                <div class="flex gap-2">
                    <input type="number" step="0.1" name="material_length" placeholder="طول" class="form-input text-center">
                    <input type="number" step="0.1" name="material_width" placeholder="عرض" class="form-input text-center">
                </div>
            </div>

            <!-- Description -->
            <div class="md:col-span-2">
                <label class="form-label">توضیحات</label>
                <textarea name="description" rows="2" class="form-input resize-none"></textarea>
            </div>
        </div>
    </div>

    <!-- SECTION 4: Poster -->
    <div class="win-card mb-6">
        <h3 class="text-lg font-bold text-slate-800 border-b pb-3 mb-4 flex items-center gap-2">
            <span class="w-2 h-6 bg-purple-500 rounded-full"></span>
            پوستر
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 items-end">
             <!-- Dimensions -->
             <div class="md:col-span-1 bg-slate-50 p-3 rounded-lg border border-slate-200">
                <label class="form-label text-center border-b border-slate-300 mb-2 pb-1 block">سایز پوستر</label>
                <div class="flex gap-2">
                    <input type="number" step="0.1" name="poster_length" placeholder="طول" class="form-input text-center text-sm">
                    <input type="number" step="0.1" name="poster_width" placeholder="عرض" class="form-input text-center text-sm">
                </div>
            </div>

            <!-- Quantity -->
            <div>
                <label class="form-label">تعداد</label>
                <input type="number" name="poster_qty" class="form-input">
            </div>

            <!-- Checkboxes -->
            <div class="md:col-span-2 flex items-center gap-4 h-full pb-2">
                <label class="flex items-center gap-2 cursor-pointer p-2 hover:bg-slate-100 rounded-md transition-colors">
                    <input type="checkbox" name="has_cellophane" class="w-5 h-5 rounded border-gray-300 text-theme-primary focus:ring-theme-primary">
                    <span class="text-sm font-medium">سلفون</span>
                </label>
                
                <label class="flex items-center gap-2 cursor-pointer p-2 hover:bg-slate-100 rounded-md transition-colors">
                    <input type="checkbox" name="has_cut" class="w-5 h-5 rounded border-gray-300 text-theme-primary focus:ring-theme-primary">
                    <span class="text-sm font-medium">برش</span>
                </label>

                <label class="flex items-center gap-2 cursor-pointer p-2 hover:bg-slate-100 rounded-md transition-colors">
                    <input type="checkbox" name="is_two_piece" class="w-5 h-5 rounded border-gray-300 text-theme-primary focus:ring-theme-primary">
                    <span class="text-sm font-medium">دوتکه</span>
                </label>
            </div>
        </div>
    </div>

    <!-- Footer Actions -->
    <div class="sticky bottom-4 z-10">
        <div class="bg-white/80 backdrop-blur-md border border-white/50 shadow-xl rounded-xl p-4 flex flex-wrap gap-4 items-center justify-between">
            
            <!-- File Upload -->
            <div class="flex-1 min-w-[200px]">
                <input type="file" name="order_image" class="form-file-input text-sm w-full">
                <p class="text-[10px] text-gray-400 mt-1 mr-2">تصویر نمونه (اختیاری)</p>
            </div>

            <!-- Buttons -->
            <div class="flex gap-3">
                <button type="button" onclick="history.back()" class="btn-danger bg-red-50 text-red-600 border-red-200 hover:bg-red-100">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    لغو عملیات
                </button>
                
                <button type="submit" class="btn-primary px-8 shadow-lg shadow-blue-500/30">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    ثبت سفارش تولید
                </button>
            </div>
        </div>
    </div>

    <!-- Generic "Add New" Modal (handled by Alpine) -->
    <div x-show="modalOpen" x-data="{ modalOpen: false, modalType: '', newItemValue: '' }" 
         @open-add-modal.window="modalOpen = true; modalType = $event.detail.type; newItemValue=''"
         style="display: none;"
         class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm">
         
        <div class="bg-white rounded-lg shadow-2xl p-6 w-96 animate-bounce-in" @click.outside="modalOpen = false">
            <h3 class="font-bold text-lg mb-4 text-slate-800">افزودن مورد جدید</h3>
            
            <p class="text-sm text-slate-500 mb-2" x-show="modalType == 'customer'">نام مشتری جدید را وارد کنید:</p>
            <p class="text-sm text-slate-500 mb-2" x-show="modalType == 'carton_type'">نوع کارتن جدید را وارد کنید:</p>
            <!-- Add other texts based on type -->

            <input type="text" x-model="newItemValue" class="form-input mb-4" placeholder="نام / عنوان...">

            <div class="flex justify-end gap-2">
                <button type="button" @click="modalOpen = false" class="btn-secondary btn-sm">انصراف</button>
                <button type="button" 
                        class="btn-primary btn-sm"
                        @click="
                            // In a real app, perform fetch POST here to save to DB
                            // Then add to the relevant dropdown list
                            console.log('Adding ' + newItemValue + ' to ' + modalType);
                            modalOpen = false;
                        ">
                    افزودن
                </button>
            </div>
        </div>
    </div>

</form>
{% endblock %}