@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<form class="form-horizontal form-row-seperated" id="sales_invoice">
    {{ csrf_field() }}

    <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 class="breadcrumb_link" href="{{url('admin/dashboard')}}">Home</a></li>
                    <li><a class="breadcrumb_link" href="{{url('admin/sales')}}">Sales Invoice List</a></li>
                    <li><a class="breadcrumb_link" href="#">New Sales Invoice</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;">New Sales Invoice</h2>
                                <span class="subtitle"> New sales invoices.</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="actions success_actions" style=""></div>
                        </div>
                    </div>
                </div>
                <!-- BEGIN PAGE BAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!--Page Top Filters Fields-->
                        <div class="row form-group">
                            <div class="col-md-12">


                                <div class="customer_data box">

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

                                        <label>Customer *</label>
                                        <select name="customer" id="customer" class="form-control select2 validate">
                                            <option></option>
                                            <option  value="add_new_customer">Add New Customer</option>
                                            @foreach($data['customers'] as $key => $value)
                                            @if($value != '')
                                            <option value="{{$key}}">{{$value}}</option>
                                            @endif
                                            @endforeach

                                        </select>
                                        <p class="text-danger customer hidden"></p>

                                    </div>
                                    <div class="col-md-2 dates_width">
                                        <label>Invoice 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 class="text-danger invoicedate hidden"></p>
                                    </div>
                                    <div class="col-md-2 dates_width">
                                        <label>Due Date*</label>
                                        <div class="input-group" data-date-start-date="+0d">
                                            <input type="text" name="duedate" id="duedate" 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 class="text-danger duedate hidden"></p>
                                    </div>
                                    <div class="col-md-2">
                                        <label>Reference / PO Number</label>
                                        <input type="text" class="form-control" id="ref_no" name="refno" placeholder="e.g. Order Number" onclick="this.select();">
                                    </div>

                                    <div class="col-md-2 main_address">
                                        <label>Main Address</label>
                                        <span></span>

                                    </div>
                                    <div class="col-md-2 delivery_address">
                                        <label>Delivery Address</label>
                                        <span></span>
                                    </div>


                                </div>
                            </div>
                        </div>
                        <!--THIS IS CONTENT DIV START-->
                        <div class="portlet-body flip-scroll">
                            <!-- BEGIN LIST OF ORDERS -->
                            <!--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">Discount</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" data-row-id="1">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="one products_row del" style="visibility: hidden;" onclick="DeleteRow('1')">
                                                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                                                        </div>

                                                        <div class="two products_row">
                                                            <select name="item[]" class="form-control select2 selectitem validate" productId='0'>
                                                                <option></option>
                                                                @foreach($data['products'] as $key => $value)
                                                                <option value="{{$key}}">{{$value}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="three products_row">
                                                            <select name="ledger_account[]" class="form-control ledger_account validate">
                                                                <option value="1">Sale</option>

                                                            </select>
                                                        </div>

                                                        <div class="five products_row">

                                                            <span class="msl_info" title="">
                                                                <i class="fa fa-info-circle" aria-hidden="true"></i>
                                                            </span>
                                                            <!--<input type="number" onkeydown="quantityValidation(this)" class="form-control quantity number validate" value="1" name="quantity[]" readonly="readonly" id="1">-->
                                                            <input type="number" onInput="checkLengthQty(this)" class="form-control quantity number validate" value="1" name="quantity[]" readonly="readonly" id="1" onClick="this.select();">
                                                            <input type="hidden" readonly value="0" name="unit[]" 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" name="rate[]" readonly="readonly" id="1" onClick="this.select();">
                                                        </div>

                                                        <div class="four products_row">
                                                            <input type="text" class="form-control discount" name="discount[]" readonly="readonly">
                                                            <div class="discount_popup box">
                                                                <span class="dis_pop_el" style="padding-top: 6px">Amount: </span>
                                                                <span class="dis_pop_el">
                                                                    <input type="number"  class="form-control flat enter_discount" value="" placeholder="0" id="1" onClick="this.select();" >
                                                                </span>
                                                                <span class="dis_pop_el">
                                                                    <input type="number"  class="form-control percentage enter_percentage" value="" placeholder="0" id="1">
                                                                </span>

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

                                                            </div>

                                                        </div>

                                                        <div class="four products_row">
                                                            <select name="tax[]" class="form-control select2 tax" id="1">
                                                                <option value="0" selected>No VAT</option>
                                                                <option value="5">VAT</option>

                                                            </select>
                                                        </div>
                                                        <div class="five products_row tax_amount_show">
                                                                {{ number_format(0,$data["decimal_point"]) }}
                                                        </div>
                                                        <input type="hidden" class="tax_amount" name="tax_amount[]">

                                                        <div class="five products_row itemamount_show">{{ number_format(0,$data["decimal_point"]) }}</div>
                                                        <input type="hidden" class="itemamount" name="amount[]">
                                                    </div>
                                                </div>
                                            <div class="modal fade bs-modal in" id="new_varient_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="display: none;"></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-12">
                                                <div class="col-md-8">
                                                    <div class="col-md-6">

                                                        <label>Comments</label>
                                                        <textarea name="comments" class="form-control" rows="7"></textarea>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Terms and Condition</label>
                                                        <textarea name="terms" class="form-control" rows="7"></textarea>

                                                    </div>
                                                </div>


                                                <div class="col-md-4 final_amount">



                                                    <div class="row">
                                                        <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">
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                            <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"
                                                                          id="total_discount_show">
                                                                        0.00
                                                                    </span>

                                                                    <input type="text" name="total_discount" style="visibility: hidden" value="" class="form-control input-small total_discount"/>

                                                                    <div class="overall_discount_popup box">

                                                                        <span class="dis_pop_el" style="padding: 6px 0 0 6px">Amount: </span>
                                                                        <span class="dis_pop_el">
                                                                            <input type="text" class="form-control overall_flat" value="" placeholder="0.00" name="" >
                                                                        </span>
                                                                        <span class="dis_pop_el">

                                                                            <input type="text" class="form-control overall_percentage" value="" placeholder="0.00" name="">
                                                                        </span>

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

                                                                    </div>

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

                                                    <div class="row">
                                                        <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">
                                                        </div>
                                                    </div>

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

                                                            <span class="pull-right net_total_show">
                                                                0.00
                                                            </span>
                                                            <input type="hidden" name="net_total" class="net_total">
                                                            <input type="hidden" name="real_amount" class="real_amount">

                                                        </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">
                                                        <span></span>
                                                        Save
                                                    </button>
<!--                                                    <button class="btn actions action_btn theme_btn_capsule save_add_new  save_invoice pull-right" id =''
                                                            value="save_add_new" name="save_add_new" type="submit" style="display: none;">
                                                        <span></span>
                                                        Save & Add New
                                                    </button>
                                                    <button class="btn actions action_btn theme_btn_capsule save_payment save_invoice pull-right" id  =''
                                                            value="save_payment" name="save_payment" type="submit" style="display: none;">
                                                        <span></span>
                                                        Save & Payment
                                                    </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>
                                                            <li value="save_payment">Save & Payment</li>
                                                        </ul>

                                                    </div>

                                                </div>

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

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

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



<div class="modal fade bs-modal right modal-fullscreen" id="new_customer_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    </div>

<div class="modal fade uplaod_wrap" id="modal_image_uplaod">
        <div class="modal-dialog modal-content uplodImg" style="width: 390px;">
            <form id="upload_pr_pc" class="modal-content" action="{{route('admin.customers.image.store.session') }}
                " enctype="multipart/form-data" method="POST">
                <input type="hidden" name="_token" value="">            <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Upload Photo</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div id="upload-demo" style="width: 360px; position: relative;">
                                <button style="font-size:24px; position: absolute; top: 30px; right: 30px; z-index: 9999;" id="upload1"><i class="fa fa-upload"></i></button>
                            </div>
                            <input type="file" id="upload" value="" name="image" style="display: none;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left"  data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success upload-customer-image">Upload Image</button>
                </div>
            </form>
        </div>
    </div>
@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"/>
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{asset('css/croppie.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css"/>
    
<style>
    .border-red{
        border-color: red !important;
    }

    /*SALES INVOICE CSS CUSTOM*/
    .tabbable-line > .nav-tabs > li.active {
        font-weight: 600;
    }

    .tabbable-line > .nav-tabs > li.active > a {
        color: #36c6d3;
    }

    .error {
        color: red !important;
    }

    .box {
        border: 1px solid #c4c6ca;
        width: 100%;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
        /*overflow: hidden;*/
        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 !important;
        padding: 35px 15px 15px;
        width: 100%;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
        /*overflow: hidden;*/

    }

    .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;
    }

    .dates_width {
        width: 10.6667% !important;
    }

    .main_address span, .delivery_address span {
        display: block;
    }

    .one {
        width: 2.5%;
        font-size: 16px;

    }

    .one i {
        cursor: pointer;
    }

    .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 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;
    }

    .save_email, .save {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-right: 0;
    }
    .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%;
    }
    .select2-selection--single {
        border-radius: 5px !important;
    }

    .box.popup_select {
        border: 1px solid #37c6d3;
    }
    span.select2-selection__clear{
      display: none;
     }


     /*** //FORM RADIO BUTTON// ***/
    .frm_radioBtn {
        display: block;
        position: relative;
        padding-left: 34px;
        margin-bottom: 12px;
        cursor: pointer;
        line-height: 16px;
        font-weight: normal !important;
        font-size: 15px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .frm_radioBtn input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 16px;
        width: 16px;
        background-color: #eee;
        border-radius: 50%;
    }
    .frm_radioBtn:hover input ~ .checkmark {background-color: #ccc;}
    .frm_radioBtn input:checked ~ .checkmark {background-color: #37c6d3;}
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .frm_radioBtn input:checked ~ .checkmark:after {display: block;}
    .frm_radioBtn .checkmark:after {
        top: 4px;
        left: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }
    .nav .supreme_subHead {
        font-size: 17px;
        font-weight: 600;
        padding-left: 0;
        padding-bottom: 15px;
        color: #333333;
    }
    .modal-body .supreme_box {margin-bottom: 8px;}
    /*** //FORM RADIO BUTTON// ***/

    /*** //FORM CHECK BOX// ***/
    .frm_checkBox {
        display: block;
        position: relative;
        padding-left: 34px;
        margin-bottom: 12px;
        cursor: pointer;
        line-height: 16px;
        font-weight: normal !important;
        font-size: 15px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .frm_checkBox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .checkedBox {
        position: absolute;
        top: 0;
        left: 0;
        height: 16px;
        width: 16px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
    }
    .frm_checkBox:hover input ~ .checkedBox {background-color: #fff;}
    .frm_checkBox input:checked ~ .checkedBox {background-color: #ffffff;}
    .checkedBox:after {
        content: "";
        position: absolute;
        display: none;
    }
    .frm_checkBox input:checked ~ .checkedBox:after {display: block;}
    .frm_checkBox .checkedBox:after {
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid #37c6d3;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    /*** //FORM CHECK BOX// ***/
    .total_box .nav .supreme_subHead {padding-bottom: 0;}
    .priceRight {text-align: right;right: 12px;}
    .supreme_box .form-group {margin-bottom: 0;}
    .total_box .priceRight span {
        font-weight: 600;font-size: 15px;
    }
    .supreme_subHead .sub_choosetxt {
        font-size: 15px;
        color: #37c6d3;
    }
    .tab-content {padding: 0 20px 0 10px;}
    .supreme_box.total_box{padding-right: 20px;}
    #new_varient_model .pop_heading {font-size: 20px !important;color: #333;}
    #new_varient_model .close.close_popup {color: #63c4d1 !important;}
    #new_varient_model .modal-body {padding: 15px;}
    .select_save_option {width: 27px;border-radius: 0 5px 5px 0;}
    
    
    .display_pic:hover .overlay-img {
    display: block;
}

.display_pic .overlay-img {
    position: absolute;
    background: #eee;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    opacity: 0.7;
    text-align: center;
    padding: 58px 0;
    display: none;
}

.display_pic .overlay-img {
    color: #999;
    font-size: 30px;
}
.discount_popup.box{
    border-color: #29b6d8 !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>
<script src="{{asset('js/croppie.js')}}"></script>
@include('admin.js.sale-create')

@stop