@extends('admin.layouts.master')

@section('title', 'طلبية جديدة')

@section('content')

<div class="card">

    <div class="card-header">

        <h3 class="card-title">
            طلبية جديدة
        </h3>

    </div>

    <div class="card-body">

        <form method="POST"
              action="{{ route('sales-orders.store') }}">

            @csrf

            <div class="row mb-5">

                <div class="col-md-6">

                    <label class="form-label">
                        العميل
                    </label>

                    <select name="customer_id" class="form-select" id="customer-select">
    <option value="">-- ابحث عن عميل --</option>
    @foreach($customers as $customer)
        <option value="{{ $customer->id }}">
            {{ $customer->customer_name }}
        </option>
    @endforeach
</select>

<script>
    $(document).ready(function() {
        $('#customer-select').select2({
            placeholder: "ابحث باسم العميل...",
            allowClear: true
        });
    });
</script>
                </div>

            </div>

            <table class="table table-bordered" id="items_table">
                <thead>
                <tr>
                    <th width="35%">
                        الصنف
                    </th>

                    <th>
                        السعر
                    </th>

                    <th>
                        الوزن
                    </th>

                    <th>
                        الكمية
                    </th>

                    <th>
                        الإجمالي
                    </th>

                    <th>
                        الوزن الكلي
                    </th>

                    <th>
                        حذف
                    </th>

                </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

            <button type="button" class="btn btn-success mb-5" id="add_row">

                إضافة صنف

            </button>

            <div class="row">

                <div class="col-md-3">

                    <label>
                        إجمالي الوزن
                    </label>

                    <input type="text"
                           id="final_total_weight"
                           name="final_total_weight"
                           class="form-control"
                           readonly>

                </div>

                <div class="col-md-3">

                    <label>
                        إجمالي المبلغ
                    </label>

                    <input type="text"
                           id="final_total_amount"
                           name="final_total_amount"
                           class="form-control"
                           readonly>

                </div>

            </div>

            <div class="mt-5">

                <button class="btn btn-primary">

                    حفظ الطلبية

                </button>

            </div>

        </form>

    </div>

</div>


<script>

    let variants = @json($variants);

</script>

@endsection

@push('js')

<script>

    let rowIndex = 0;

    // إضافة Row جديد
    $('#add_row').click(function () {

        let variantOptions =
            '<option value=\"\">اختر الصنف</option>';

        variants.forEach(function(v) {

            variantOptions += `
                <option
                    value="${v.id}"
                    data-price="${v.selling_price}"
                    data-weight="${v.unit_weight_kg}"
                >
                    ${v.variant_name}
                </option>
            `;

        });

        let row = `

            <tr>

                <td>

                    <select
                        name="product_variant_id[]"
                        class="form-select variant_select"
                    >

                        ${variantOptions}

                    </select>

                </td>

                <td>

                    <input type="text"
                           class="form-control unit_price"
                           readonly>

                </td>

                <td>

                    <input type="text"
                           class="form-control unit_weight"
                           readonly>

                </td>

                <td>

                    <input type="number"
                           step="0.01"
                           name="quantity[]"
                           class="form-control quantity">

                </td>

                <td>

                    <input type="text"
                           class="form-control total_price"
                           readonly>

                </td>

                <td>

                    <input type="text"
                           class="form-control total_weight"
                           readonly>

                </td>

                <td>

                    <button type="button"
                            class="btn btn-danger remove_row">

                        حذف

                    </button>

                </td>

            </tr>

        `;

        $('#items_table tbody').append(row);

        rowIndex++;

    });

    // عند اختيار الصنف
    $(document).on(
        'change',
        '.variant_select',
        function () {

            let row =
                $(this).closest('tr');

            let selected =
                $(this).find(':selected');

            let price =
                selected.data('price');

            let weight =
                selected.data('weight');

            row.find('.unit_price')
                .val(price);

            row.find('.unit_weight')
                .val(weight);

            calculateRow(row);

        });

    // عند تغيير الكمية
    $(document).on(
        'keyup change',
        '.quantity',
        function () {

            let row =
                $(this).closest('tr');

            calculateRow(row);

        });

    // حذف صف
    $(document).on(
        'click',
        '.remove_row',
        function () {

            $(this).closest('tr').remove();

            calculateTotals();

        });

    // حساب الصف
    function calculateRow(row)
    {
        let qty =
            parseFloat(
                row.find('.quantity').val()
            ) || 0;

        let price =
            parseFloat(
                row.find('.unit_price').val()
            ) || 0;

        let weight =
            parseFloat(
                row.find('.unit_weight').val()
            ) || 0;

        let totalPrice =
            qty * price;

        let totalWeight =
            qty * weight;

        row.find('.total_price')
            .val(totalPrice.toFixed(2));

        row.find('.total_weight')
            .val(totalWeight.toFixed(2));

        calculateTotals();
    }

    // حساب إجماليات الطلبية
    function calculateTotals()
    {
        let finalAmount = 0;

        let finalWeight = 0;

        $('.total_price').each(function () {

            finalAmount +=
                parseFloat($(this).val()) || 0;

        });

        $('.total_weight').each(function () {

            finalWeight +=
                parseFloat($(this).val()) || 0;

        });

        $('#final_total_amount')
            .val(finalAmount.toFixed(2));

        $('#final_total_weight')
            .val(finalWeight.toFixed(2));
    }

</script>

@endpush