@extends('backend.dashboard.layout.master')
@section('content')


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<div class="container-xxl">
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                @if (isset($method) && $method == 'PUT')
                {{translate('Edit Order')}}
                @else
                {{translate('Create Order ')}}
                @endif
            </h3>
        </div>
        <div class="card-body">
            <form class="needs-validation" id="myForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" novalidate>
                {{ csrf_field() }}
                @if (isset($method))
                @method('PUT')
                @endif





                <div class="app-main flex-column flex-row-fluid">
                    <!--begin::Content wrapper-->
                    <div class="d-flex flex-column flex-column-fluid">

                        <!--begin::Content-->
                        <div id="kt_app_content" class="app-content flex-column-fluid">
                            <!--begin::Content container-->
                            <div id="kt_app_content_container" class="app-container container-xxl">



                                <div class="row">

                                    <!-- Order card -->
                                    <div class="col-lg-4 mb-7">
                                        <div class="w-100 flex-lg-row-auto w-lg-300px mb-7 me-7 me-lg-10">
                                            <div class="card card-flush py-4">
                                                <div class="card-header">
                                                    <div class="card-title">
                                                        <h2>{{translate('Order')}}</h2>
                                                    </div>
                                                </div>

                                                <div class="card-body pt-0">
                                                    <div class="fv-row">
                                                        <!--begin::Label-->
                                                        <label class="form-label">{{translate('Order ID')}}</label>
                                                        <!--end::Label-->

                                                        <!--begin::Auto-generated ID-->
                                                        <div class="fw-bold fs-3">#{{ $nextOrderId }}</div>
                                                        <!--end::Input-->
                                                    </div>
                                                    <div class="row g-4">

                                                        <!-- Customer -->

                                                        <label class="form-label">{{ translate('Customer') }}</label>
                                                        <select id="customer_select" name="customer_id" class="form-select form-select-solid" required data-placeholder="Select a customer">
                                                            <option></option>
                                                            @foreach($customers as $customer)
                                                            <option value="{{ $customer->id }}" data-kt-rich-content-icon="{{ asset( $customer->image) }}" data-kt-rich-content-subcontent="{{ $customer->user->email }}">
                                                                #{{ $customer->id }} | {{ $customer->user->name }}
                                                            </option>
                                                            @endforeach
                                                        </select>






                                                        <!-- Company -->

                                                        <label class="form-label">{{ translate('Company') }}</label>

                                                        <select name="company_id" id="company_select" class="form-control" required>
                                                            <option value="">Select</option>
                                                            @foreach($companies as $company)
                                                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                                                            @endforeach
                                                        </select>

                                                        <!-- taxes -->

                                                        <label class="form-label">{{ translate('Taxes') }}</label>

                                                        <select name="taxes_id" id="taxes_id" class="form-control" required>
                                                            <option value="">Select</option>
                                                            @foreach($taxes as $tax)
                                                            <option value="{{ $tax->percent }}" data-id="{{ $tax->id }}">
                                                                {{ $tax->name }} | ({{ $tax->percent }}%)
                                                            </option>
                                                            @endforeach
                                                        </select>






                                                        <!-- Price -->
                                                        <label class="form-label">{{translate('Price')}}</label>
                                                        <input type="number" step="0.01" name="price" class="form-control" value="{{ old('price', $Order->price) }}" required readonly>


                                                        <!-- Discount -->

                                                        <label class="form-label">{{translate('Discount')}}</label>
                                                        <div class="input-group">
                                                            <input id="discount_input" class="form-control" type="number" step="0.01" name="discount" value="{{ old('discount', $Order->discount) }}" required>
                                                            <div class="input-group-addon">
                                                                <select id="discount_type" name="discount_type" class="form-control">
                                                                    <option value="percent" {{ old('discount_type', $Order->discount_type) == 'percent' ? 'selected' : '' }}>%</option>
                                                                    <option value="amount" {{ old('discount_type', $Order->discount_type) == 'amount' ? 'selected' : '' }}>$</option>
                                                                </select>
                                                            </div>
                                                        </div>




                                                        <!-- Total -->

                                                        <!-- Total -->
                                                        <label class="form-label">{{translate('Total')}}</label>
                                                        <input type="number" step="0.01" name="total" class="form-control" value="{{ old('total', $Order->total) }}" required readonly>


                                                        <!-- Status -->

                                                        <label class="form-label">{{ translate('Status') }}</label>
                                                        <select class="form-control" name="status" required>

                                                            <option value="" {{ old('status', $Order->status) == '' ? 'selected' : '' }}>Select status</option>
                                                            <option value="1" {{ old('status', $Order->status) == '1' ? 'selected' : '' }}>Processing</option>
                                                            <option value="2" {{ old('status', $Order->status) == '2' ? 'selected' : '' }}>Pending</option>
                                                            <option value="3" {{ old('status', $Order->status) == '3' ? 'selected' : '' }}>Completed</option>
                                                            <option value="4" {{ old('status', $Order->status) == '4' ? 'selected' : '' }}>Cancelled</option>

                                                        </select>





                                                        <label class="form-label">{{ translate('Payment Method') }}</label>

                                                        <select name="payment_id" class="form-control" required>
                                                            <option value="">Select</option>
                                                            @foreach($Payments as $paye)
                                                            <option value="{{ $paye->id }}">{{ $paye->gateway }}</option>
                                                            @endforeach
                                                        </select>





                                                        <!-- Currency -->

                                                        <label class="form-label">{{ translate('Currency') }}</label>
                                                        <select name="currency_id" class="form-control">
                                                            <option value="">Select</option>
                                                            @foreach($Currencys as $currency)
                                                            <option value="{{ $currency->id }}">{{ $currency->symbol }} | ({{ $currency->price }})</option>
                                                            @endforeach
                                                        </select>
                                                        <hr>


                                                        <div class="d-flex flex-column gap-4">


                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <span class="fw-semibold fs-6"> {{translate('Main Price')}}</span>
                                                                <span class="fw-bold fs-6 text-primary">
                                                                    $<span id="price_value">{{ old('price', $Order->price) }}</span>
                                                                </span>
                                                            </div>

                                                            <!-- vat card -->
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <span class="fw-semibold fs-6">{{translate('Vat')}} (<span id="tax_percent">{{ old('taxes_id', 0) }}</span>%)</span>
                                                                <span class="fw-bold fs-6 text-success">
                                                                    $<span id="tax_amount">0.00</span>
                                                                </span>
                                                            </div>

                                                            <!-- disc card -->
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <span class="fw-semibold fs-6">{{translate('Discount')}}</span>
                                                                <span class="fw-bold fs-6 text-danger">
                                                                    $<span id="discount_value">{{ old('discount', $Order->discount) }}</span>
                                                                </span>
                                                            </div>

                                                            <hr>

                                                            <!--  total card -->
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <span class="fw-semibold fs-5"> {{translate('Final Price')}}</span>
                                                                <span class="fw-bold fs-5 text-dark" id="total_value">
                                                                    ${{ old('total', $Order->total) }}
                                                                </span>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-lg-8 mb-7">


                                        <div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10">
                                            <!--begin::Order Products-->
                                            <div class="card card-flush py-4">
                                                <div class="card-header">
                                                    <div class="card-title">
                                                        <h2>{{translate('Select Products')}}</h2>
                                                    </div>
                                                </div>

                                                <div class="card-body pt-0">
                                                    <div class="d-flex flex-column gap-10">
                                                        <!-- Selected Products Preview -->
                                                        <div>
                                                            <label class="form-label">{{ translate('Add products to this order') }}</label>
                                                            <div class="row row-cols-1 row-cols-xl-3 row-cols-md-2 border border-dashed rounded pt-3 pb-1 px-2 mb-5 mh-300px overflow-scroll" id="kt_ecommerce_edit_order_selected_products">
                                                                <span class="w-100 text-muted">{{ translate('Select one or more products from the list below by ticking the checkbox') }}.</span>
                                                            </div>

                                                            <div class="fw-bold fs-4">{{ translate('Total Cost') }}: $
                                                                <span id="kt_ecommerce_edit_order_total_price">0.00</span>
                                                            </div>
                                                        </div>

                                                        <div class="separator"></div>

                                                        <!-- Search Bar -->
                                                        <div class="d-flex align-items-center position-relative mb-n7">
                                                            <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4">
                                                                <span class="path1"></span><span class="path2"></span>
                                                            </i>
                                                            <input type="text" class="form-control form-control-solid w-100 w-lg-50 ps-12" placeholder="Search Products" />
                                                        </div>

                                                        <!-- Product Table -->
                                                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="">
                                                            <thead>
                                                                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                    <th class="w-25px pe-2"></th>
                                                                    <th class="min-w-200px">Product</th>
                                                                    <th class="min-w-100px text-end pe-5">Qty Remaining</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="fw-semibold text-gray-600">
                                                                @foreach($products as $product)
                                                                @php
                                                                $hasAnnual = $product->annual && count(json_decode($product->annual, true)) > 0;
                                                                @endphp


                                                                <tr>
                                                                    <td>
                                                                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                            <input class="form-check-input product-checkbox" type="checkbox" name="products[]" value="{{ $product->id }}" data-name="{{ $product->getTranslation('name') }}" data-price="{{ $product->price }}" data-image="{{ asset($product->image) }}" data-sku="{{ $product->sku }}" data-annual="{{ json_encode($product->annual) }}" data-attributes="{{ json_encode($product->attribute) }}" />
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <div class="d-flex align-items-center">
                                                                            <div class="ms-5">
                                                                                <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold">
                                                                                    {{ $product->getTranslation('name') }}
                                                                                </a>
                                                                                <div class="fw-semibold fs-7">Price: $<span>{{ number_format($product->price, 2) }}</span></div>

                                                                                <!-- Annual Options -->
                                                                                @if($hasAnnual)
                                                                                <select name="annual_prices[{{ $product->id }}]" class="form-control annual-dropdown mt-2" data-product-id="{{ $product->id }}" style="display:none;">
                                                                                    @foreach(json_decode($product->annual, true) as $period => $price)
                                                                                    @if($price > 0)
                                                                                    <option value="{{ $price }}">{{ $period }} - ${{ $price }}</option>
                                                                                    @endif
                                                                                    @endforeach
                                                                                </select>

                                                                                <div class="annual-fields mt-2" data-product-id="{{ $product->id }}" style="display:none;">
                                                                                    <label class="form-label">{{ translate('End Date') }}</label>
                                                                                    <input type="date" name="end_date[{{ $product->id }}]" class="form-control mt-2" placeholder="End Date">
                                                                                    <input type="number" name="cycle_price[{{ $product->id }}]" class="form-control mt-2" placeholder="Cycle Price">
                                                                                    <label class="form-label">{{ translate('End Number') }}</label>
                                                                                    <input type="date" name="end_number[{{ $product->id }}]" class="form-control mt-2" placeholder="End Number">
                                                                                    <input type="text" name="invoice_cycle[{{ $product->id }}]" class="form-control mt-2" placeholder="Invoice Cycle">
                                                                                </div>
                                                                                @endif

                                                                                <!-- Attributes -->
                                                                                @if($product->attribute && count(json_decode($product->attribute, true)) > 0)
                                                                                <div class="attributes-section mt-2" data-product-id="{{ $product->id }}" style="display:none;">
                                                                                    @foreach(json_decode($product->attribute, true) as $attribute)
                                                                                    <input type="{{ $attribute['type'] }}" name="attributes[{{ $product->id }}][{{ $attribute['name'] }}]" class="form-control mt-2" placeholder="{{ $attribute['label'] }}">
                                                                                    @endforeach
                                                                                </div>
                                                                                @endif

                                                                                <!-- Quantity Input -->
                                                                                <input type="number" class="form-control mt-2 qty-input" data-product-id="{{ $product->id }}" value="1" disabled />
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="text-end pe-5">{{ $product->qty }}</td>
                                                                </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>

                                        <script>
                                            document.addEventListener("DOMContentLoaded", function() {
                                                const container = document.getElementById('kt_ecommerce_edit_order_selected_products');
                                                const totalElement = document.getElementById('kt_ecommerce_edit_order_total_price');
                                                let selectedProducts = {};

                                                function renderSelectedProducts() {
                                                    container.innerHTML = '';
                                                    let total = 0;

                                                    Object.values(selectedProducts).forEach(product => {
                                                        let price = parseFloat(product.price);
                                                        let qty = parseInt(product.qty);
                                                        let subTotal = price * qty;
                                                        total += subTotal;

                                                        container.innerHTML += `
                    <div class="col mb-3">
                        <div class="d-flex flex-column border rounded p-3 h-100">
                            <img src="${product.image}" alt="" style="width:100%; height:100px; object-fit:contain; margin-bottom:10px;">
                            <strong>${product.name}</strong>
                            <span>Price: $${price.toFixed(2)} x ${qty} = $${subTotal.toFixed(2)}</span>
                            <small class="text-muted">SKU: ${product.sku}</small>
                        </div>
                    </div>
                `;
                                                    });

                                                    totalElement.textContent = total.toFixed(2);

                                                    const basePriceInput = document.querySelector('input[name="price"]');
                                                    const discountInput = document.querySelector('input[name="discount"]');
                                                    const totalInput = document.querySelector('input[name="total"]');
                                                    const taxSelect = document.querySelector('select[name="taxes_id"]');

                                                    basePriceInput.value = total.toFixed(2);
                                                    let discount = parseFloat(discountInput.value || 0);
                                                    let taxPercent = parseFloat(taxSelect.value || 0);
                                                    let taxAmount = total * (taxPercent / 100);
                                                    totalInput.value = (total + taxAmount - discount).toFixed(2);
                                                }

                                                document.querySelectorAll('.product-checkbox').forEach(checkbox => {
                                                    checkbox.addEventListener('change', function() {
                                                        const id = this.value;
                                                        const priceValue = parseFloat(this.dataset.price) || 0;
                                                        const isRecurring = priceValue === 0;
                                                        const annualDropdown = document.querySelector(`.annual-dropdown[data-product-id="${id}"]`);
                                                        const annualFields = document.querySelector(`.annual-fields[data-product-id="${id}"]`);
                                                        const attributesSection = document.querySelector(`.attributes-section[data-product-id="${id}"]`);
                                                        const qtyInput = document.querySelector(`.qty-input[data-product-id="${id}"]`);

                                                        if (this.checked) {

                                                            if (isRecurring) {
                                                                if (annualDropdown) annualDropdown.style.display = 'block';
                                                                if (annualFields) annualFields.style.display = 'block';
                                                            } else {
                                                                if (annualDropdown) annualDropdown.style.display = 'none';
                                                                if (annualFields) {
                                                                    annualFields.querySelectorAll('input').forEach(input => input.value = '');
                                                                    annualFields.style.display = 'none';
                                                                }
                                                            }



                                                            if (attributesSection) attributesSection.style.display = 'block';
                                                            qtyInput.disabled = false;


                                                            let price = this.dataset.price;
                                                            if (priceValue === 0 && annualDropdown && annualDropdown.options.length > 0) {
                                                                price = annualDropdown.options[0].value;
                                                            }

                                                            selectedProducts[id] = {
                                                                name: this.dataset.name
                                                                , price: price
                                                                , sku: this.dataset.sku
                                                                , image: this.dataset.image
                                                                , qty: qtyInput.value || 1
                                                            };
                                                        } else {
                                                            annualDropdown.style.display = 'none';
                                                            annualFields.style.display = 'none';
                                                            if (attributesSection) attributesSection.style.display = 'none';
                                                            qtyInput.disabled = true;
                                                            qtyInput.value = 1;
                                                            delete selectedProducts[id];
                                                        }

                                                        renderSelectedProducts();
                                                    });
                                                });


                                                document.querySelectorAll('.qty-input').forEach(input => {
                                                    input.addEventListener('input', function() {
                                                        const id = this.dataset.productId;
                                                        if (selectedProducts[id]) {
                                                            selectedProducts[id].qty = this.value || 1;
                                                            renderSelectedProducts();
                                                        }
                                                    });
                                                });


                                                document.querySelectorAll('.annual-dropdown').forEach(select => {
                                                    select.addEventListener('change', function() {
                                                        const id = this.dataset.productId;
                                                        const selectedPrice = this.value;
                                                        if (selectedProducts[id]) {
                                                            selectedProducts[id].price = selectedPrice;
                                                            renderSelectedProducts();
                                                        }
                                                    });
                                                });


                                                document.querySelector('input[name="discount"]').addEventListener('input', renderSelectedProducts);
                                                document.querySelector('select[name="taxes_id"]').addEventListener('change', renderSelectedProducts);


                                                if ($.fn.DataTable.isDataTable('#kt_ecommerce_edit_order_product_table')) {
                                                    $('#kt_ecommerce_edit_order_product_table').DataTable().destroy();
                                                }

                                                $('#kt_ecommerce_edit_order_product_table').DataTable({
                                                    paging: false
                                                    , searching: true
                                                    , info: false
                                                });
                                            });

                                        </script>






                                        <!--end::Main column-->
                                    </div>
                                    <!--end::Form-->
                                </div>
                                <!--end::Content container-->
                            </div>
                            <!--end::Content-->
                        </div>
                        <!--end::Content wrapper-->

                    </div>




                    <div class="d-flex justify-content-end mt-4">
                        <button class="btn btn-primary" type="submit">{{translate('Submit Form')}}</button>
                    </div>
            </form>
        </div>
    </div>
</div>



<!--begin::Order details-->
<div class="card card-flush py-4 d-none ">
    <!--begin::Card header-->
    <div class="card-header ">
        <div class="card-title">
            <h2>Delivery Details</h2>
        </div>
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <!--begin::Billing address-->
        <div class="d-flex flex-column gap-5 gap-md-7">
            <!--begin::Title-->
            <div class="fs-3 fw-bold mb-n2">Billing Address</div>
            <!--end::Title-->


            <!--begin::Input group-->
            <div class="fv-row">
                <!--begin::Label-->
                <label class="required form-label">Country</label>
                <!--end::Label-->

            </div>
            <!--end::Input group-->
            <!--begin::Checkbox-->
            <div class="form-check form-check-custom form-check-solid">
                <input class="form-check-input" type="checkbox" value id="same_as_billing" checked="checked" />
                <label class="form-check-label" for="same_as_billing">Shipping
                    address is the same as billing address</label>
            </div>
            <!--end::Checkbox-->

        </div>
        <!--end::Billing address-->
    </div>
    <!--end::Card body-->
</div>
<!--end::Order details-->

<script>
    const formatOption = (item) => {
        if (!item.id) return item.text;

        const img = item.element.getAttribute('data-kt-rich-content-icon');
        const email = item.element.getAttribute('data-kt-rich-content-subcontent');
        const name = item.text;

        return $(`
            <div class="d-flex align-items-center">
                <img src="${img}" class="rounded-circle select2-img-customer"/>
                <div class="d-flex flex-column" style="line-height: 1;">
                    <span class="fw-bold text-gray-900 fs-6">${name}</span>
                    <span class="text-muted fs-7">${email}</span>
                </div>
            </div>
        `);
    };

    $(document).ready(function() {
        $('#customer_select').select2({
            placeholder: "Select a customer"
            , templateResult: formatOption
            , templateSelection: formatOption
            , escapeMarkup: m => m
        });
    });

</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const priceInput = document.querySelector('input[name="price"]');
        const discountInput = document.querySelector('input[name="discount"]');
        const discountTypeSelect = document.getElementById('discount_type');
        const taxSelect = document.querySelector('select[name="taxes_id"]');
        const totalInput = document.querySelector('input[name="total"]');

        const priceValueEl = document.getElementById('price_value');
        const discountValueEl = document.getElementById('discount_value');
        const taxPercentEl = document.getElementById('tax_percent');
        const taxAmountEl = document.getElementById('tax_amount');
        const totalValueEl = document.getElementById('total_value');

        function calculateValues() {
            const price = parseFloat(priceInput.value) || 0;
            const discountValue = parseFloat(discountInput.value) || 0;
            const discountType = discountTypeSelect.value;
            const taxPercent = parseFloat(taxSelect.value) || 0;


            let discountAmount = 0;

            if (discountType === 'percent') {
                discountAmount = (price * discountValue) / 100;
            } else {
                discountAmount = discountValue;
            }


            const taxAmount = (price * taxPercent) / 100;


            const total = price - discountAmount + taxAmount;


            priceValueEl.textContent = price.toFixed(2);
            discountValueEl.textContent = discountAmount.toFixed(2);
            taxPercentEl.textContent = taxPercent.toFixed(2);
            taxAmountEl.textContent = taxAmount.toFixed(2);
            totalValueEl.textContent = total.toFixed(2);
            totalInput.value = total.toFixed(2);
        }


        calculateValues();


        discountInput.addEventListener('input', calculateValues);
        discountTypeSelect.addEventListener('change', calculateValues);
        taxSelect.addEventListener('change', calculateValues);
        priceInput.addEventListener('input', calculateValues);
    });

</script>


<script>
    $(document).ready(function() {
        $('#customer_select').on('change', function() {
            const customerId = $(this).val();
            const companySelect = $('#company_select');

            if (customerId) {

                companySelect.html('<option value="">Loading...</option>');

                $.ajax({
                    url: "{{ route('customer.company', '') }}/" + customerId
                    , method: 'GET'
                    , success: function(response) {
                        companySelect.empty();

                        if (response.status === 'success' && response.company) {
                            companySelect.append(
                                `<option value="${response.company.id}" selected>${response.company.name}</option>`
                            );
                        } else {
                            companySelect.append('<option value="">No company found</option>');
                        }
                    }
                    , error: function(xhr, status, error) {
                        console.error('AJAX Error:', status, error);
                        alert('حدث خطأ أثناء جلب بيانات الشركة.');
                        companySelect.html('<option value="">Select</option>');
                    }
                });
            } else {
                companySelect.html('<option value="">Select</option>');
            }
        });
    });

</script>
<script>
    document.getElementById('submitBtn').addEventListener('click', function(event) {
        var form = document.getElementById('myForm');
        if (!form.checkValidity()) {
            event.preventDefault();
            form.classList.add('was-validated');
            return;
        }

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = 'Loading...';

        setTimeout(function() {
            form.submit();
        }, 1000);

        event.preventDefault();
    });




    function previewImage(event) {
        var file = event.target.files[0];
        var previewContainer = document.getElementById('imagePreviewContainer');
        var imagePreview = document.getElementById('imagePreview');

        if (file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                previewContainer.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    }

</script>


@endsection