@extends('layouts.app')

@section('content')
<!-- BEGIN 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 class="breadcrumb_link" href="{{route('admin.dashboard')}}">HOME</a></li>
                <li><a href="{{route('admin.purchases.index')}}">Purchases List</a></li>
                <li><a href="#">New Purchases</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 Purchase </h2>
                        </div>
                    </div>
                    <div class="col-md-3 text-right"></div>
                </div>
            </div>
            <!-- BEGIN PAGE BAR -->
            <div class="row">
                <div class="col-md-12">
                    <!--THIS IS CONTENT DIV START-->
                    <div class="portlet-body flip-scroll">
                        <form class="form-horizontal form-row-seperated" enctype="multipart/form-data" id="new_purchase">
                            <div class="row form-group">
                                <div class="col-md-12">
                                    <div class="customer_data box">
                                        <div class="col-md-3">
                                            <label>Supplier *</label>
                                            <select name="select_supplier" id="supplier_select" class="form-control select2 validate">
                                                <option value=""></option>
                                                <option value="add_new_supplier">Add New Supplier</option>
                                                @foreach($suppliers as $supplier)
                                                <option value='{{$supplier->id}}'>{{$supplier->fname}} {{$supplier->lname}},{{$supplier->business_name}}</option>
                                                @endforeach
                                            </select>
                                            <p class="text-danger select_supplier hidden" style="margin: 0px"></p>
                                        </div>
                                        <div class="col-md-2">
                                            <label>Purchase Date*</label>
                                            <div class="input-group">
                                                <input type="text" name="invoicedate" id="invoicedate" value="08-06-2025" class="form-control validate calender_popup_date_open" autocomplete="off">
                                                <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" style="margin: 0px"></p>
                                        </div>
                                        <div class="col-md-2">
                                            <label>Due Date*</label>
                                            <div class="input-group" data-date-start-date="+0d"> <input type="text" name="duedate" id="duedate" value="08-06-2025" class="form-control validate calender_popup_date_open" autocomplete="off">
                                                <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" style="margin: 0px"></p>
                                        </div>
                                        <div class="col-md-2">
                                            <label>Reference / PO Number</label>
                                            <input type="text" class="form-control" id="ref_no" onclick="this.select()" name="refno" onkeypress="return block_specialchar(event);"
                                                   placeholder="e.g. Order Number">
                                            <p class="text-danger refno hidden" style="margin: 0px"></p>
                                        </div>
                                        <div class="col-md-2 supplier_address delivery_address">
                                            <label>Supplier Address</label>
                                            <span></span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <!---- Purchase 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="three products_row_header">Description*</div>
                                                    <div class="four products_row_header">Ledger Account*</div>
                                                    <div class="five products_row_header">Qty*</div>
                                                    <div class="four products_row_header">Expiry Date*</div>
                                                    <div class="four products_row_header">Price/Rate*</div>
                                                    <div class="five products_row_header">Buying Unit</div>
                                                    <div class="five products_row_header">Selling Unit</div>
                                                    <div class="five products_row_header">Selling Qty</div>

                                                    <div class="five 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="three products_row">
                                                            @php 
                                                            $standard = "Standard Products";
                                                            $variant = "Variant Products";
                                                            $ingredient = "Ingredients";
                                                            $s = $v = $i = 0;
                                                            @endphp
                                                            <select name="item[]" id="" class="form-control select2 selectitem validate">
                                                                <option></option>
                                                                @foreach($products as $item)
                                                                @if($item->product_type == 1)
                                                                @if($s == 0)
                                                                <option disabled="" style="background: red">{{$standard}}</option>
                                                                @endif
                                                                <option value='{{$item->id}}'>{{$item->name}}</option>
                                                                @php ($s++)
                                                                @endif
                                                                @if($item->product_type == 2 && $item->parent_product_uuid != null)
                                                                @if($v == 0)
                                                                <option disabled="">{{$variant}}</option>
                                                                @endif
                                                                <option value='{{$item->id}}'>{{$item->name}}</option>
                                                                @php ($v++)
                                                                @endif
                                                                @if($item->product_type == 10)
                                                                @if($i == 0)
                                                                <option disabled="">{{$ingredient}}</option>
                                                                @endif
                                                                <option value='{{$item->id}}'>{{$item->name}}</option>
                                                                @php ($i++)
                                                                @endif
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="four products_row">
                                                            <select name="ledger_account[]" class="form-control select2 ledger_account">
                                                                @foreach($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[]" 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="text" name="expirydate[]" id="expirydate" value="08-06-2025" class="form-control validate calender_popup_date_open" autocomplete="off">
                                                        <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>
                                                        <div class="four products_row">
                                                            <input type="number" class="form-control rate validate rete" name="rate[]"  onclick="this.select()" min="1"  autocomplete="off">
                                                        </div>
                                                        <div class="five products_row">
                                                            <select class="form-control buying_unit select2 validate" style="width: 100%;" name="buying_unit[]">
                                                                @foreach($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="five products_row">
                                                            <select class="form-control selling_unit select2 validate" style="width: 100%;" name="selling_unit[]">
                                                                @foreach($buying_unit as $key => $value)
                                                                <option value="{{$key}}">{{$value}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="five products_row">
                                                            <span class="msl_info stock_info" title="">
                                                            </span>
                                                            <input type="number" class="form-control selling_quantity number validate" value=""   name="selling_quantity[]" min="1" autocomplete="off">
                                                        </div>
                                                        <div class="five 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>
                            <!---- Purchase Products --->
                            <!--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="text" name="total_discount" 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="text"  class="form-control overall_flat enter_discount"  value="" onclick="this.select()" placeholder="0.00" name="">
                                                                    </span>
                                                                    <span class="dis_pop_el">
                                                                        <input type="text"  class="form-control overall_percentage enter_percentage" value="" placeholder="0.00" onclick="this.select()" 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="text"  name="adjustment_tax"  onclick="this.select()" 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="net_total" class="net_total_bo" value="0">
                                                            <input type="hidden" name="net_new_total" class="net_new_total_bo" value="0">
                                                            <input type="hidden" name="roundless_amount" class="roundless_amount" 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">

                                                    @php ($get_permission = permission('purchase','full-permission'))
                                                    @if($get_permission)
                                                    <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>
                                                    @endif
                                                    <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>
                                                            <li value="save_and_pdf">Save & Download</li>
                                                        </ul>

                                                    </div>

                                                </div>

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

                                </div>
                            </div>
                            <!--TERMS & CONDITION / FINAL AMOUNT-->
                        </form>
                    </div>
                    <!--THIS IS CONTENT DIV END-->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-modal right modal-fullscreen" id="new_supplier_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
</div>

<!-- Update Contact Modal End-->
<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.supplier.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-supplier-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"/>
<!-- DATE PICKER -->
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<!-- DATE PICKER -->
<link href="{{ asset('css/croppie.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css"/>
<style type="text/css">
    .border-red{
        border-color: red !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.show_border {
        border-color: #29b6d8 !important;
        left: -30px !important;
        top: 35px !important;
    }
    .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;
    }

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

</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.purchase-create')
@stop