@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a  href="{{ route('admin.dashboard') }}">Home</a></li>
                <li><a  href="#">Cash and Bank List</a></li>
                <li><a  href="{{ route('admin.spend-money.index') }}">Spend Money</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            <div class="portlet-title page_heading">
                <div class="row">
                    <div class="col-md-9">
                        <div class="caption">
                            <h2 style="font-weight: 600; margin-top: 0;">Spend Money</h2>
                        </div>
                    </div>
                    <div class="col-md-3 text-right"></div>
                </div>
            </div>
            <!-- BEGIN PAGE BAR -->
            <div class="row">
                <!--                <div class="col-sm-12">

                                    <div class=" alert alert-success" style="background-color: #36c6d3 !important;">
                                        <p style="color: #fff;">message</p>
                                    </div>

                                </div>-->
                <div class="col-md-12">
                    <!--THIS IS CONTENT DIV START-->
                    <div class="portlet-body flip-scroll">
                        <form class="form-horizontal form-row-seperated" method="post" id="new_purchase">
                            <!--CUSTOMER-->
                            <div class="row form-group">
                                <div class="col-md-12">


                                    <div class="customer_data box finance_data spend_money">

                                        <div class="row" style="margin-bottom: 20px;">
                                            <div class="col-md-2">

                                                <label>Spending From *</label>
                                                <select name="source_acc" id="source_acc" class="form-control select2 validate">
                                                    <option value=""></option>
                                                    @foreach($data['banks'] as $key => $bank)
                                                    <option value="{{$key}}">{{$bank}}</option>
                                                    @endforeach
                                                </select>
                                                <p style="margin: 0;" class="text-danger source_acc hidden"></p>
                                            </div>

                                            <div class="col-md-2">
                                                <input type="hidden" name="to_contact" value="0" class="to_contact">
                                                <label>To *</label>
                                                <select name="select_supplier" id="spending_to" class="form-control select2 validate">
                                                    <option value=""></option>
                                                    <option value="new_contact">New Contact</option>
                                                    @foreach($data['suppliers'] as $key => $supplier)
                                                    <option value="{{$supplier->id}}">{{ucfirst($supplier->fname)}} {{ucfirst($supplier->lname)}} ,{{ucfirst($supplier->business_name)}}</option>
                                                    @endforeach
                                                </select>
                                                <p style="margin: 0;" class="text-danger select_supplier hidden"></p>
                                            </div>

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

                                                <label>Spending Method *</label>
                                                <select name="spending_method" id="spending_method"
                                                        class="form-control select2 validate">
                                                    <option value=""></option>
                                                    @foreach($data['transfer_methods'] as $key => $value)
                                                        <option value="{{ $key }}" >{{ $value }}</option>
                                                    @endforeach

                                                </select>
                                                <p style="margin: 0;" class="text-danger spending_method hidden"></p>
                                            </div>

                                            <div class="col-md-2">
                                                <label>Date*</label>

                                                <div class="input-group">
                                                    <input type="text" name="invoicedate" id="invoicedate" value="15-03-2025" class="form-control validate calender_popup_date_open"/>
                                                    <span class="input-group-btn">
                                                        <button class="btn default custom_calender custom_calender_date_open" type="button" style="margin: 0">
                                                            <i class="fa fa-calendar"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                                    <p style="margin: 0;" class="text-danger invoicedate hidden"></p>

                                            </div>

                                            <div class="col-md-4">
                                                <label>Transaction Description</label>
                                                <input type="text" class="form-control trans_description"
                                                       name="trans_description">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2 cheque_number_col" style="display: none;">
                                                <label>Cheque Number*</label>
                                                <input type="text" class="form-control cheque_number" name="cheque_number">
                                                <p style="margin: 0;" class="text-danger cheque_number hidden"></p>
                                            </div>
                                            <div class="col-md-2">
                                                <label>Reference</label>
                                                <input type="text" class="form-control reference" name="refno">
                                            </div>
                                            <div class="col-md-2 cheque_number_col" style="display: none;">
                                                <label>Cheque Date*</label>

                                                <div class="input-group  date date-picker"
                                                     data-date-format="dd-mm-yyyy">
                                                    <input type="text" name="cheque_date" id="cheque_date" value="15-03-2025" class="form-control cheque_date calender_popup_date_open"/>
                                                    <span class="input-group-btn">
                                                        <button class="btn default calender custom_calender_date_open" type="button" style="margin: 0"><i class="fa fa-calendar"></i></button>
                                                    </span>
                                                </div>
                                                <p style="margin: 0;" class="text-danger cheque_date hidden"></p>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                            <!--PRODUCTS-->
                            <div class="row form-group">
                                <div class="col-md-12">
                                    <div class="products box">

                                        <div class="header_product">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="one products_row_header">&nbsp;</div>
                                                    <div class="two products_row_header">Description*</div>
                                                    <div class="three products_row_header">Ledger Account*</div>
                                                    <div class="five products_row_header">Qty*</div>
                                                    <div class="four products_row_header">Price/Rate*</div>
                                                    <div class="four products_row_header">Buying Unit</div>

                                                    <div class="four products_row_header">VAT Rate</div>
                                                    <div class="five products_row_header">VAT Amount</div>

                                                    <div class="five products_row_header">Total</div>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="products_wrap">

                                            <div class="products" exists-row="0">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="one products_row del"
                                                             style="visibility: hidden;">
                                                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                                                        </div>
                                                        <div class="two products_row">
                                                            <select name="item[]" id="" class="form-control select2 selectitem validate">
                                                                <option></option>
                                                                <option value="add_new">Add New</option>
                                                                @foreach($data['products'] as $key => $item)
                                                                <option value='{{$item->id}}'>{{ucfirst($item->name)}} - {{$item->item_code}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="three products_row">
                                                            <select name="ledger_account[]" class="form-control select2 ledger_account">
                                                                @foreach($data['ledger_accounts'] as $key => $value)
                                                                <option value="{{$key}}">{{$value}}</option>
                                                                @endforeach

                                                            </select>
                                                        </div>

                                                        <div class="five products_row">
                                                            <span class="msl_info stock_info" title="">
                                                                <i class="fa fa-info-circle" aria-hidden="true"></i>
                                                            </span>
                                                            <input type="number" class="form-control quantity number validate" value="{{number_format(1,$float_number)}}" onclick="this.select()" name="quantity[]" min="1" autocomplete="off">
<!--                                                            <input type="hidden" readonly value="0" name="unit[]" id="" class="form-control unit">
                                                            <input type="hidden" readonly name="cost[]" class="form-control cost" value="0">-->

                                                        </div>
                                                        <div class="four products_row">
                                                            <input type="number" class="form-control rate validate rete" name="rate[]" min="1" autocomplete="off">
                                                        </div>
                                                        <div class="four products_row">
                                                            <select class="form-control buying_unit select2 validate" style="width: 100%;" name="buying_unit[]">
                                                                @foreach($data['buying_unit'] as $key => $value)
                                                                <option value="{{$key}}">{{$value}}</option>
                                                                @endforeach
                                                            </select>
<!--                                                            <input type="hidden" name="measuringunit_qty[]" class="form-control measuringunit_qty">
                                                            <input type="hidden" name="select_measure[]" class="form-control select_measure">
                                                            <input type="hidden" name="subunit_qty[]" class="form-control subunit_qty">

                                                            <input type="hidden" name="subunit[]" class="form-control subunit">
                                                            <input type="hidden" name="input_buy_unit[]" class="form-control input_buy_unit">-->

<!--                                                            <input type="text" style="display: none;" class="form-control discount" name="discount[]">
                                                            <div class="discount_popup box">
                                                                <span class="dis_pop_el" style="padding-top: 6px">Amount: </span>
                                                                <span class="dis_pop_el">
                                                                    <input type="text" class="form-control flat" placeholder="0.00">
                                                                </span>
                                                                <span class="dis_pop_el">
                                                                    <input type="text" class="form-control percentage" placeholder="0.00">
                                                                </span>
                                                                <span class="dis_pop_el">%</span>
                                                            </div>-->
                                                        </div>

                                                        <div class="four products_row">
                                                            <select name="tax[]" id="" class="form-control select2 tax">
                                                                @foreach($taxes as $item)
                                                                <option value='{{$item["tax_name"]}}' data-tax-perncetage="{{$item["tax_rate"]}}">{{$item["tax_name"]}}</option>";
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="five products_row tax_amount_show">
                                                            {{number_format(0,$float_number)}}
                                                        </div>
                                                        <input type="hidden" class="tax_amount" value="0" name="tax_amount[]">
                                                        <div class="five products_row itemamount_show">{{number_format(0,$float_number)}}</div>
                                                        <input type="hidden" class="itemamount" value="0" name="amount[]">
                                                        <input type="hidden" class="sub_amount" value="0" name="sub_amount[]">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>

                            <!--TERMS & CONDITION / FINAL AMOUNT-->
                            <div class="row form-group">
                                <div class="col-md-12">
                                    <div class="final_box box">

                                        <div class="row">
                                            <div class="col-md-8"></div>
                                            <div class="col-md-4 final_amount">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-6">
                                                            <label class="pull-left"> Subtotal </label>
                                                        </div>
                                                        <div class="col-md-6">

                                                            <span class="pull-right subtotal_show" id="subtotal">
                                                                0.00
                                                            </span>
                                                            <input type="hidden" class="subtotal" name="subtotal" value="0">
                                                            <input type="hidden" class="subtotalnew" name="subtotal_new" value="0">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <!--                                                        <div class="col-md-6">
                                                                                                                    <label class="pull-left"> Discount </label>
                                                                                                                </div>-->
                                                        <div class="col-md-6">
                                                            <span class="pull-right">

                                                                <span class="pull-right total_discount_show"
                                                                      style="display: none;"
                                                                      id="total_discount_show">

                                                                </span>

                                                                <input type="hidden" name="total_discount" min="0" class="form-control input-small total_discount" readonly=""/>

                                                                <!--                                                                <div class="discount_popup box show_border" style="display: none;">

                                                                                                                                    <span class="dis_pop_el" style="padding: 6px 0 0 6px">Amount: </span>
                                                                                                                                    <span class="dis_pop_el">
                                                                                                                                        <input type="number" min="1" class="form-control overall_flat enter_discount"  value="" placeholder="0.00" name="">
                                                                                                                                    </span>
                                                                                                                                    <span class="dis_pop_el">
                                                                                                                                        <input type="number" min="1" class="form-control overall_percentage enter_percentage" value="" placeholder="0.00"  name="">
                                                                                                                                    </span>

                                                                                                                                    <span class="dis_pop_el">%</span>

                                                                                                                                </div>-->

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



                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-6">
                                                            <label class="pull-left"> Total Tax </label>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <span class="pull-right total_tax_amount_show" >
                                                                0.00
                                                            </span>
                                                            <input type="hidden" class="total_tax_amount" name="total_tax_amount">
                                                            <input type="hidden" class="total_new_tax_amount" name="total_new_tax_amount">
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="row adjustment_tax">
                                                    <div class="col-md-12">
                                                        <div class="col-md-6">
                                                            <label class="pull-left"> Adjustment on Tax </label>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <input type="number" min="1" name="adjustment_tax" class="adjustment_tax_2 form-control input-small pull-right input_adjustment_tax">
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="row total_final">
                                                    <div class="col-md-12">
                                                        <div class="col-md-6">
                                                            <label class="pull-left"> Total </label>
                                                        </div>
                                                        <div class="col-md-6">

                                                            <span class="pull-right net_total_show_bo">
                                                                0.00
                                                            </span>
                                                            <input type="hidden" name="roundless_amount" class="roundless_amount" value="0">
                                                            <input type="hidden" name="net_total" class="net_total_bo" value="0">
                                                            <input type="hidden" name="net_new_total" class="net_new_total_bo" value="0">

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

                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-4"></div>

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

                                                    <button class="btn theme_btn_capsule pull-right select_save_option" type="button">
                                                        <i class="fa fa-angle-down"></i>
                                                    </button>
                                                    <button class="btn actions action_btn theme_btn_capsule save save_invoice pull-right" id ='active_option'
                                                            value="save" name="submitted" type="submit" data-value="save">
                                                        <span></span>
                                                        Save
                                                    </button>
                                                    <button class="btn action_btn theme_btn_round cancel pull-right"
                                                            type="button"
                                                            onclick="history.go(-1);
                                                                    return false">
                                                        Cancel
                                                    </button>

                                                    <div class="box popup_select" style="display: none;">

                                                        <ul>
                                                            <li value="save">Save</li>
                                                            <li value="save_add_new">Save & Add New</li>
                                                        </ul>

                                                    </div>

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

                                </div>
                            </div>
                        </form>
                    </div>
                    <!--THIS IS CONTENT DIV END-->
                </div>
            </div>
        </div>
    </div>
</div>

@include('admin.spend-money.modal.product-create')
@include('admin.spend-money.modal.supplier-contact')
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<style>
    .breadcrumbs ul {
        padding-left: 21px !important;
    }
    .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
        color: #6B6E74;
    }
    .error {
        color: red !important;
    }
    .box {
        border: 1px solid #c4c6ca;
        width: 100%;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
        padding: 0;
    }
    .final_box.box {
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }
    .products.box {
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }
    .customer_data, .final_box {
        border: 1px solid #c4c6ca;
        padding: 20px 15px 15px;
        width: 100%;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }
    .customer_data {
        overflow: hidden;
    }
    .final_box {
        padding: 20px 0;
    }
    .calender {
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        border: 1px solid #c4c6ca !important;
    }
    #duedate, #invoicedate {
        border-right: none !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .customer_data label, .final_box label {
        color: #3d424e;
        font-weight: 600;
    }
    .final_amount label {
        margin-bottom: 20px;
    }
    .tax {
        font-weight: 400 !important;
    }
    .main_address span, .delivery_address span {
        display: block;
    }
    .one {
        width: 2.5%;
        font-size: 16px;

    }
    .one i {
        cursor: pointer;
        margin: 10px 0 0;
    }
    .two {
        width: 29%;
    }
    .three {
        width: 19%;
    }
    .four {
        width: 9.5%;
        text-align: right;
    }
    .five {
        width: 7%;
        text-align: right;
        position: relative;
    }
    .four input, .five input {
        text-align: right;
    }
    .products_row_header {
        float: left;
        padding: 12px 5px;
        border-right: 1px solid #8a8e94;
        color: #FFFFFF;
    }
    .products_row {
        float: left;
        padding: 12px 5px;
        position: relative;
    }
    .products {
        border-bottom: 1px solid #e5e7ea;
        color: #9da0a6;
        line-height: 22px;
    }
    .products_row.one {
        text-align: center;
    }
    .products_row_header:last-child {
        border-right: none;
    }
    .header_product {
        background: #636871;
    }
    input, textarea {
        border: 1px solid #c4c6ca !important;
        border-radius: 5px !important;
        resize: none;
    }
    .products_wrap > .products:nth-of-type(2n+1) {
        background-color: #f5f6f7 !important;
    }
    .select2 {
        text-align: left !important;
    }
    .msl_info {
        position: absolute;
        left: 10px;
        top: 16px;
        font-size: 16px;
        color: #268794;
    }
    .msl_info.red {
        color: red;
    }
    .action_btn {
        margin-right: 5px;
        border-radius: 5px !important;
        padding: 4px 0 4px 16px;
        width: auto;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .action_btn.cancel {
        border-radius: 5px !important;
    }
    .drop {
        margin-right: 5px;
        padding: 4px 8px;
        width: auto;
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }
    .save_email {
        display: none;
    }
    .popup_select {
        position: absolute;
        right: 127px;
        width: 12%;
        top: 0;
        border-radius: 5px !important;
    }
    .popup_select ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .popup_select ul li {
        border-bottom: 1px solid #eee;
        padding: 5px 10px;
        cursor: pointer;
        background: #37c6d3;
        color: #ffffff;
    }
    .popup_select ul li:last-child {
        border-bottom: none;
    }
    .popup_select ul li:hover {
        opacity: 0.9;
        border-radius: 5px
    }
    .discount_popup {
        position: absolute;
        left: 6px;
        width: 306px;
        top: 50px;
        border-radius: 5px !important;
        z-index: 1;
        padding: 10px 0;
        display: none;
        background-color: #FFF;
    }
    .overall_discount_popup {
        position: absolute;
        right: 14px;
        width: 100%;
        top: 37px;
        border-radius: 5px !important;
        z-index: 1;
        padding: 10px 0;
        display: none;
        background-color: #FFF;
    }
    .flat, .percentage, .overall_flat, .overall_percentage {
        width: 100%;
        text-align: right;
    }
    .dis_pop_el {
        float: left;
        display: inline;
        width: 26%;
        margin-right: 10px;

    }
    .dis_pop_el:last-child {
        width: 6%;
        padding-top: 7px;
    }
    .actions.theme_btn_capsule {
        width: 12.5%;
    }
    /*SALES INVOICE CSS CUSTOM*/
    /*POPUP STYLES*/
    #new_customer input, #new_customer textarea {
        border: none !important;
        border-bottom: 1px solid #c2cad8 !important;
        border-radius: 0 !important;
    }
    .caption h2 {
        font-size: 40px;
        font-weight: 500;
        margin: 0;
        margin-bottom: 0px;
        margin-bottom: 20px;
    }
    .overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9;
    }
    span.select2-selection__clear{
        display: none;
    }

    .select_save_option{
        width: 30px !important;
        border-radius: 0 5px 5px 0 !important;
    }

    .finance_data.spend_money {
    border-color: #ddd !important;
}
</style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/general.js')}}" type="text/javascript"></script>
@include('admin.js.spend-money')
@stop