@extends('layouts.app')
@section('title', 'مخزن المخرجات - Triple Re')
@section('content')
<div class="space-y-8 text-right" x-data="finishedPage()" x-init="init()">

    {{-- Stock Overview --}}
    <section class="bg-white p-8 rounded-[2.5rem] shadow-sm border border-slate-100 no-print">
        <div class="flex justify-between items-center mb-10">
            <h3 class="text-2xl font-black text-slate-800">مخزن المخرجات النهائية</h3>
            <button @click="showDisburse = true"
                    class="bg-slate-900 text-white px-8 py-3 rounded-2xl font-black text-xs shadow-xl hover:bg-black transition-all">
                إصدار إذن صرف مخرجات
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($materials->groupBy('material_type') as $type => $mats)
            @php
                $totalWeight = $mats->sum('available_weight');
                $totalCount = $mats->sum('available_count');
            @endphp
            @if($totalWeight > 0 || $totalCount > 0)
            <button @click="selectedType = '{{ $type }}'; selectedMats = {{ json_encode($mats->map(fn($m) => ['id'=>$m->id,'source_code'=>$m->source_code,'available_weight'=>$m->available_weight,'available_count'=>$m->available_count,'date'=>$m->date->format('Y-m-d'),'material_type'=>$m->material_type])->values()) }}"
                    class="bg-slate-50 p-8 rounded-[2rem] border-2 border-slate-100 hover:border-[#198947] transition-all text-right group">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">{{ $type }}</p>
                <h4 class="text-3xl font-black text-[#198947]">{{ number_format($totalWeight, 1) }} كجم</h4>
                @if($totalCount > 0)
                <p class="text-sm font-black text-blue-600 mt-1">{{ number_format($totalCount, 0) }} قطعة</p>
                @endif
                <p class="text-[10px] font-bold text-slate-500 mt-2">الأكواد المتاحة: {{ $mats->count() }}</p>
            </button>
            @endif
            @endforeach
            @if($materials->filter(fn($m) => $m->available_weight > 0 || $m->available_count > 0)->isEmpty())
            <div class="col-span-4 py-20 text-center text-slate-300 font-black uppercase text-xs">لا توجد مواد متاحة في المخزن</div>
            @endif
        </div>
    </section>

    {{-- Stock Detail Modal --}}
    <div x-show="selectedType" x-cloak class="fixed inset-0 bg-slate-900/60 z-50 flex items-center justify-center p-4 backdrop-blur-md no-print">
        <div class="bg-white p-10 rounded-[3rem] max-w-2xl w-full shadow-2xl relative animate-fade-in">
            <button @click="selectedType = null" class="absolute top-6 left-6 text-slate-300 hover:text-slate-800">
                <svg class="w-6 h-6" 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"/></svg>
            </button>
            <h4 class="text-2xl font-black text-slate-800 mb-8 uppercase tracking-tighter" x-text="'تفاصيل أرصدة: ' + selectedType"></h4>
            <div class="overflow-y-auto max-h-[50vh] space-y-3 text-right">
                <template x-for="m in selectedMats" :key="m.id">
                    <div class="p-4 bg-slate-50 border border-slate-100 rounded-2xl flex justify-between items-center group hover:bg-white transition-all">
                        <div>
                            <p class="font-black text-slate-800 text-lg" x-text="m.available_weight.toFixed(1) + ' كجم'"></p>
                            <p class="text-xs font-black text-blue-600" x-show="m.available_count > 0" x-text="m.available_count.toFixed(0) + ' قطعة'"></p>
                            <p class="text-[10px] font-bold text-slate-400" x-text="'كود المصدر: ' + m.source_code + ' | تاريخ الإنتاج: ' + m.date"></p>
                        </div>
                        <button @click="moveToIntermediate(m.id)"
                                class="bg-orange-50 text-orange-600 px-3 py-1.5 rounded-lg font-black text-[9px] hover:bg-orange-600 hover:text-white transition-all border border-orange-200">
                            تحويل لوسيط
                        </button>
                    </div>
                </template>
            </div>
        </div>
    </div>

    {{-- Disburse Modal --}}
    <div x-show="showDisburse" x-cloak class="fixed inset-0 bg-slate-900/60 z-50 flex items-center justify-center p-4 backdrop-blur-md no-print">
        <div class="bg-white p-10 rounded-[3rem] max-w-4xl w-full shadow-2xl overflow-y-auto max-h-[90vh]">
            <h3 class="text-2xl font-black mb-8">إصدار إذن صرف مخرجات</h3>
            <div class="space-y-6">
                <div class="grid grid-cols-2 gap-6">
                    <input type="text" x-model="disburseForm.recipient" class="w-full p-4 border border-slate-200 rounded-2xl font-bold" placeholder="اسم العميل المستلم..." required>
                    <input type="text" x-model="disburseForm.responsible_name" list="emp-list" class="w-full p-4 border border-slate-200 rounded-2xl font-bold" placeholder="المسؤول عن الصرف..." required>
                </div>
                <div class="grid grid-cols-2 gap-6">
                    <input type="text" x-model="disburseForm.driver_name" class="w-full p-4 border border-slate-200 rounded-2xl font-bold" placeholder="اسم السائق...">
                    <input type="text" x-model="disburseForm.vehicle_number" class="w-full p-4 border border-slate-200 rounded-2xl font-bold" placeholder="رقم السيارة...">
                </div>
                <input type="text" x-model="disburseForm.tax_invoice_number" class="w-full p-4 border border-slate-200 rounded-2xl font-bold" placeholder="رقم الفاتورة الضريبية (اختياري)...">

                <div class="bg-slate-50 p-6 rounded-[2rem] border-2 border-dashed border-slate-200">
                    <p class="font-black text-xs text-slate-400 uppercase mb-4 tracking-widest">اختر الخامات المراد صرفها:</p>
                    <div class="flex flex-wrap gap-2 mb-6">
                        @foreach($materials->groupBy('material_type') as $type => $mats)
                        @if($mats->sum('available_weight') > 0 || $mats->sum('available_count') > 0)
                        <button type="button" @click="startAllocation('{{ $type }}', {{ json_encode($mats->map(fn($m)=>['id'=>$m->id,'source_code'=>$m->source_code,'available_weight'=>$m->available_weight,'available_count'=>$m->available_count,'material_type'=>$m->material_type])->values()) }})"
                                class="px-4 py-2 bg-white border border-slate-200 rounded-xl font-black text-[10px] hover:border-[#198947] shadow-sm transition-all">
                            + {{ $type }}
                        </button>
                        @endif
                        @endforeach
                    </div>
                    <div class="space-y-3">
                        <template x-for="(it, idx) in disburseForm.items" :key="idx">
                            <div class="bg-white p-3 rounded-xl border border-slate-100 flex justify-between items-center text-xs font-bold">
                                <span>
                                    <span x-text="it.material_type"></span> (كود: <span x-text="it.source_code"></span>) -
                                    <span class="text-[#198947]" x-text="it.weight + ' كجم'"></span>
                                    <span class="text-blue-600" x-show="it.count > 0" x-text="' / ' + it.count + ' قطعة'"></span>
                                </span>
                                <button type="button" @click="disburseForm.items.splice(idx,1)" class="text-red-400 text-lg font-black">&times;</button>
                            </div>
                        </template>
                    </div>
                </div>

                <div class="flex gap-4">
                    <button @click="submitDisbursement" :disabled="submitting"
                            class="flex-1 bg-[#052c16] text-white py-4 rounded-2xl font-black shadow-xl disabled:opacity-50">
                        <span x-show="!submitting">تأكيد عملية الصرف</span>
                        <span x-show="submitting">جاري الحفظ...</span>
                    </button>
                    <button @click="showDisburse = false" class="flex-1 bg-slate-100 text-slate-400 py-4 rounded-2xl font-black">إلغاء</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Allocation Modal --}}
    <div x-show="allocation.open" x-cloak class="fixed inset-0 bg-slate-900/80 z-[60] flex items-center justify-center p-4">
        <div class="bg-white p-10 rounded-[3rem] max-w-2xl w-full shadow-2xl">
            <h4 class="text-2xl font-black mb-6" x-text="'صرف خام: ' + allocation.type"></h4>
            <div class="grid grid-cols-2 gap-4 mb-6 text-right">
                <div>
                    <label class="text-xs font-black text-slate-400 block mb-1">الوزن الكلي المطلوب</label>
                    <input type="number" step="0.1" x-model="allocation.targetWeight" class="w-full p-3 border border-slate-200 rounded-xl font-black">
                </div>
                <div>
                    <label class="text-xs font-black text-slate-400 block mb-1">العدد الكلي (اختياري)</label>
                    <input type="number" x-model="allocation.targetCount" class="w-full p-3 border border-slate-200 rounded-xl font-black">
                </div>
            </div>
            <div class="bg-slate-50 p-6 rounded-3xl border border-slate-100 space-y-3 max-h-64 overflow-y-auto">
                <template x-for="lot in allocation.lots" :key="lot.id">
                    <div class="flex justify-between items-center bg-white p-3 rounded-xl border border-slate-100">
                        <div class="text-right">
                            <p class="font-black text-xs" x-text="lot.source_code"></p>
                            <p class="text-[10px] text-slate-400 font-bold" x-text="'المتاح: ' + lot.available_weight.toFixed(1) + ' كجم' + (lot.available_count > 0 ? ' / ' + lot.available_count.toFixed(0) + ' قطعة' : '')"></p>
                        </div>
                        <div class="flex gap-2">
                            <input type="number" step="0.1" placeholder="الوزن" class="w-24 p-2 border border-slate-200 rounded-lg text-center font-bold text-xs"
                                   @input="setLotAllocation(lot, 'weight', parseFloat($event.target.value))">
                            <input type="number" placeholder="العدد" class="w-24 p-2 border border-slate-200 rounded-lg text-center font-bold text-xs"
                                   @input="setLotAllocation(lot, 'count', parseFloat($event.target.value))">
                        </div>
                    </div>
                </template>
            </div>
            <div class="mt-6 flex gap-4">
                <button @click="confirmAllocation" class="flex-1 bg-[#198947] text-white py-4 rounded-2xl font-black shadow-xl">تأكيد التوزيع</button>
                <button @click="allocation.open = false" class="flex-1 bg-slate-100 text-slate-500 py-4 rounded-2xl font-black">إلغاء</button>
            </div>
        </div>
    </div>

    {{-- Disbursements History --}}
    <section class="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
        <div class="p-8 border-b bg-slate-50/50">
            <h4 class="text-xl font-black text-slate-800">سجل أذونات الصرف</h4>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-right text-xs">
                <thead class="bg-slate-100 text-slate-500 font-black uppercase tracking-widest">
                    <tr>
                        <th class="p-4">التاريخ</th>
                        <th class="p-4">العميل المستلم</th>
                        <th class="p-4">السائق / السيارة</th>
                        <th class="p-4">المواد</th>
                        <th class="p-4 text-center">إجمالي الوزن</th>
                        <th class="p-4 text-center">إذن الصرف</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($disbursements as $d)
                    <tr class="border-b hover:bg-slate-50 transition-colors">
                        <td class="p-4 font-bold text-slate-800">{{ $d->date->format('Y-m-d') }}</td>
                        <td class="p-4 font-black text-slate-800">{{ $d->recipient }}</td>
                        <td class="p-4 text-slate-500 font-bold">{{ $d->driver_name ?: '---' }} <br><span class="text-[9px]">{{ $d->vehicle_number ?: '' }}</span></td>
                        <td class="p-4 text-slate-600">{{ $d->items->map(fn($i) => $i->material_type)->unique()->join(', ') }}</td>
                        <td class="p-4 font-black text-center text-[#198947]">{{ number_format($d->items->sum('weight'), 1) }} كجم</td>
                        <td class="p-4 text-center">
                            <a href="{{ route('finished.receipt', $d) }}" target="_blank"
                               class="bg-slate-800 text-white px-3 py-1.5 rounded-lg font-black text-[9px] hover:bg-slate-900 transition-all">طباعة</a>
                        </td>
                    </tr>
                    @endforeach
                    @if($disbursements->isEmpty())
                    <tr><td colspan="6" class="py-20 text-center text-slate-300 font-black text-xs">لا توجد أذونات صرف</td></tr>
                    @endif
                </tbody>
            </table>
        </div>
    </section>

    <datalist id="emp-list">
        @foreach($employeeSuggestions as $e)<option value="{{ $e }}">@endforeach
    </datalist>
</div>
@endsection

@push('scripts')
<script>
function finishedPage() {
    return {
        showDisburse: false,
        selectedType: null,
        selectedMats: [],
        submitting: false,
        disburseForm: { recipient: '', responsible_name: '', driver_name: '', vehicle_number: '', tax_invoice_number: '', notes: '', items: [] },
        allocation: { open: false, type: '', lots: [], targetWeight: 0, targetCount: 0, allocations: {} },

        init() {},

        startAllocation(type, lots) {
            this.allocation = { open: true, type, lots, targetWeight: 0, targetCount: 0, allocations: {} };
        },

        setLotAllocation(lot, field, value) {
            const numericValue = parseFloat(value) || 0;
            const current = this.allocation.allocations[lot.id] || { ...lot, weight: 0, count: 0 };

            if (field === 'weight' && numericValue > lot.available_weight) {
                alert('تجاوزت الوزن المتاح لهذا الكود');
                return;
            }
            if (field === 'count' && numericValue > lot.available_count) {
                alert('تجاوزت العدد المتاح لهذا الكود');
                return;
            }

            current[field] = numericValue;

            if (current.weight > 0 || current.count > 0) {
                this.allocation.allocations[lot.id] = current;
            } else {
                delete this.allocation.allocations[lot.id];
            }
        },

        confirmAllocation() {
            const allocs = Object.values(this.allocation.allocations);
            const totalW = allocs.reduce((s, a) => s + a.weight, 0);
            const totalC = allocs.reduce((s, a) => s + a.count, 0);

            if (allocs.length === 0 || (totalW <= 0 && totalC <= 0)) {
                alert('أدخل وزن أو عدد للصرف أولاً');
                return;
            }

            if (this.allocation.targetWeight > 0 && Math.abs(totalW - this.allocation.targetWeight) > 0.01) {
                alert('تنبيه: مجموع الأوزان الموزعة لا يساوي الوزن المطلوب');
                return;
            }
            if (this.allocation.targetCount > 0 && Math.abs(totalC - this.allocation.targetCount) > 0.01) {
                alert('تنبيه: مجموع الأعداد الموزعة لا يساوي العدد المطلوب');
                return;
            }

            allocs.forEach(a => this.disburseForm.items.push({
                material_id: a.id,
                material_type: a.material_type,
                source_code: a.source_code,
                weight: a.weight,
                count: a.count,
            }));
            this.allocation.open = false;
        },

        async moveToIntermediate(id) {
            if (!confirm('هل تريد تحويل هذا الكود إلى المخزن الوسيط لإعادة المعالجة؟')) return;
            const resp = await apiCall(`/finished/${id}/move-to-intermediate`, 'POST');
            if (resp.success) location.reload();
            else alert('حدث خطأ');
        },

        async submitDisbursement() {
            if (!this.disburseForm.recipient || !this.disburseForm.responsible_name || this.disburseForm.items.length === 0) {
                alert('يرجى ملء جميع الحقول المطلوبة وإضافة مواد للصرف');
                return;
            }
            this.submitting = true;
            try {
                const resp = await apiCall('{{ route("finished.disburse") }}', 'POST', this.disburseForm);
                if (resp.success) {
                    window.open(`/finished/receipt/${resp.order.id}`, '_blank');
                    location.reload();
                } else {
                    alert('حدث خطأ');
                }
            } catch(e) { alert('خطأ في الاتصال'); }
            this.submitting = false;
        }
    }
}
</script>
@endpush