@extends('admin.layouts.master')
@section('title', 'حاسبة التسعير')

@section('page-header')
    <div class="row align-items-center">
        <div class="col">
            <div class="page-pretitle">الأدوات</div>
            <h2 class="page-title"><i class="ti ti-calculator ms-1"></i> حاسبة التسعير الذكية</h2>
        </div>
    </div>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header"><h3 class="card-title">إدخال بيانات الطلب</h3></div>
            <div class="card-body">
                <ul class="nav nav-tabs mb-3" id="typeTab" role="tablist">
                    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#offset" type="button"><i class="ti ti-printer ms-1"></i> أوفست</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#digital" type="button"><i class="ti ti-device-laptop ms-1"></i> ديجيتال</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#flex" type="button"><i class="ti ti-photo ms-1"></i> فلكس</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#packaging" type="button"><i class="ti ti-package ms-1"></i> تغليف</button></li>
                </ul>

                <div class="tab-content">
                    {{-- أوفست --}}
                    <div class="tab-pane fade show active" id="offset">
                        <form id="formOffset" class="row g-2">
                            <input type="hidden" name="printing_type" value="offset">
                            <div class="col-md-4"><label class="form-label">الكمية</label><input type="number" name="quantity" class="form-control" value="1000"></div>
                            <div class="col-md-4"><label class="form-label">العرض النهائي (سم)</label><input type="number" step="0.1" name="final_width" class="form-control" value="14.8"></div>
                            <div class="col-md-4"><label class="form-label">الطول النهائي (سم)</label><input type="number" step="0.1" name="final_height" class="form-control" value="21"></div>

                            <div class="col-md-6"><label class="form-label">مقاس الفرخ</label>
                                <select name="sheet_size" class="form-select">
                                    <option value="70x100">70x100</option><option value="65x90">65x90</option>
                                    <option value="60x90">60x90</option><option value="50x70">50x70</option>
                                </select></div>
                            <div class="col-md-6"><label class="form-label">سعر الفرخ (ج)</label><input type="number" step="0.01" name="paper_price" class="form-control" value="5"></div>

                            <div class="col-md-6"><label class="form-label">ألوان الوجه</label>
                                <select name="colors_front" class="form-select">
                                    <option value="1">1</option><option value="2">2</option>
                                    <option value="4" selected>4 (CMYK)</option>
                                </select></div>
                            <div class="col-md-6"><label class="form-label">ألوان الظهر</label>
                                <select name="colors_back" class="form-select">
                                    <option value="0" selected>بدون ظهر</option>
                                    <option value="1">1</option><option value="2">2</option><option value="4">4</option>
                                </select></div>

                            <div class="col-md-4"><label class="form-label">سعر الزنك</label><input type="number" step="0.01" name="plate_price" class="form-control" value="80"></div>
                            <div class="col-md-4"><label class="form-label">تكلفة الحبر/لون</label><input type="number" step="0.01" name="ink_cost_per_color" class="form-control" value="30"></div>
                            <div class="col-md-4"><label class="form-label">تكلفة الساعة</label><input type="number" step="0.01" name="machine_hourly_cost" class="form-control" value="200"></div>

                            <div class="col-md-4"><label class="form-label">إعداد (ساعة)</label><input type="number" step="0.1" name="setup_hours" class="form-control" value="1"></div>
                            <div class="col-md-4"><label class="form-label">إنتاج (فرخ/ساعة)</label><input type="number" name="production_rate" class="form-control" value="5000"></div>
                            <div class="col-md-4"><label class="form-label">الفاقد %</label><input type="number" step="0.1" name="waste_percent" class="form-control" value="5"></div>

                            <div class="col-md-12"><label class="form-label">هامش الربح %</label><input type="number" step="0.1" name="profit_percent" class="form-control" value="25"></div>

                            <div class="col-12 mt-3">
                                <button type="button" class="btn btn-primary w-100" onclick="calculate('offset')">
                                    <i class="ti ti-calculator ms-1"></i> احسب الآن
                                </button>
                            </div>
                        </form>
                    </div>

                    {{-- ديجيتال --}}
                    <div class="tab-pane fade" id="digital">
                        <form id="formDigital" class="row g-2">
                            <input type="hidden" name="printing_type" value="digital">
                            <div class="col-md-6"><label class="form-label">الكمية</label><input type="number" name="quantity" class="form-control" value="100"></div>
                            <div class="col-md-6"><label class="form-label">سعر الكليك</label><input type="number" step="0.01" name="click_cost" class="form-control" value="1.5"></div>
                            <div class="col-md-6"><label class="form-label">سعر الورقة</label><input type="number" step="0.01" name="paper_cost_per_sheet" class="form-control" value="1"></div>
                            <div class="col-md-3"><label class="form-label">الألوان</label>
                                <select name="colors" class="form-select"><option value="1">1</option><option value="4" selected>4</option></select></div>
                            <div class="col-md-3"><label class="form-label">وجه/وجهين</label>
                                <select name="sides" class="form-select"><option value="1" selected>وجه</option><option value="2">وجهين</option></select></div>
                            <div class="col-md-12"><label class="form-label">هامش ربح %</label><input type="number" step="0.1" name="profit_percent" class="form-control" value="30"></div>
                            <div class="col-12 mt-3"><button type="button" class="btn btn-primary w-100" onclick="calculate('digital')"><i class="ti ti-calculator ms-1"></i> احسب</button></div>
                        </form>
                    </div>

                    {{-- فلكس --}}
                    <div class="tab-pane fade" id="flex">
                        <form id="formFlex" class="row g-2">
                            <input type="hidden" name="printing_type" value="flex">
                            <div class="col-md-4"><label class="form-label">العرض (متر)</label><input type="number" step="0.01" name="width" class="form-control" value="2"></div>
                            <div class="col-md-4"><label class="form-label">الطول (متر)</label><input type="number" step="0.01" name="height" class="form-control" value="1"></div>
                            <div class="col-md-4"><label class="form-label">العدد</label><input type="number" name="quantity" class="form-control" value="1"></div>
                            <div class="col-md-6"><label class="form-label">سعر المتر² (ج)</label><input type="number" step="0.01" name="price_per_sqm" class="form-control" value="80"></div>
                            <div class="col-md-6"><label class="form-label">رسوم إعداد</label><input type="number" step="0.01" name="machine_setup" class="form-control" value="50"></div>
                            <div class="col-md-12"><label class="form-label">هامش ربح %</label><input type="number" step="0.1" name="profit_percent" class="form-control" value="35"></div>
                            <div class="col-12 mt-3"><button type="button" class="btn btn-primary w-100" onclick="calculate('flex')"><i class="ti ti-calculator ms-1"></i> احسب</button></div>
                        </form>
                    </div>

                    {{-- تغليف --}}
                    <div class="tab-pane fade" id="packaging">
                        <form id="formPack" class="row g-2">
                            <input type="hidden" name="printing_type" value="packaging">
                            <div class="col-md-4"><label class="form-label">الكمية</label><input type="number" name="quantity" class="form-control" value="500"></div>
                            <div class="col-md-2"><label class="form-label">الطول (سم)</label><input type="number" step="0.1" name="length" class="form-control" value="20"></div>
                            <div class="col-md-2"><label class="form-label">العرض (سم)</label><input type="number" step="0.1" name="width" class="form-control" value="15"></div>
                            <div class="col-md-2"><label class="form-label">الارتفاع</label><input type="number" step="0.1" name="height" class="form-control" value="10"></div>
                            <div class="col-md-2"><label class="form-label">سعر المتر²</label><input type="number" step="0.01" name="material_price_sqm" class="form-control" value="30"></div>
                            <div class="col-md-4"><label class="form-label">تكلفة قالب الدق</label><input type="number" step="0.01" name="die_cut_cost" class="form-control" value="300"></div>
                            <div class="col-md-4"><label class="form-label">تكلفة الغراء/علبة</label><input type="number" step="0.01" name="gluing_per_box" class="form-control" value="0.5"></div>
                            <div class="col-md-4"><label class="form-label">تكلفة الطباعة/علبة</label><input type="number" step="0.01" name="printing_cost_per_box" class="form-control" value="1.5"></div>
                            <div class="col-md-12"><label class="form-label">هامش ربح %</label><input type="number" step="0.1" name="profit_percent" class="form-control" value="30"></div>
                            <div class="col-12 mt-3"><button type="button" class="btn btn-primary w-100" onclick="calculate('packaging')"><i class="ti ti-calculator ms-1"></i> احسب</button></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-primary text-white"><h3 class="card-title">نتيجة التسعير</h3></div>
            <div class="card-body" id="resultBox">
                <div class="empty py-5">
                    <div class="empty-img"><i class="ti ti-calculator empty-icon text-muted"></i></div>
                    <p class="empty-title">اضغط "احسب" لعرض النتيجة</p>
                    <p class="empty-subtitle text-muted">سيتم عرض تكلفة الإنتاج والسعر النهائي تفصيلياً هنا</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function calculate(type) {
    const formId = {offset:'#formOffset', digital:'#formDigital', flex:'#formFlex', packaging:'#formPack'}[type];
    const data = $(formId).serializeArray().reduce((o, x) => (o[x.name] = x.value, o), {});

    $('#resultBox').html('<div class="text-center py-5"><div class="spinner-border text-primary"></div></div>');

    $.post('{{ route('admin.pricing.calculate') }}', data, function (response) {
        if (response.success) renderResult(response.result, type);
        else toastr.error(response.message);
    }).fail(xhr => toastr.error(xhr.responseJSON?.message || 'حدث خطأ'));
}

function renderResult(r, type) {
    const fmt = n => new Intl.NumberFormat('ar-EG', {minimumFractionDigits: 2}).format(n);
    const b = r.breakdown;

    let breakdownRows = '';
    const labels = {paper_cost:'الورق', plates_cost:'الزنكات', ink_cost:'الحبر', machine_cost:'الماكينة', finishing_cost:'التشطيب', material_cost:'الخامة', setup_cost:'الإعداد', click_cost:'الكليكات', die_cut_cost:'قالب القطع', gluing_cost:'الغراء', printing_cost:'الطباعة'};
    Object.keys(b).forEach(k => {
        if (typeof b[k] === 'number' && b[k] > 0) {
            breakdownRows += `<tr><td>${labels[k] || k}</td><td class="text-end">${fmt(b[k])} ج.م</td></tr>`;
        }
    });

    let impInfo = '';
    if (r.imposition) {
        impInfo = `<div class="alert alert-info mb-3">
            <strong>التخسير:</strong> ${r.imposition.units_per_sheet} نسخة في الفرخ (${r.imposition.layout} - ${r.imposition.orientation})
            <br><strong>إجمالي الفرخات:</strong> ${r.total_sheets} (منها ${r.waste_sheets} فاقد) | <strong>الزنكات:</strong> ${r.plates_count}
        </div>`;
    }
    if (r.area_sqm) {
        impInfo = `<div class="alert alert-info mb-3"><strong>المساحة الإجمالية:</strong> ${r.area_sqm} متر مربع</div>`;
    }
    if (r.flat_area_sqm) {
        impInfo = `<div class="alert alert-info mb-3"><strong>مساحة الخامة المسطحة:</strong> ${r.flat_area_sqm} متر² / علبة</div>`;
    }

    $('#resultBox').html(`
        ${impInfo}
        <div class="row text-center mb-4">
            <div class="col-4">
                <div class="text-muted small">إجمالي التكلفة</div>
                <div class="h2 text-danger">${fmt(r.total_cost)}</div>
            </div>
            <div class="col-4">
                <div class="text-muted small">هامش الربح</div>
                <div class="h2 text-warning">${fmt(r.profit_amount)}</div>
            </div>
            <div class="col-4">
                <div class="text-muted small">السعر الإجمالي</div>
                <div class="h2 text-success">${fmt(r.total_price)}</div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-borderless mb-3">
                <thead class="bg-light"><tr><th>البند</th><th class="text-end">المبلغ</th></tr></thead>
                <tbody>${breakdownRows}</tbody>
                <tfoot class="border-top">
                    <tr class="fw-bold"><td>المجموع</td><td class="text-end">${fmt(r.total_cost)} ج.م</td></tr>
                </tfoot>
            </table>
        </div>

        <div class="alert alert-success mb-0">
            <h3 class="alert-title">السعر النهائي للوحدة: ${fmt(r.unit_price)} ج.م</h3>
            <div class="text-muted">(الإجمالي ${fmt(r.total_price)} ج.م - هامش ربح ${r.profit_percent}%)</div>
        </div>
    `);
}
</script>
@endpush