@extends('layouts.business.master')

@section('title')
    {{ __('Create Product') }}
@endsection

@section('main_content')
    <div class="erp-table-section">
        <div class="container-fluid">
    <div class="card">
        <div class="table-header p-16">
            <h4>{{ __('Add New Estimates') }}</h4>
        </div>

        <div class="order-form-section p-16">
            <form method="post">
                <input type="hidden" name="type" value="inventory">

                <div class="row">

                    <!-- Customer -->
                    <div class="col-lg-6">
                        <label>{{ __('Customer') }}</label>
                        <div class="input-group w-100">
                            <div class="gpt-up-down-arrow estimate-dropdown position-relative w-100">
                                <select class="form-control inventory-customer-select w-100">
                                    <option value="">{{ __('Select a Customer') }}</option>
                                    <option>{{ __('John Doe (Retail)') }}</option>
                                    <option>{{ __('ABC Store (Wholesale)') }}</option>
                                </select>
                                <span></span>
                            </div>
                            <button type="button"
                                class="btn btn-danger square-btn square-btn-2 d-flex justify-content-center align-items-center">
                                {{-- <img src="{{ asset("assets/images/icons/plus-2.svg") }}" alt=""> --}}
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10 4.17188V15.8385" stroke="var(--clr-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.16602 10H15.8327" stroke="var(--clr-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- Invoice -->
                    <div class="col-lg-3">
                        <label>{{ __('Reference') }}.</label>
                        <input type="text" placeholder="Ex: 5" class="form-control"
                               value="" readonly>
                    </div>

                    <!-- Date -->
                    <div class="col-lg-3">
                        <label>{{ __('Quotation Number') }}</label>
                        <input placeholder="Ex: Q-000123" type="text" class="form-control">
                    </div>

                    <!-- Product -->
                    <div class="col-lg-6">
                        <div class="address-wrapper">
                            <!-- Billing -->
                            <div class="address-box">
                                <div class="address-title">
                                <span>Billing Address: 
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_40006660_159917)">
                                        <path d="M4.08578 9.9142L9.91423 4.08578C10.1868 3.81316 10.3231 3.67685 10.396 3.5298C10.5347 3.25002 10.5347 2.92155 10.396 2.64177C10.3231 2.49472 10.1868 2.35841 9.91423 2.08578C9.64158 1.81316 9.50528 1.67685 9.35823 1.60398C9.07843 1.46534 8.74998 1.46534 8.47018 1.60398C8.32313 1.67685 8.18683 1.81316 7.91423 2.08578L2.08579 7.9142C1.79676 8.2032 1.65224 8.34775 1.57612 8.5315C1.5 8.71525 1.5 8.91965 1.5 9.3284V10.5H2.67157C3.08033 10.5 3.2847 10.5 3.46847 10.4239C3.65224 10.3478 3.79675 10.2032 4.08578 9.9142Z" stroke="#00AE2E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6 10.5H9" stroke="#00AE2E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M7.25 2.75L9.25 4.75" stroke="#00AE2E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        </g>
                                        <defs>
                                        <clipPath id="clip0_40006660_159917">
                                        <rect width="12" height="12" fill="white"/>
                                        </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                                <i class="fa-solid fa-pen edit-icon"></i>
                                </div>
                                <p>
                                Walk-In Customer, Linking Street,<br>
                                Phoenix, Arizona, USA
                                </p>
                            </div>

                            <!-- Shipping -->
                            <div class="address-box">
                                <div class="address-title">
                                <span>Shipping Address:
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_40006660_159917)">
                                        <path d="M4.08578 9.9142L9.91423 4.08578C10.1868 3.81316 10.3231 3.67685 10.396 3.5298C10.5347 3.25002 10.5347 2.92155 10.396 2.64177C10.3231 2.49472 10.1868 2.35841 9.91423 2.08578C9.64158 1.81316 9.50528 1.67685 9.35823 1.60398C9.07843 1.46534 8.74998 1.46534 8.47018 1.60398C8.32313 1.67685 8.18683 1.81316 7.91423 2.08578L2.08579 7.9142C1.79676 8.2032 1.65224 8.34775 1.57612 8.5315C1.5 8.71525 1.5 8.91965 1.5 9.3284V10.5H2.67157C3.08033 10.5 3.2847 10.5 3.46847 10.4239C3.65224 10.3478 3.79675 10.2032 4.08578 9.9142Z" stroke="#00AE2E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6 10.5H9" stroke="#00AE2E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M7.25 2.75L9.25 4.75" stroke="#00AE2E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                                        </g>
                                        <defs>
                                        <clipPath id="clip0_40006660_159917">
                                        <rect width="12" height="12" fill="white"/>
                                        </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                                <i class="fa-solid fa-pen edit-icon"></i>
                                </div>
                                <p>
                                Walk-In Customer, Linking Street,<br>
                                Phoenix, Arizona, USA
                                </p>
                            </div>
                        </div>
                    </div>

                  
                    <div class="col-lg-3">
                        <label>{{ __('Currency') }}</label>
                        <div class="gpt-up-down-arrow position-relative w-100">
                            <select class="form-control">
                                <option>{{ __('USD $') }}</option>
                            </select>
                            <span></span>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <label>{{ __('Warehouse') }}</label>
                        <div class="gpt-up-down-arrow position-relative w-100">
                            <select class="form-control">
                                <option>{{ __('Select a warehouse') }}</option>
                            </select>
                            <span></span>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <label>{{ __('Quotation Date') }}</label>
                        <input  type="date" class="form-control">
                    </div>

                    <div class="col-lg-3">
                        <label>{{ __('Expire Date') }}</label>
                        <input  type="date" class="form-control">
                    </div>

                    <div class="col-lg-3">
                        <label>{{ __('Discount Type') }}</label>
                        <div class="gpt-up-down-arrow position-relative w-100">
                            <select class="form-control">
                                <option>{{ __('Percentage % ') }}</option>
                            </select>
                            <span></span>
                        </div>
                    </div>

                     <div class="col-lg-3">
                        <label>{{ __('Status') }}</label>
                        <div class="gpt-up-down-arrow position-relative w-100">
                            <select class="form-control">
                                <option>{{ __('Status') }}</option>
                            </select>
                            <span></span>
                        </div>
                    </div>

                     <div class="col-lg-9">
                        <label>{{ __('Select Product') }}</label>
                        <div class="input-group w-100">
                            <div class="gpt-up-down-arrow estimate-dropdown position-relative w-100">
                                <select class="form-control inventory-customer-select w-100">
                                    <option value="">{{ __('Search product by name') }}</option>
                                </select>
                                <span></span>
                            </div>
                            <button type="button"
                                class="btn btn-danger square-btn  d-flex justify-content-center align-items-center">
                                <img src="{{ asset("assets/images/icons/barcode1.svg") }}" alt="">
                            </button>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <label>{{ __('Category') }}</label>
                        <div class="gpt-up-down-arrow position-relative w-100">
                            <select class="form-control">
                                <option>{{ __('Select a category') }}</option>
                            </select>
                            <span></span>
                        </div>
                    </div>

              

                    <!-- Left Amount -->
                    <div class="col-sm-12 col-md-7 col-lg-7 mt-5">
                            {{-- <div class="estimate-form-wrapper">

                                <div class="estimate-form-group">
                                    <span class="estimate-form-label">Term & Condition</span>
                                    <textarea
                                    class="estimate-form-textarea"
                                    placeholder="Enter Term & Condition"
                                    rows="2"></textarea>
                                </div>

                                <div class="estimate-form-group">
                                    <span class="estimate-form-label">Note</span>
                                    <textarea
                                    class="estimate-form-textarea"
                                    placeholder="Enter note"
                                    rows="2"></textarea>
                                </div>
                            </div> --}}

                            <div class="expense-wrapper">
                            <button type="button" id="addExpenseBtn" class="expense-add-btn">
                                + Add Additional Expense
                            </button>

                            <div id="expenseContainer">
                                <!-- dynamic rows -->
                            </div>

                                <div class="estimate-form-group">
                                    <span class="estimate-form-label">Note</span>
                                    <textarea
                                    class="estimate-form-textarea"
                                    placeholder="Enter note"
                                    rows="2"></textarea>
                                </div>
                            </div>
                    </div>

                    <!-- Right Amount -->
                    <div class="col-sm-12 col-md-5 col-lg-5 mt-5 sub-total-container">
                        <div class="payment-container mb-3 amount-info-container estimate-container inventory-amount-info-container">

                            <div class="mb-2 d-flex align-items-center justify-content-between">
                                <h6>{{ __('Sub Total') }}</h6>
                                <h6 class="fw-bold" id="sub_total">
                                    {{ __('৳ 0.00') }}
                                </h6>
                            </div>

                            <div class="row save-amount-container align-items-center mb-2">
                                <h6 class="payment-title col-6">
                                    {{ __('Vat') }}
                                </h6>
                                <div class="col-6 w-100 d-flex justify-content-between gap-2">
                                    <div class="d-flex align-items-center gap-2">
                                        <select class="form-select vat_select">
                                            <option value="">{{ __('Select') }}</option>
                                            <option value="1">{{ __('Standard Vat (5%)') }}</option>
                                            <option value="2">{{ __('Reduced Vat (10%)') }}</option>
                                        </select>
                                    </div>
                                    <input
                                        type="number"
                                        class="form-control right-start-input"
                                        placeholder="{{ __('0') }}"
                                        value="0"
                                        readonly
                                    >
                                </div>
                            </div>

                            <div class="row save-amount-container align-items-center mb-2">
                                <h6 class="payment-title col-6">
                                    {{ __('Discount') }}
                                </h6>
                                <div class="col-6 w-100 d-flex justify-content-between gap-2">
                                    <div class="d-flex align-items-center gap-2">
                                        <select class="form-select discount_type">
                                            <option value="flat">
                                                {{ __('Flat (৳)') }}
                                            </option>
                                            <option value="percent">
                                                {{ __('Percent (%)') }}
                                            </option>
                                        </select>
                                    </div>
                                    <input
                                        type="number"
                                        class="form-control right-start-input"
                                        placeholder="{{ __('0') }}"
                                        value="0"
                                    >
                                </div>
                            </div>

                            <div class="shopping-crg-grid mb-2">
                                <h6 class="payment-title">
                                    {{ __('Shipping Charge') }}
                                </h6>
                                <input
                                    type="number"
                                    class="form-control right-start-input"
                                    placeholder="{{ __('0') }}"
                                    value="0"
                                >
                            </div>

                            <div class="d-flex align-items-center justify-content-between fw-bold">
                                <div>{{ __('Total Amount') }}</div>
                                <h6 class="fw-bold" id="total_amount">
                                    {{ __('৳ 0.00') }}
                                </h6>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="col-lg-12 text-center mt-4">
                        <button class="theme-btn border-btn m-2">
                            {{ __('Reset') }}
                        </button>
                        <button class="theme-btn m-2">
                            {{ __('Save & Print') }}
                        </button>
                    </div>

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

    </div>


@endsection

@push('js')
    <script>
        const addExpenseBtn = document.getElementById("addExpenseBtn");
        const expenseContainer = document.getElementById("expenseContainer");

        addExpenseBtn.addEventListener("click", () => {
        const row = document.createElement("div");
        row.className = "expense-row";

        row.innerHTML = `
            <input type="text" class="form-control" placeholder="Enter expense name">
            <input type="text" class="form-control" placeholder="Ex: $150">
            <button type="button" class="expense-delete-btn">
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.25 4.58398L15.7336 12.9382C15.6016 15.0727 15.5357 16.1399 15.0007 16.9072C14.7361 17.2866 14.3956 17.6067 14.0006 17.8473C13.2017 18.334 12.1325 18.334 9.99392 18.334C7.8526 18.334 6.78192 18.334 5.98254 17.8464C5.58733 17.6054 5.24667 17.2847 4.98223 16.9047C4.4474 16.1362 4.38287 15.0674 4.25384 12.93L3.75 4.58398" stroke="#C52127" stroke-width="1.25" stroke-linecap="round"/>
            <path d="M7.5 9.7793H12.5" stroke="#C52127" stroke-width="1.25" stroke-linecap="round"/>
            <path d="M8.75 13.0449H11.25" stroke="#C52127" stroke-width="1.25" stroke-linecap="round"/>
            <path d="M2.5 4.58268H17.5M13.3796 4.58268L12.8107 3.40912C12.4328 2.62957 12.2438 2.23978 11.9179 1.99669C11.8457 1.94277 11.7691 1.8948 11.689 1.85327C11.3281 1.66602 10.8949 1.66602 10.0286 1.66602C9.1405 1.66602 8.6965 1.66602 8.32957 1.86112C8.24826 1.90436 8.17066 1.95427 8.09758 2.01032C7.76787 2.26327 7.5837 2.66731 7.21535 3.4754L6.71061 4.58268" stroke="#C52127" stroke-width="1.25" stroke-linecap="round"/>
            </svg>
            </button>
        `;

        row.querySelector(".expense-delete-btn").addEventListener("click", () => {
            row.remove();
        });

        expenseContainer.appendChild(row);
        });

    </script>
@endpush