@extends('layouts.app')
@section('title', __('sale.invoice'))

@section('content')
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <x-breadcrumb :langArray="['sale.sale', 'sale.invoices', 'sale.create']" />
            <div class="row">
                <form class="g-3 needs-validation" id="invoiceForm" action="{{ route('sale.invoice.store') }}"
                    enctype="multipart/form-data">
                    {{-- CSRF Protection --}}
                    @csrf
                    @method('POST')

                    <input type="hidden" name="row_count" value="0">
                    <input type="hidden" name="row_count_payments" value="0">
                    <input type="hidden" id="base_url" value="{{ url('/') }}">
                    <input type="hidden" id="operation" name="operation" value="save">
                    <input type="hidden" id="selectedPaymentTypesArray" value="{{ $selectedPaymentTypesArray }}">
                    <div class="row">
                        <div class="col-12 col-lg-12">
                            <div class="card">
                                <div class="card-header px-4 py-3 d-flex align-items-center">
                                    <h5 class="mb-0 me-3">{{ __('sale.details') }}</h5>
                                    <div class="form-check d-flex align-items-center">
                                        <input type="checkbox" class="form-check-input me-2" id="advancedSearchToggle">
                                        <label class="form-check-label" for="advancedSearchToggle">Advanced Search</label>
                                    </div>
                                </div>

                                <div class="card-body p-4 row g-3">

                                    <div id="advancedSearchFields" style="display: none;">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <x-label for="item_category_id" name="{{ __('item.category.category') }}" />
                                                <x-dropdown-item-category selected="" :isMultiple=false />
                                            </div>
                                            <div class="col-md-2">
                                                <x-label for="batch_id" name="व्याच" />
                                                <div class="input-group">
                                                    <x-dropdown-batch selected="" />
                                                    <button type="button" class="btn btn-outline-primary"
                                                        data-bs-toggle="modal" data-bs-target="#batchsModal"><i
                                                            class="bx bx-plus-circle me-0"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <x-label for="program_id" name="कार्यक्रम" />
                                                <div class="input-group">
                                                    <x-dropdown-program selected="" :isMultiple=false />
                                                    <button type="button" class="btn btn-outline-primary"
                                                        data-bs-toggle="modal" data-bs-target="#programModal"><i
                                                            class="bx bx-plus-circle me-0"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <x-label for="section_id" name="सेक्सन" />
                                                <div class="input-group">
                                                    <x-dropdown-section selected="" :isMultiple=false onchange="fetchItemList"/>
                                                    <button type="button" class="btn btn-outline-primary"
                                                        data-bs-toggle="modal" data-bs-target="#sectionModal"><i
                                                            class="bx bx-plus-circle me-0"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <x-label for="party_id" name="{{ __('customer.customer') }}" />

                                        <a tabindex="0" class="text-primary" data-bs-toggle="popover"
                                            data-bs-trigger="hover focus"
                                            data-bs-content="Search by name, mobile, phone, whatsApp, email"><i
                                                class="fadeIn animated bx bx-info-circle"></i></a>
                                        <div class="input-group">
                                            <select class="form-select party-ajax" data-party-type='customer'
                                                data-placeholder="Select Customer" id="party_id" name="party_id">
                                                <x-option-default-party-selected partyType='customer' />
                                            </select>
                                            <button type="button" class="input-group-text open-party-model"
                                                data-party-type='customer'>
                                                <i class='text-primary bx bx-plus-circle'></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <x-label for="sale_date" name="{{ __('app.date') }}" />
                                        <div class="input-group mb-3">
                                            <x-input type="text" id="start-date" additionalClasses="sdatepicker"
                                                name="sale_date" :required="true" value="{{ today_bs() }}" />
                                            <span class="input-group-text" id="input-near-focus" role="button"><i
                                                    class="fadeIn animated bx bx-calendar-alt"></i></span>
                                        </div>
                                    </div>
                                    @php
                                        $fiscalYearDetails = getFiscalYearDetails();
                                    @endphp
                                    <div class="col-md-4">
                                        <x-label for="sale_code" name="{{ __('sale.code') }}" />
                                        <!--  -->
                                        <div class="input-group mb-3">
                                            <x-input type="text" name="prefix_code" :required="true" readonly
                                                placeholder="Prefix Code" value="{{ $data['prefix_code'] }}" />
                                            <span class="input-group-text">#</span>
                                            <x-input type="text" name="count_id" :required="true" readonly
                                                placeholder="Serial Number" value="{{ $data['count_id'] }}" />
                                            <x-input type="text" name="fiscal_year" :required="true" readonly
                                                placeholder="आर्थिक वर्ष"
                                                value="{{ explode('/', $fiscalYearDetails['fiscalYear'])[0] . '/' . substr(explode('/', $fiscalYearDetails['fiscalYear'])[1], -3) }}" />

                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <x-label for="reference_no" name="{{ __('app.reference_no') }}" />
                                        <x-input type="text" name="reference_no" :required="false"
                                            placeholder="(Optional)" value="" />
                                    </div>

                                </div>
                                <div class="card-header px-4 py-3">
                                    <h5 class="mb-0">{{ __('item.items') }}</h5>
                                </div>
                                <div class="card-body p-4 row g-3">
                                    <div class="col-md-3 d-none">
                                        <x-label for="warehouse_id" name="{{ __('warehouse.warehouse') }}" />
                                        <x-dropdown-warehouse selected="" dropdownName='warehouse_id' />
                                    </div>
                                    <div class="col-md-12">
                                        <x-label for="search_item" name="{{ __('item.enter_item_name') }}" />
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon1"><i
                                                    class="fadeIn animated bx bx-barcode-reader text-primary"></i></span>
                                            <input type="text" id="search_item" value="" class="form-control"
                                                required placeholder="Scan Barcode/Search Items">
                                            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                                data-bs-target="#itemModal"><i class="bx bx-plus-circle me-0"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-12 table-responsive">
                                        <table class="table mb-0 table-striped table-bordered" id="invoiceItemsTable">
                                            <thead>
                                                <tr class="text-uppercase">
                                                    <th scope="col">{{ __('app.action') }}</th>
                                                    <th scope="col">{{ __('item.item') }}</th>
                                                    <th scope="col" class="">{{ __('item.code') }}</th>
                                                    <th scope="col"
                                                        class="">
                                                        {{ __('item.mrp') }}</th>
                                                    <th scope="col">{{ __('app.qty') }}</th>
                                                    <th scope="col">{{ __('app.total') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td colspan="7"
                                                        class="text-center fw-light fst-italic default-row">
                                                        No items are added yet!!
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="2" class="fw-bold text-end tfoot-first-td">
                                                        {{ __('app.total') }}
                                                    </td>
                                                    <td class="fw-bold sum_of_quantity">
                                                        0
                                                    </td>
                                                    <td class="fw-bold text-end" colspan="3"></td>
                                                    <td class="fw-bold text-end sum_of_total">
                                                        0
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    <div class="col-md-8">
                                        <x-label for="note" name="{{ __('app.note') }}" />
                                        <x-textarea name='note' value='' />
                                    </div>
                                    <div class="col-md-4 mt-4">
                                        <table class="table mb-0 table-striped">
                                            <tbody>
                                                <tr>
                                                    <td class="w-50">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="round_off_checkbox">
                                                            <label class="form-check-label fw-bold cursor-pointer"
                                                                for="round_off_checkbox">{{ __('app.round_off') }}</label>
                                                        </div>
                                                    </td>
                                                    <td class="w-50">
                                                        <x-input type="text"
                                                            additionalClasses="text-end cu_numeric round_off "
                                                            name="round_off" :required="false" placeholder="Round-Off"
                                                            value="0" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><span class="fw-bold">{{ __('app.grand_total') }}</span></td>
                                                    <td>
                                                        <x-input type="text" additionalClasses="text-end grand_total"
                                                            readonly=true name="grand_total" :required="true"
                                                            placeholder="Round-Off" value="0" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="card-header px-4 py-3">
                                    <h5 class="mb-0">{{ __('payment.payment') }}</h5>
                                </div>
                                <div class="card-body p-4 row g-3 ">
                                    <div class="payment-container">
                                        <div class="row payment-type-row-0 py-3 ">
                                            <div class="col-md-6">
                                                <x-label for="amount" id="amount_lang"
                                                    labelDataName="{{ __('payment.amount') }}"
                                                    name="<strong>#1</strong> {{ __('payment.amount') }}" />
                                                <div class="input-group mb-3">
                                                    <x-input type="text" additionalClasses="cu_numeric"
                                                        name="payment_amount[0]" value="" />
                                                    <span class="input-group-text" id="input-near-focus"
                                                        role="button"><i class="fadeIn animated bx bx-dollar"></i></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <x-label for="payment_type" id="payment_type_lang"
                                                    name="{{ __('payment.type') }}" />
                                                <div class="input-group">
                                                    <select class="form-select select2 payment-type-ajax"
                                                        name="payment_type_id[0]" data-placeholder="Choose one thing">
                                                    </select>

                                                    <button type="button" class="input-group-text"
                                                        data-bs-toggle="modal" data-bs-target="#paymentTypeModal">
                                                        <i class='text-primary bx bx-plus-circle'></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <x-label for="payment_note" id="payment_note_lang"
                                                    name="{{ __('payment.note') }}" />
                                                <x-textarea name="payment_note[0]" value="" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <x-anchor-tag class="add_payment_type" href="javascript:;"
                                            text="<div class='d-flex align-items-center'><i class='fadeIn animated bx bx-plus font-30 text-primary'></i><div class=''>{{ __('payment.add_payment_type') }}</div></div>" />
                                    </div>
                                </div>

                                <div class="card-header px-4 py-3"></div>
                                <div class="card-body p-4 row g-3">
                                    <div class="col-md-12">
                                        <div class="d-md-flex d-grid align-items-center gap-3">
                                            <x-button type="button" class="primary px-4" buttonId="submit_form"
                                                text="{{ __('app.submit') }}" />
                                            <x-anchor-tag href="{{ route('dashboard') }}" text="{{ __('app.close') }}"
                                                class="btn btn-light px-4" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <!--end row-->
        </div>
    </div>
    <!-- Import Modals -->
    @include('modals.service.create')
    @include('modals.expense-category.create')
    @include('modals.payment-type.create')
    @include('modals.item.serial-tracking')
    @include('modals.item.batch-tracking-sale')
    @include('modals.party.create')
    @include('modals.item.create')

@endsection

@section('js')
    <script src="{{ asset('custom/js/sale/sale.js') }}"></script>
    <script src="{{ asset('custom/js/items/serial-tracking.js') }}"></script>
    <script src="{{ asset('custom/js/items/serial-tracking-settings.js') }}"></script>
    <script src="{{ asset('custom/js/items/batch-tracking-sale.js') }}"></script>
    <script src="{{ asset('custom/js/modals/payment-type/payment-type.js') }}"></script>
    <script src="{{ asset('custom/js/payment-types/payment-type-select2-ajax.js') }}"></script>
    <script src="{{ asset('custom/js/common/common.js') }}"></script>
    <script src="{{ asset('custom/js/modals/party/party.js') }}"></script>
    <script src="{{ asset('custom/js/modals/item/item.js') }}"></script>
    <script src="{{ asset('custom/js/nepaliCurrencySystem.js') }}"></script>

@endsection