@extends('layouts.master')
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Internal Data table css -->


<!-- Internal Spectrum-colorpicker css -->
<link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">

<!-- Internal Select2 css -->
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    /* تنسيق حاوية الفرع */
    .branch-select-container {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 5px 15px;
        border-radius: 50px; /* خليه بيضاوي */
    }

    /* تنسيق السيلكت نفسه */
    #branch_id {
        border: none !important;
        font-size: 1.2rem !important;
        font-weight: bold !important;
        color: #333 !important;
        cursor: pointer;
        background: transparent;
        appearance: none; /* إخفاء سهم المتصفح الافتراضي */
        -webkit-appearance: none;
        padding-right: 25px !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%3C333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right center;
    }

    #branch_id:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* تحسين شكل القائمة المنسدلة نفسها (Options) */
    #branch_id option {
        font-weight: normal;
        padding: 10px;
        background: #fff;
    }
</style>
@section('title')
{{ __('home.manufacturin_screen') }}
@stop
@endsection

@section('content')

<div class="container-fluid bg-white p-3 border rounded shadow-sm">

    {{-- اول سكشن الفرع والتاريخ --}}
    <div class="container-fluid bg-white p-3 border rounded shadow-sm">

    <div class="row mb-3 pb-3 border-bottom align-items-center">
            <div class="col-md-6">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center shadow-sm"
                    style="width: 50px; height: 50px; min-width: 50px; font-size: 1.2rem;">
                    <i class="fas fa-store"></i>
                </div>

                <div class="mr-3 w-100">
                    <label class="text-muted small d-block mb-0" style="letter-spacing: 0.5px;">
                        {{ __('home.operation_branch') }}
                    </label>
                    <select id="branch_id" class="form-control form-control-sm">
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ auth()->user()->branchs_id == $branch->id ? 'selected' : '' }}>
                                {{ $branch->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>



        <div class="col-md-6 text-right">
            <div class="d-inline-block text-right">
                <label class="text-muted small d-block mb-0"> {{ __('home.production_order_date') }}</label>
                <span class="font-weight-bold text-dark" style="font-size: 1.1rem;">
                    <i class="far fa-calendar-alt text-primary mr-1"></i> {{ date('Y-m-d') }}
                </span>
            </div>
        </div>
    </div>

    <div class="row border-bottom pb-3 mb-3 bg-light p-3 rounded align-items-end no-print shadow-sm">
        </div>
    </div>
    {{-- اول سكشن الفرع والتاريخ --}}



    {{-- تاني سكشن اختيار الموديل وعدد الاثواب  --}}
    <div class="row border-bottom pb-3 mb-3 bg-light p-3 rounded align-items-end no-print shadow-sm">
     <div class="col-md-5">
        <label class="font-weight-bold text-primary mb-2">
            <i class="fas fa-tshirt"></i> {{ __('home.garment_type_model') }}
        </label>

        <select id="template_id" class="form-control form-control-lg border-primary select2" onchange="loadTemplate()">
            <option value="">{{ __('home.select_model_to_load') }}</option>

            @foreach($templates as $template)
                <option value="{{ $template->id }}">{{ $template->template_name }}</option>
            @endforeach
        </select>
    </div>

        <div class="col-md-3">
            <label class="font-weight-bold text-success mb-2">   {{ __('home.required_garments') }}</label>
            <div class="input-group">
                <input type="number" id="production_qty" class="form-control form-control-lg border-success text-center font-weight-bold"
                    value="1" min="1" oninput="calc()">
                <div class="input-group-append">
                    <span class="input-group-text bg-success text-white">ثوب</span>
                </div>
            </div>
        </div>
        <div class="col-md-4 text-left">
            <button class="btn btn-outline-secondary btn-lg" onclick="location.reload()">
            <i class="fas fa-sync-alt"></i> {{ __('home.reload_page') }}
            </button>
         </div>
        </div>
    {{-- تاني سكشن اختيار الموديل وعدد الاثواب  --}}




    {{-- تالت سكشن سحب الفاتورة القماش --}}
    <div class="row mb-3 bg-light p-3 rounded border shadow-sm no-print">
        <div class="col-md-8">
            <label class="font-weight-bold text-info mb-2">
                <i class="fas fa-file-invoice"></i> {{ __('home.withdraw_materials_from_sales') }}
                </label>
            <select id="invoice_ids" class="form-control" multiple="multiple">
                @foreach($pendingInvoices as $inv)
                    <option value="{{ $inv->id }}">
                    {{ __('home.invoice_number') }}: {{ $inv->invoice_number ?? $inv->id }} - {{ $inv->customer->name ?? __('home.unknown_customer') }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4 align-self-end">
            <button type="button" class="btn btn-info btn-block btn-lg" onclick="fetchInvoicesFabric()">
                <i class="fas fa-download"></i> {{ __('home.withdraw_fabric_meters') }}
            </button>
        </div>
    </div>
    {{-- تالت سكشن سحب الفاتورة القماش --}}




    {{-- رابع سكشن  المكونات المستهلكة --}}
<div class="row">
    <div class="col-md-12">
        <div class="d-flex justify-content-between mb-2">
            <h6 class="text-primary font-weight-bold">
                <i class="fas fa-microchip"></i> {{ __('home.consumed_components') }}
            </h6>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-hover table-bordered text-center shadow-sm">
                <thead class="bg-primary text-white">
                    <tr>
                        <th>{{ __('home.code') }}</th>
                        <th class="text-right">{{ __('home.component_name') }}</th>
                        <th class="bg-warning text-dark">{{ __('home.required_quantity_total') }}</th>
                        <th>{{ __('home.unit') }}</th>
                        <th>{{ __('home.price') }}</th>
                        <th>{{ __('home.total') }}</th>
                        <th width="50" class="no-print">{{ __('home.delete') }}</th>
                    </tr>
                </thead>
                <tbody id="assembly_tbody">
                </tbody>
            </table>
        </div>
    </div>
</div>
    {{-- رابع سكشن  المكونات المستهلكة --}}



    {{-- حامس سكشن الإجمالي تكلفة المواد --}}
<div class="row mt-4 p-3 rounded shadow-sm" style="background-color: #f8f9fa; border-top: 3px solid #007bff;">
    <div class="col-md-4 text-center border-left">
        <h1 class="display-4 font-weight-bold text-primary" id="main_grand_total">0.00</h1>
        <small class="text-muted font-weight-bold text-uppercase">{{ __('home.total_material_cost') }}</small>
    </div>
    <div class="col-md-8 pt-3">
        <div class="row text-center">
            <div class="col-6 border-left">
                <h4 id="unit_cost" class="text-dark font-weight-bold">0.00</h4>
                <span class="small text-muted">{{ __('home.material_cost_per_garment') }}</span>
            </div>
            <div class="col-6">
                <h4 id="total_cost_bottom" class="text-dark font-weight-bold">0.00</h4>
                <span class="small text-muted">{{ __('home.total_order_cost') }}</span>
            </div>
        </div>
        <div class="mt-3">
            <textarea id="notes" class="form-control form-control-sm" rows="2" placeholder="{{ __('home.production_notes') }}"></textarea>
        </div>
    </div>
</div>
    {{-- حامس سكشن الإجمالي تكلفة المواد --}}



    {{-- سادس سكشن الحفظ والطباعة --}}
    <div class="row mt-5 mb-4 pb-5 no-print">
        <div class="col-md-12 text-center">
            <button class="btn btn-lg btn-success px-5 shadow-lg font-weight-bold mr-2" onclick="saveProduction()">
            <i class="fas fa-save"></i> {{ __('home.save_production_and_deduct_stock') }}
            </button>
        </div>
    </div>
    </div>
    {{-- سادس سكشن الحفظ والطباعة --}}




@endsection



@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function fetchInvoicesFabric() {
       let invoiceIds = $('#invoice_ids').val();

    if (!invoiceIds || invoiceIds.length === 0) {
        return Swal.fire(
            "{{ __('home.alert') }}",
            "{{ __('home.select_invoice_first') }}",
            'warning'
        );
    }

    $.ajax({
        url: "{{ url('/manufacturing/get-fabric-details') }}",
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', invoice_ids: invoiceIds },
        success: function(response) {
            if (response.success) {

                // 1. رسم القماش (الكود القديم كما هو)
                response.fabrics.forEach(fabric => {
                    if ($(`#assembly_tbody tr[data-id="${fabric.product_id}"]`).length > 0) return;


                    let html = `
                    <tr data-id="${fabric.product_id}">
                        <td>${fabric.code}</td>
                        <td class="text-right font-weight-bold">
                            ${fabric.name} <span class="badge badge-info small">قماش فاتورة</span>
                        </td>
                        <td class="bg-warning-light">
                            <input type="number" step="0.01"
                                class="form-control form-control-sm text-center total-item-qty font-weight-bold"
                                value="${fabric.total_meters}" oninput="calc()">
                        </td>
                        <td class="font-weight-bold text-secondary">متر</td>
                        <td>
                            <input type="number" step="0.01"
                                class="form-control form-control-sm text-center item-price-input"
                                value="${fabric.price}" oninput="calc()">
                        </td>
                        <td class="row-total font-weight-bold text-primary">0.00</td>
                        <td class="no-print">
                            <button class="btn btn-sm btn-outline-danger" onclick="$(this).closest('tr').remove(); calc();">×</button>
                        </td>
                    </tr>`;
                    $('#assembly_tbody').append(html);
                });

                // 2. رسم الطقطق والسحاب كأصناف مستقلة (الإضافة الجديدة)
                if (response.extra_items) {
                    let extras = response.extra_items;

                    // إضافة الطقطق
                    if (extras.buttons && extras.buttons.qty > 0) {
                        renderExtraRow(extras.buttons);
                    }

                    // إضافة السحاب
                    if (extras.zippers && extras.zippers.qty > 0) {
                        renderExtraRow(extras.zippers);
                    }
                }

                calc();
                Swal.fire(
                    "{{ __('home.success') }}",
                    "{{ __('home.materials_withdrawn_success') }}",
                    'success'
                );
            }
        }
    });
}

// دالة مساعدة لإضافة صفوف الطقطق والسحاب لمنع التكرار
function renderExtraRow(item) {
    if ($(`#assembly_tbody tr[data-id="${item.id}"]`).length > 0) return;

    let rowClass = (parseFloat(item.stock) <= 0) ? 'table-danger' : '';
    let html = `
    <tr data-id="${item.id}" class="${rowClass}">
        <td>${item.id}</td>
        <td class="text-right font-weight-bold">
            ${item.name} <span class="badge badge-secondary small">إضافي للثوب</span>
            <br><small class="text-muted">المتاح: ${item.stock}</small>
        </td>
        <td class="bg-warning-light">
            <input type="number" class="form-control form-control-sm text-center total-item-qty font-weight-bold"
                value="${item.qty}" oninput="calc()">
        </td>
        <td class="font-weight-bold text-secondary">حبة</td>
        <td>
            <input type="number" step="0.01" class="form-control form-control-sm text-center item-price-input"
                value="${item.price}" oninput="calc()">
        </td>
        <td class="row-total font-weight-bold text-primary">0.00</td>
        <td class="no-print">
            <button class="btn btn-sm btn-outline-danger" onclick="$(this).closest('tr').remove(); calc();">×</button>
        </td>
    </tr>`;
    $('#assembly_tbody').append(html);
}

function addRowToTable(item) {
    // كود إضافة سطر جديد للـ tbody (assembly_tbody)
    let html = `
    <tr data-id="${item.id}">
        <td>${item.code}</td>
        <td class="text-right">${item.name}</td>
        <td><input type="number" class="form-control qty-input text-center font-weight-bold" value="${item.qty}" oninput="calc()"></td>
        <td>${item.unit}</td>
        <td><input type="number" class="form-control price-input text-center" value="${item.price}" oninput="calc()"></td>
        <td class="total-item-cost">${item.total.toFixed(2)}</td>
        <td><button class="btn btn-danger btn-sm" onclick="$(this).closest('tr').remove(); calc();"><i class="fas fa-trash"></i></button></td>
    </tr>`;
    $('#assembly_tbody').append(html);
}
</script>


<script>
    /**
     * إعدادات عامة (Global Settings)
     */
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    /**
     * 1. إدارة المودالات والبحث
     */
    window.openSearchForItems = function(context = 'link_items') {
        window.targetContext = context;
        $('.modal-backdrop').remove();

        $('#findProductModal').appendTo('body').modal('show');

        setTimeout(() => {
            $('#findProductModal').css({ 'z-index': '2050', 'background': 'rgba(0,0,0,0.7)' });
            $('#modalAddTemplateItems').css('pointer-events', 'none');
        }, 100);
    };

    $(document).on('hidden.bs.modal', '#findProductModal', function () {
        $('#modalAddTemplateItems').css('pointer-events', 'auto');
        if ($('#modalAddTemplateItems').hasClass('show')) $('body').addClass('modal-open');
    });

    /**
     * 2. إدارة القوالب (Templates)
     */
    function saveOnlyTemplateName() {
        let name = $('#just_template_name').val().trim();
        if (!name) return Swal.fire('تنبيه', 'يرجى كتابة اسم الموديل', 'warning');

        $.post('/manufacturing/store-new-template', { name: name, items: [] }, function(res) {
            if (res.success) Swal.fire('ممتاز!', 'تم حفظ الموديل بنجاح', 'success').then(() => location.reload());
        });
    }

    function saveLinkedItems() {
        let templateId = $('#select_template_to_edit').val();
        let items = [];

        $('#items_to_link_tbody tr').each(function() {
            items.push({
                product_id: $(this).data('id'),
                qty: $(this).find('.item-qty').val()
            });
        });

        if (!templateId) return Swal.fire('تنبيه', 'اختر الموديل أولاً', 'warning');
        if (items.length === 0) return Swal.fire('تنبيه', 'أضف خامة واحدة على الأقل', 'warning');

        $.post('/manufacturing/update-template-items', { template_id: templateId, items: items }, function(res) {
            if (res.success) Swal.fire('تم الربط', 'تم تحديث مكونات الموديل بنجاح', 'success').then(() => location.reload());
        });
    }

    /**
     * 3. منطق الإنتاج والحسابات (Production Logic)
     */
function loadTemplate() {
    let tid = $('#template_id').val();
    let productionQty = parseFloat($('#production_qty').val()) || 1;

    const inchToMeter = 1 / 39.37;

    if(!tid) {
        $('#assembly_tbody').empty();
        calc();
        return;
    }

    $.get(`/manufacturing/get-template-items/${tid}`, function(res) {
        if(res.success) {
            let html = res.items.map(item => {
                let name = item.product_name;
                let price = parseFloat(item.sale_price) || 0;
                let baseQty = parseFloat(item.quantity) || 0;
                let stock = parseFloat(item.stock) || 0;

                if (name.includes('حشوة دبل')) {
                    baseQty = 4.5 * inchToMeter;
                } else if (name.includes('حشوة جيب زور')) {
                    baseQty = 40 * inchToMeter;
                } else if (name.includes('حشوة سنجل')) {
                    baseQty = 4.5 * inchToMeter;
                } else if (name.includes('غراء')) {
                    baseQty = 4.5 * inchToMeter;
                } else if (name.includes('بون')) {
                    baseQty = 2;
                }

                let totalRequiredQty = baseQty * productionQty;
                let formattedQty = (totalRequiredQty % 1 === 0) ? totalRequiredQty : totalRequiredQty.toFixed(4);

                let unitLabel = item.unit_name || 'قطعة';
                if (name.includes('حشوة') || name.includes('غراء')) {
                    unitLabel = 'متر';
                } else if (name.includes('بون')) {
                    unitLabel = 'حبة';
                }

                // --- التعديل هنا: استخدام Swal بدلاً من toastr لتجنب الخطأ ---
                let rowStyle = "";
                let stockBadge = `<span class="badge badge-success">متاح: ${stock}</span>`;

                if (stock <= 0) {
                    rowStyle = "background-color: #f8d7da;";
                    stockBadge = `<span class="badge badge-danger">غير متوفر (0)</span>`;

                    // تنبيه باستخدام SweetAlert (لو موجودة) أو alert عادية
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'نقص مخزون',
                            text: `الصنف [${name}] رصيده صفر!`,
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                }

                return `
                    <tr data-id="${item.product_id}" data-base-qty="${baseQty}" style="${rowStyle}">
                        <td>${item.product_id}</td>
                        <td class="text-right font-weight-bold">
                            ${item.product_name} <br>
                            ${stockBadge}
                        </td>
                        <td class="bg-warning-light">
                            <input type="number" step="0.0001"
                                class="form-control form-control-sm text-center total-item-qty font-weight-bold"
                                value="${formattedQty}" oninput="calc()">
                        </td>
                        <td class="font-weight-bold text-secondary text-center">${unitLabel}</td>
                        <td>
                            <input type="number" step="0.01" class="form-control form-control-sm text-center item-price-input"
                                value="${price}" oninput="calc()">
                        </td>
                        <td class="row-total font-weight-bold text-primary">0.00</td>
                        <td class="no-print">
                            <button class="btn btn-sm btn-outline-danger" onclick="$(this).closest('tr').remove(); calc();">×</button>
                        </td>
                    </tr>`;
            }).join('');
            $('#assembly_tbody').html(html);
            calc();
        }
    });
}

function calc() {
    let grandTotal = 0;
    let productionQty = parseFloat($('#production_qty').val()) || 1;

    $('#assembly_tbody tr').each(function() {
        let row = $(this);

        // 1. تحديث الكمية أوتوماتيك للمكونات الثابتة (الحشوات والبون)
        let baseQty = parseFloat(row.data('base-qty'));
        if (!isNaN(baseQty)) {
            let updatedQty = baseQty * productionQty;
            // نحدث القيمة فقط إذا لم يكن المستخدم يكتب داخل الخانة حالياً
            if (!row.find('.total-item-qty').is(':focus')) {
                row.find('.total-item-qty').val(updatedQty.toFixed(4));
            }
        }

        // 2. سحب القيم الحالية من السطر للحساب
        let qty = parseFloat(row.find('.total-item-qty').val()) || 0;

        // جلب السعر (بيدور في الـ input أولاً ثم في النص)
        let price = parseFloat(row.find('.item-price-input').val()) ||
                    parseFloat(row.find('.item-price').text()) || 0;

        // 3. حساب إجمالي السطر
        let rowTotal = qty * price;

        // 4. عرض إجمالي السطر
        row.find('.row-total, .total-item-cost').text(rowTotal.toFixed(2));

        grandTotal += rowTotal;
    });

    // 5. تحديث الإجماليات النهائية تحت الجدول
    $('#main_grand_total').text(grandTotal.toFixed(2));
    $('#total_cost_bottom').text(grandTotal.toFixed(2));

    // 6. حساب تكلفة الثوب الواحد
    let unitCost = (grandTotal > 0) ? (grandTotal / productionQty) : 0;
    $('#unit_cost').text(unitCost.toFixed(2));
}

    function addRowFromSearch(prod) {
        let row = '';
        if (window.targetContext === 'link_items') {
            row = `<tr data-id="${prod.id}">
                    <td class="text-right pr-4 font-weight-bold">${prod.product_name}</td>
                    <td><input type="number" class="form-control text-center item-qty" value="1" step="0.01"></td>
                    <td><button class="btn btn-sm btn-danger" onclick="$(this).closest('tr').remove()">×</button></td>
                   </tr>`;
            $('#items_to_link_tbody').append(row);
        } else {
            row = `<tr data-id="${prod.id}">
                    <td>${prod.Product_Code || '-'}</td>
                    <td class="text-right font-weight-bold">${prod.product_name}</td>
                    <td class="bg-warning-light"><input type="number" class="form-control form-control-sm text-center total-item-qty" readonly></td>
                    <td>${prod.unit_name || 'قطعة'}</td>
                    <td class="item-price">${prod.sale_price}</td>
                    <td class="row-total">0.00</td>
                    <td><button class="btn btn-sm btn-danger" onclick="$(this).closest('tr').remove(); calc();">×</button></td>
                   </tr>`;
            $('#assembly_tbody').append(row);
        }
        $('#findProductModal').modal('hide');
        calc();
    }

    /**
     * 4. الحفظ النهائي
     */
function saveProduction() {
    let items = [];
    $('#assembly_tbody tr').each(function() {
        let row = $(this);

        // سحب القيم بدقة بناءً على الكلاسات اللي استقرينا عليها
        let itemId = row.data('id');
        let itemQty = row.find('.total-item-qty').val() || row.find('.qty-input').val();

        // هنا السر: لازم نبعت السعر تحت اسم 'price'
        let itemPrice = row.find('.item-price-input').val() ||
                        row.find('.price-input').val() ||
                        row.find('.item-price').text();

        if (itemId) {
            items.push({
                product_id: itemId,
                qty: parseFloat(itemQty) || 0,
                price: parseFloat(itemPrice) || 0
            });
        }
    });

  let selectedInvoices = $('#invoice_ids').val();

if (items.length === 0)
    return Swal.fire("{{ __('home.alert') }}", "{{ __('home.no_fabrics_in_table') }}", 'warning');

    Swal.fire({
        title: 'تأكيد الحفظ',
        text: "سيتم خصم الكميات وتحديث حالة الفواتير المختارة",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'نعم، حفظ'
    }).then((result) => {
        if (result.isConfirmed) {
            $.post('/manufacturing/store-production', {
                template_id: $('#template_id').val(),
                production_qty: $('#production_qty').val(),
                branch_id: $('#branch_id').val(),
                items: items, // دي المصفوفة اللي فيها الـ price والـ qty
                invoice_ids: selectedInvoices,
                notes: $('#notes').val()
            }, function(res) {
                if(res.success) {
                    Swal.fire('تم!', res.message, 'success').then(() => location.reload());
                }
            }).fail(xhr => {
                let msg = xhr.responseJSON ? xhr.responseJSON.message : 'حدث خطأ في السيرفر';
                Swal.fire('خطأ', msg, 'error');
            });
        }
    });
}

    function printManufacturing() { window.print(); }
</script>


@endsection