@extends('layouts.business.master')

@section('title')
    {{ __('Pos Sale') }}
@endsection

@php
    $modules = product_setting()->modules ?? [];
@endphp

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/choices.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/calculator.css') }}">
@endpush

@section('main_content')
    <div class="container-fluid">
        <div class="grid row sales-main-container  p-lr">
            <div class="sales-container">
                <!-- Quick Action Section -->
                <div class="quick-act-header">
                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center">
                        <div class="mb-2 mb-sm-0">
                            <h4 class='quick-act-title'>{{ __('Quick Action') }}</h4>
                        </div>
                        <div class="quick-actions-container">
                            <a href="{{ route('business.products.index') }}"
                               class='save-product-btn d-flex align-items-center gap-1'>
                                <img src="{{ asset('assets/images/icons/product.svg') }}" alt="">
                                {{ __('Product List') }}
                            </a>

                            <a href="{{ route('business.sales.index', ['today' => true]) }}"
                               class='sales-btn d-flex align-items-center gap-1'>
                                <img src="{{ asset('assets/images/icons/sales.svg') }}" alt="">
                                {{ __('Today Sales') }}
                            </a>

                            <button data-bs-toggle="modal" data-bs-target="#calculatorModal"
                                    class='calculator-btn d-flex align-items-center gap-1'>
                                <img src="{{ asset('assets/images/icons/calculator.svg') }}" alt="">
                                {{ __('Calculator') }}
                            </button>

                            <a href="{{ route('business.dashboard.index') }}"
                               class='dashboard-btn d-flex align-items-center gap-1'>
                                <img src="{{ asset('assets/images/icons/dashboard.svg') }}" alt="">
                                {{ __('Dashboard') }}
                            </a>
                        </div>
                    </div>
                </div>
                <form action="{{ route('business.sales.store') }}" method="post" enctype="multipart/form-data" class="ajaxform">
                    @csrf
                    <div class="mt-4 mb-3">
                        <div class="row g-3">
                            <!-- First Row -->
                            <div class="col-12 col-md-6">
                                <input type="text" name="invoiceNumber" value="{{ $invoice_no }}" class="form-control"
                                       placeholder="{{ __('Invoice no') }}." readonly>
                            </div>
                            <!-- Second Row -->
                            <div class="col-12 col-md-6">
                                <div class="input-group">
                                    <input type="date" name="saleDate" class="form-control" value="{{ now()->format('Y-m-d') }}">
                                </div>
                            </div>

                            <div class="col-6 ">
                                <div class=" d-flex align-items-center">
                                    <select required name="party_id" id="party_id" class="form-select customer-select choices-select" aria-label="Select Customer">
                                        <option value="">{{ __('Guest') }}</option>
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id }}" data-type="{{ $customer->type }}" data-phone="{{ $customer->phone }}">
                                                {{ $customer->name }}({{ $customer->type }}{{ $customer->due ? ' ' . currency_format($customer->due, currency: business_currency()) : '' }})
                                                {{ $customer->phone }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <a type="button" href="#customer-create-modal" data-bs-toggle="modal"
                                       class="btn btn-danger square-btn d-flex justify-content-center align-items-center">
                                        <img src="{{ asset('assets/images/icons/plus-square.svg') }}" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex align-items-center">
                                    <select required name="warehouse_id" class="form-select choices-select warehouse_id" aria-label="Select Customer">
                                        <option value="">{{ __('Select Warehouse') }}</option>
                                        @foreach ($warehouses as $warehouse)
                                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-payment">
                        <div class="table-responsive">
                            <table class="table table-bordered text-center">
                                <thead>
                                <tr>
                                    <th class="border table-background">{{ __('Image') }}</th>
                                    <th class="border table-background">{{ __('Items') }}</th>
                                    <th class="border table-background">{{ __('Code') }}</th>
                                    <th class="border table-background">{{ __('Batch') }}</th>
                                    <th class="border table-background">{{ __('Unit') }}</th>
                                    <th class="border table-background">{{ __('Sale Price') }}</th>
                                    @if ($modules['allow_product_discount'] ?? false)
                                        <th class="border table-background">{{ __('Discount') }}</th>
                                    @endif
                                    <th class="border table-background">{{ __('Vat %') }}</th>
                                    <th class="border table-background">{{ __('Vat Value') }}</th>
                                    <th class="border table-background">{{ __('Qty') }}</th>
                                    <th class="border table-background">{{ __('Sub Total') }}</th>
                                    <th class="border table-background">{{ __('Action') }}</th>
                                </tr>
                                </thead>
                                <tbody id="cart-list">
                                @include('business::sales.cart-list')
                                </tbody>
                            </table>
                        </div>

                        <div class="hr-container">
                            <hr>
                        </div>

                        <!-- Make Payment Section start -->
                        <div class="grid row py-3 payment-section">
                            <div class="col-sm-12 col-md-6 col-lg-6">
                                <div class="amount-info-container">
                                    <div class="row amount-container  align-items-center mb-2">
                                        <h6 class="payment-title">{{ __('Receive Amount') }}</h6>
                                        <input name="receive_amount" type="number" step="any" id="receive_amount"
                                               min="0" class="form-control receive_amount" placeholder="0">
                                    </div>
                                    <div class="row amount-container  align-items-center mb-2">
                                        <h6 class="payment-title">{{ __('Change Amount') }}</h6>
                                        <input type="number" step="any" id="change_amount" class="form-control"
                                               placeholder="0" readonly>
                                    </div>
                                    <div class="row amount-container  align-items-center mb-2">
                                        <h6 class="payment-title">{{ __('Due Amount') }}</h6>
                                        <input type="number" step="any" id="due_amount" class="form-control" placeholder="0" readonly>
                                    </div>
                                    <div class="row amount-container align-items-start mb-2">
                                        <h6 class="payment-title">{{ __('Payment Type') }}</h6>
                                        @include('business::component.payment_type', ['context' => 'sale', 'payment_types' => $payment_types])
                                    </div>
                                    <div class="row amount-container  align-items-center mb-2">
                                        <h6 class="payment-title">{{ __('Note') }}</h6>
                                        <input type="text" name="note" class="form-control" placeholder="{{ __('Type note...') }}">
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button class="save-btn cancel-sale-btn" data-route="{{ route('business.carts.remove-all') }}">{{ __('Cancel') }}</button>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-6 col-lg-6">
                                <div class="payment-container mb-3 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">
                                            {{ currency_format(0, currency: business_currency()) }}</h6>
                                    </div>
                                    <div class="mb-2 d-flex align-items-center justify-content-between">
                                        <h6>{{ get_business_option('business-settings')['vat_name'] ?? 'Vat' }}</h6>
                                        <h6 class="fw-bold" id="vat_amount_txt">
                                            {{ currency_format(0, currency: business_currency()) }}</h6>
                                    </div>
                                    <div class="row save-amount-container  align-items-center mb-2 d-none">

                                        <h6 class="payment-title col-6">{{ get_business_option('business-settings')['vat_name'] ?? 'Vat' }}</h6>
                                        <div class="col-6 w-100 d-flex justify-content-between gap-2">
                                            <div class="d-flex d-flex align-items-center gap-2">
                                                <select name="vat_id" class="form-select vat_select" id='form-ware'>
                                                    <option value="">{{ __('Select') }}</option>
                                                    @foreach ($vats as $vat)
                                                        <option value="{{ $vat->id }}"
                                                                data-rate="{{ $vat->rate }}">{{ $vat->name }}
                                                            ({{ $vat->rate }}%)
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <input type="number" step="any" name="vat_amount" id="vat_amount"
                                                   min="0" class="form-control right-start-input"
                                                   placeholder="{{ __('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 d-flex align-items-center gap-2">
                                                <select name="discount_type" class="form-select discount_type"
                                                        id='form-ware'>
                                                    <option value="flat">{{ __('Flat') }}
                                                        ({{ business_currency()->symbol }})
                                                    </option>
                                                    <option value="percent">{{ __('Percent (%)') }}</option>
                                                </select>
                                            </div>
                                            <input type="number" step="any" name="discountAmount"
                                                   id="discount_amount" min="0"
                                                   class="form-control right-start-input" placeholder="{{ __('0') }}">
                                        </div>
                                    </div>
                                    <div class="mb-2 shopping-crg-grid">
                                        <h6 class="payment-title ">{{ __('Shipping Charge') }}</h6>
                                        <div class="">
                                            <input type="number" step="any" name="shipping_charge" id="shipping_charge" class="form-control right-start-input" placeholder="0">
                                        </div>
                                    </div>
                                    <div class=" d-flex align-items-center justify-content-between fw-bold">
                                        <div class="fw-bold">{{ __('Total Amount') }}</div>
                                        <h6 class='fw-bold' id="total_amount">
                                            {{ currency_format(0, currency: business_currency()) }}</h6>
                                    </div>
                                    <div class="mb-2 d-flex align-items-center justify-content-between">
                                        <h6>{{ __('Rounding(+/-)') }}</h6>
                                        <h6 id="rounding_amount">
                                            {{ currency_format(0, currency: business_currency()) }}</h6>
                                    </div>
                                    <div class="mb-2 d-flex align-items-center justify-content-between">
                                        <h6 class="fw-bold">{{ __('Payable Amount') }}</h6>
                                        <h6 class="fw-bold" id="payable_amount">
                                            {{ currency_format(0, currency: business_currency()) }}</h6>
                                    </div>

                                </div>
                                @usercan('sales.create')
                                <div class="sale-btn-container">
                                    <button class="submit-btn payment-btn">{{ __('Sale') }}</button>
                                </div>
                                @endusercan
                            </div>
                        </div>
                        <!-- Make Payment Section end -->
                    </div>
                </form>
            </div>
            <div class="main-container">
                <!-- Products Header -->
                <div class="products-header">
                    <div class="container-fluid p-0">
                        <div class="row g-2 w-100 align-items-center ">
                            <div class="w-100">
                                <!-- Search Input and Add Button -->
                                <form action="{{ route('business.sales.product-filter') }}" method="post" class="product-filter product-filter-form w-100" table="#products-list">
                                    @csrf
                                    <div class="search-product">
                                        <div class="d-flex">
                                            <input type="text" name="search" id="sale_product_search" class="form-control search-input" placeholder="{{ __('Scan / search by code or name') }}">
                                            <button class="btn-search">
                                                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M3.75 7.03125H5.625V22.9688H3.75V7.03125ZM13.5938 7.03125H15.4688V22.9688H13.5938V7.03125ZM24.375 7.03125H26.25V22.9688H24.375V7.03125ZM9.375 7.03125H10.3125V22.9688H9.375V7.03125ZM11.25 7.03125H12.1875V22.9688H11.25V7.03125ZM19.6875 7.03125H20.625V22.9688H19.6875V7.03125ZM21.5625 7.03125H22.5V22.9688H21.5625V7.03125ZM7.03125 7.03125H8.4375V22.9688H7.03125V7.03125ZM16.875 7.03125H18.2812V22.9688H16.875V7.03125Z" fill="white"/>
                                                    <path d="M1.40625 9.84375C1.28193 9.84375 1.1627 9.79436 1.07479 9.70646C0.986886 9.61855 0.9375 9.49932 0.9375 9.375V4.6875C0.9375 4.56318 0.986886 4.44395 1.07479 4.35604C1.1627 4.26814 1.28193 4.21875 1.40625 4.21875H6.09375C6.21807 4.21875 6.3373 4.26814 6.42521 4.35604C6.51311 4.44395 6.5625 4.56318 6.5625 4.6875C6.5625 4.81182 6.51311 4.93105 6.42521 5.01896C6.3373 5.10686 6.21807 5.15625 6.09375 5.15625H1.875V9.375C1.875 9.49932 1.82561 9.61855 1.73771 9.70646C1.6498 9.79436 1.53057 9.84375 1.40625 9.84375ZM28.5938 9.84375C28.4694 9.84375 28.3502 9.79436 28.2623 9.70646C28.1744 9.61855 28.125 9.49932 28.125 9.375V5.15625H23.9062C23.7819 5.15625 23.6627 5.10686 23.5748 5.01896C23.4869 4.93105 23.4375 4.81182 23.4375 4.6875C23.4375 4.56318 23.4869 4.44395 23.5748 4.35604C23.6627 4.26814 23.7819 4.21875 23.9062 4.21875H28.5938C28.7181 4.21875 28.8373 4.26814 28.9252 4.35604C29.0131 4.44395 29.0625 4.56318 29.0625 4.6875V9.375C29.0625 9.49932 29.0131 9.61855 28.9252 9.70646C28.8373 9.79436 28.7181 9.84375 28.5938 9.84375ZM6.09375 25.7812H1.40625C1.28193 25.7812 1.1627 25.7319 1.07479 25.644C0.986886 25.556 0.9375 25.4368 0.9375 25.3125V20.625C0.9375 20.5007 0.986886 20.3815 1.07479 20.2935C1.1627 20.2056 1.28193 20.1562 1.40625 20.1562C1.53057 20.1562 1.6498 20.2056 1.73771 20.2935C1.82561 20.3815 1.875 20.5007 1.875 20.625V24.8438H6.09375C6.21807 24.8438 6.3373 24.8931 6.42521 24.981C6.51311 25.069 6.5625 25.1882 6.5625 25.3125C6.5625 25.4368 6.51311 25.556 6.42521 25.644C6.3373 25.7319 6.21807 25.7812 6.09375 25.7812ZM28.5938 25.7812H23.9062C23.7819 25.7812 23.6627 25.7319 23.5748 25.644C23.4869 25.556 23.4375 25.4368 23.4375 25.3125C23.4375 25.1882 23.4869 25.069 23.5748 24.981C23.6627 24.8931 23.7819 24.8438 23.9062 24.8438H28.125V20.625C28.125 20.5007 28.1744 20.3815 28.2623 20.2935C28.3502 20.2056 28.4694 20.1562 28.5938 20.1562C28.7181 20.1562 28.8373 20.2056 28.9252 20.2935C29.0131 20.3815 29.0625 20.5007 29.0625 20.625V25.3125C29.0625 25.4368 29.0131 25.556 28.9252 25.644C28.8373 25.7319 28.7181 25.7812 28.5938 25.7812Z" fill="white"/>
                                                    <path d="M1.40625 14.0625H28.5938V15.9375H1.40625V14.0625Z" fill="white"/>
                                                    </svg>
                                            </button>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-end gap-2 ">
                                            <a data-bs-toggle="offcanvas" data-bs-target="#category-search-modal"
                                               aria-controls="offcanvasRight"
                                               class="btn btn-category w-100">{{ __('Category') }}</a>
                                            <a data-bs-toggle="offcanvas" data-bs-target="#brand-search-modal"
                                               aria-controls="offcanvasRight"
                                               class="btn btn-brand w-100">{{ __('Brand') }}</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="products-container">
                    <div class="p-3 scroll-card">
                        <div class="search-product-card products gap-2 @if (count($products) === 1) single-product @endif product-list-container"
                            id="products-list">
                            @include('business::sales.product-list')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        @php
            $rounding_amount_option = sale_rounding();
        @endphp

        <input type="hidden" id="get_product" value="{{ route('business.products.prices') }}">
        <input type="hidden" value="{{ route('business.carts.index') }}" id="get-cart">
        <input type="hidden" value="{{ route('business.sales.cart-data') }}" id="get-cart-data">
        <input type="hidden" value="{{ route('business.carts.remove-all') }}" id="clear-cart">
        <input type="hidden" id="rounding_amount_option" value="{{ $rounding_amount_option }}">
        <input type="hidden" id="get-by-category" value="{{ route('business.products.get-by-category') }}">
        <input type="hidden" id="cart-store-url" value="{{ route('business.carts.store') }}">
        <input type="hidden" id="selectedProductValue" name="selectedProductValue">
        <input type="hidden" id="asset_base_url" value="{{ asset('') }}">
        <input type="hidden" id="get_stock_prices" value="{{ route('business.products.stocks-prices') }}">
        <input type="hidden" id="warehouse_module_exist" value="{{ moduleCheck('WarehouseAddon') ? 1 : 0 }}">
        @endsection

@push('modal')
    @include('business::sales.calculator')
    @include('business::sales.category-search')
    @include('business::sales.brand-search')
    @include('business::sales.customer-create')
    @include('business::sales.stock-list')
@endpush

@push('js')
   <script src="{{ asset('assets/js/choices.min.js') }}"></script>
   <script src="{{ asset('assets/js/custom/sale.js') . '?v=' . time() }}"></script>
   <script src="{{ asset('assets/js/custom/math.min.js') }}"></script>
   <script src="{{ asset('assets/js/custom/calculator.js') }}"></script>
@endpush