@extends('layouts.master')
@section('data-sidebar')
<div id="product-cl-sec">
    <a href="#" id="pl-close" class="close-btn-pl"></a>
    <div class="pro-header-text">New <span>Expense</span></div>

    <div class="pc-cartlist">

        <div class="overflow-plist">

            <div class="plist-content">

                <div class="_left-filter pt-0">

                    <div class="container">

                        <div class="row">

                            <div class="col-12">
                                <div class="card p-20 top_border mb-3">

                                    <h2 class="_head03">Expense <span>Details</span></h2>

                                    <div class="form-wrap p-0">
                                        <form id="emp_expense_form">

                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>Salary</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_salary" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>Incentive</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_incentive" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>Commission</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_commission" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>Vehicle Expense</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_vehicle_expense" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>DA/TA</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_ta_da" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>Hotel</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_hotel_expense" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>Travel/Fuel</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_travle_fuel" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>Misc</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_misc" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 font14 pt-5">
                                                    <strong>DSF</strong>
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="number" id="emp_dsf" class="form-control in_value expense" placeholder="0">
                                                </div>
                                                <div class="col-12">
                                                    <hr class="mt-5 mb-5">
                                                </div>
                                            </div>
                                            <div id="tsm_fields" style="display: none;">
                                                <div class="row">
                                                    <div class="col-md-6 font14 pt-5">
                                                        <strong>Total OB/SRs</strong>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="number" id="emp_oder_bookers" class="form-control in_value expense" placeholder="0">
                                                    </div>
                                                    <div class="col-12">
                                                        <hr class="mt-5 mb-5">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 font14 pt-5">
                                                        <strong>OB/SR Expense</strong>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="number" id="emp_order_booker_expense" class="form-control in_value expense" placeholder="0">
                                                    </div>
                                                    <div class="col-12">
                                                        <hr class="mt-5 mb-5">
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="zsm_fields" style="display: none;">
                                                <div class="row">
                                                    <div class="col-md-6 font14 pt-5">
                                                        <strong>Revenue</strong>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="number" id="zsm_revenue" class="form-control in_value expense" placeholder="0">
                                                    </div>
                                                    <div class="col-12">
                                                        <hr class="mt-5 mb-5">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 font14">
                                                    <strong>Total</strong>
                                                </div>
                                                <div class="col-md-6 text-right">
                                                    <input type="number" id="total_expense" class="form-control in_value expense" placeholder="0">
                                                </div>
                                            </div>

                                        </form>
                                    </div>

                                </div>
                            </div>





                        </div>

                    </div>



                </div>


            </div>

        </div>
    </div>


    <div class="_cl-bottom">

        <button type="button" id="set-employee-expense" onclick="setEmployeeExpense()" class="btn btn-primary mr-2">Add</button>
        <button id="pl-close" type="submit" class="btn btn-cancel mr-2">Cancel</button>

    </div>



</div>
@endsection
@section('content')

<style>
    .dataTable td,
    .modal-body table td {
        padding: 3px 5px;
        vertical-align: middle;
    }

    .dataTable td .btn-default {
        margin-bottom: 0
    }

    .criteria-radio {
        font-size: 14px;
        line-height: 1.9;
        margin-top: 5px;
    }

    .heading {
        font-size: 16px;
        padding-top: 8px;
    }

    .heading span {
        font-family: 'proximanova-light', sans-serif !important;
        font-weight: normal;
    }

    .se_cus-type {
        padding: 0 15px 10px 15px;
    }

    .se_cus-type .form-control,
    .se_cus-type .form-s2 .select2-container .select2-selection--single {
        border: 1px solid #eeeeee;
        background-color: #fff;
    }

    .report-filters {
        right: 55px
    }

    .report-state ._head01 {
        font-size: 15px
    }

    .report-state ._head01 .fa {
        color: #36b4e5;
        margin-right: 5px
    }

    .profile-center .nav-pills .nav-link,
    ._report-Head .nav-pills .nav-link {
        padding: 15px 25px;
        font-size: 16px
    }


    .itemQTY {
        font-size: 12px;
        width: 70px;
        padding: 0px 5px;
        border: solid 1px #e6e6e6
    }

    .itemIMG {
        width: 32px;
        height: 32px;
        border: solid 1px #e5e5e5;
        margin-top: -5px;
        margin-bottom: -5px;
        margin-right: 5px;
        float: left
    }

    .productSearch {
        position: relative;
        margin-top: 10px;
    }

    .productSearch input {
        height: 32px;
        border: solid 1px #eae9e9;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding-left: 30px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .productSearch .fa {
        position: absolute;
        top: 8px;
        left: 8px;
        color: #b5b5b5;
    }

    .AddProductTable {
        padding: 0;
        margin: 0;
        font-size: 13px;
    }

    .AddProductTable tr {
        border-bottom: solid 1px #eeeeee
    }

    .AddProductTable td {
        padding-bottom: 5px;
        padding-top: 5px
    }

    .AddProductTable th {
        background-color: #efefef
    }

    .ProListDiv {
        padding: 0;
        display: table;
    }

    .ProListDiv .PR_Name {
        display: table-cell;
        vertical-align: middle;
        font-size: 13px;
        letter-spacing: 1px;
        line-height: 16px
    }

    .ProListDiv .PrList_img {
        width: 35px;
        height: 35px;
        margin-right: 8px;
        border: solid 1px #e0e0e0
    }

    .AddProductTable .btn-default {
        padding: 5px 8px;
        font-size: 13px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -khtml-border-radius: 0;
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
        color: #fff;
        text-align: center;
        margin: 0;
        line-height: 1;
        min-width: 74px;
        letter-spacing: 1px;
        float: right;
        border: none !important
    }

    .AddDetailPR {
        padding: 25px;
        font-size: 14px
    }

    .AddDetailPR .form-control {
        height: 32px;
        border: solid 1px #dedede;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding: 0px 10px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .AddDetailPR select {
        border-radius: 0;
        padding: 0px 10px;
        height: 32px;
        border: solid 1px #dedede;
        font-size: 14px
    }

    .pc-cartlist {
        padding-bottom: 38px
    }

    .target-tab {
        height: 56px;
        background-color: #ffffff;
        margin-top: 15px;
        position: relative;
    }

    .addnew-btn {
        position: absolute;
        top: 10px;
        right: 0;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px;
    }

    .set-unit-value {
        padding: 0 30px;
    }

    .set-unit-value .tar-qtn {
        background-color: #f1f1f1;
        border-bottom: solid 1px #fff;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .set-unit-value .unit-name {
        background-color: #fafafa;
        padding-top: 16px;
        padding-bottom: 8px;
        line-height: normal
    }

    .set-unit-value .heaing-sec {
        font-size: 13px;
        border-bottom: solid 2px #0038ba;
        padding-top: 13px;
        padding-bottom: 8px;
    }

    .set-unit-value .unit-row {
        font-size: 13px;
        border-bottom: solid 1px #eaeaea;
    }

    .set-unit-value .unit-row .btn-primary {
        font-size: 11px;
        letter-spacing: 1px;
        padding: 5px 12px;
        margin-top: 7px;
        margin-right: 5px;
        width: 65px;
    }

    .set-unit-value .unit-row .red-bg {
        border-color: #f12300 !important;
        width: auto
    }

    .set-unit-value .form-control {
        font-size: 13px;
        border: solid 1px #fff;
        border-bottom: solid 2px #fff;
        height: 28px;
        box-shadow: none;
        line-height: 30px !important;
    }

    .set-unit-value .form-control:focus {
        border: solid 1px #fff !important;
        border-bottom: solid 2px #0038ba !important;
    }

    .target-Head .nav-tabs {
        border-bottom: solid 2px #dcdcdc
    }

    .target-Head .nav-tabs .nav-link,
    .target-Head .nav-tabs .nav-item.show .nav-link,
    .target-Head .nav-tabs .nav-link.active {
        padding: 15px 30px;
        height: 54px;

        box-shadow: none;
        font-size: 15px;
        font-weight: 600;
        color: #777;
        margin-bottom: -2px;
    }

    .target-Head .nav-tabs .nav-link:focus,
    .target-Head .nav-tabs .nav-link:hover {
        color: #282828;
    }

    .target-Head .nav-tabs .nav-item.show .nav-link,
    .target-Head .nav-tabs .nav-link.active {
        color: #0038ba;
    }

    .emp-img-div {
        padding: 5px 0 5px 0;
        display: table;
    }

    .emp-img-div .emp_img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-left: 5px;
        border-radius: 50%;
        border: solid 1px #0038ba;
    }

    .emp-img-div .PR_Name {
        display: table-cell;
        vertical-align: middle;
        letter-spacing: 1px;
        line-height: 16px;
    }

    .targetQty {
        font-size: 13px;
        height: 26px;
        box-shadow: none;
        width: 90px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .topstats {
        margin-top: 5px;
        font-size: 14px;
    }

    .topstats .gary-box {
        line-height: 1;
        background-color: #f9f9f9;
        border-bottom: solid 1px #d1d1d1;
        padding: 10px;
        letter-spacing: 1px;
    }

    .topstats .gary-box span {
        font-family: 'Rationale', sans-serif;
        color: #0038ba;
        font-size: 22px;
        float: right;
        margin-top: -4px;
    }

    .target-val {
        font-size: 13px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .target-val span {
        display: block
    }

    .target-val .tar-val {
        font-family: 'Rationale', sans-serif;
        color: #0038ba;
        font-size: 24px;
        border-bottom: solid 1px #b3b3b3;
        display: inline-block;
        line-height: 1;
        padding-top: 5px;
        padding-bottom: 3px;
    }

    .target-val .tar-val small {
        color: #282828
    }

    .border-right {
        border-right: solid 1px #f3f3f3
    }

    .target-val .unit-title {
        display: block;
        font-size: 15px
    }

    .gr-val {
        font-family: 'Rationale', sans-serif;
        font-size: 18px;
        display: inline-block;
        line-height: 1;
    }


    ._cust_filter {
        width: 210px;
        padding-right: 10px;
    }

    ._cust_filter .select2-container .select2-selection--single {
        height: 32px !important;
    }

    ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 30px;
    }

    ._cust_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 32px;
    }

    .CL-Product {
        padding-right: 10px;
        width: 170px
    }

    .Product-Filter .btn-primary {
        margin: 0px;
        letter-spacing: 1px;
        float: left;
        box-shadow: none
    }

    .table td,
    .table th {
        padding: 8px !important
    }

    .addpr {
        padding: 4px 12px;
        font-size: 12px;
        cursor: pointer;
    }

    .input-group-text,
    .custom-file-label:after {
        border-radius: 0 !important;
    }

    .input-group>.custom-file:not(:first-child) .custom-file-label {
        font-size: 14px;
        letter-spacing: normal;
        height: 37px;
        overflow: hidden;
        line-height: 27px;
    }

    .hide-bulk-button {
        display: none;
    }

    .in_value {
        font-family: 'Rationale', sans-serif !important;
        font-size: 20px !important;
        text-align: right;
        width: 140px;
        margin-left: auto;
        height: 30px !important
    }
</style>
<input type="text" hidden id="previous_date" value={{$date}}></input>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Employees <span> Expense Managment</span></h2>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Expense Managment</span></a></li>
            <li><span>Empoyees</span></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-30">
        <div class="row">
            <div class="col-lg-12">
                <div class="header-tabs">
                    <div class="Product-Filter">
                        <div class="row">
                            <div class="col-12">
                                <div class="CL-Product"><i class="fa fa-calendar-alt"></i>
                                    <input type="text" autocomplete="off" id="month" class="form-control" placeholder="Chose Month">
                                </div>

                                {{-- <div class="_cust_filter">
                                        <div class="form-s2">
                                            <select class="form-control formselect regionListDropDown" name="region"  id="genera_region" required onchange="LoadDistributorsByRegion($(this).val(), 'distributor')" placeholder="Select Region">
                                                <option value="" selected>Select Region</option>
                                            </select>
                                        </div>
                                    </div>--}}
                                {{--<div class="_cust_filter">
                                        <div class="form-s2">
                                            <select class="form-control formselect " name="area"  id="area" required placeholder="Select Area">
                                                <option value="0" selected>Select Area</option>
                                                @foreach($areas AS $area)
                                                    <option value="{{$area->id}}" >{{$area->area_name}}</option>
                                @endforeach

                                </select>
                            </div>
                        </div>--}}

                        <button class="btn btn-primary" onclick="fetchReport()" id="employeeButton"><i class="fa "></i> Set Expense</button>
                        <br>
                        <br>
                    </div>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<div class="card PB-20">
    <div class="header PT-15 PB-15" id="bulk-upload" style="display:none">
        <h2>Assign <span>Expense</span></h2>
        <a data-toggle="modal" data-target="#bulkUpload" class="btn add_button addpr"><i class="fa fa-upload"></i> <span>Bulk Upload</span></a>
        <!-- <a data-toggle="modal" data-target="#bulkUploadOBExpense" id="bulk_upload_ob_expense" class="btn add_button addpr" style="right: 140px;"><i class="fa fa-upload"></i> <span>Bulk Upload OB Expense</span></a> -->

    </div>

    <div class="col-12 PT-15">
        <table class="table table-hover dt-responsive nowrap " id="employeeTable" style="width:100%">
            <thead>
                <tr>
                    <th>Serial No</th>
                    <th>Employee</th>
                    <th>Designation</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</div>
</div>


{{-- modal--}}
<div class="modal fade" id="bulkUpload" tabindex="-1" role="dialog" aria-labelledby="bulkUploadLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content  top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkUploadLabel">Bulk <span>Upload</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">
                <div class="body">
                    <div id="floating-label">
                        <div class="form-wrap p-0">
                            <div class="row pb-10">

                                <div class="col-12">
                                    <div class="input-group">
                                        {{-- <div class="input-group-prepend"> <span class="input-group-text" style="border-radius:0; font-size:14px;background-color:#f6f6f6" id="inputGroupFileAddon01">Upload Excel</span> </div>--}}
                                        <div class="col-12 p-0">
                                            <form method="POST" enctype="multipart/form-data" id="uploadBulkKpi">
                                                {!! Form::hidden('tokenForAjaxReq', csrf_token()) !!}
                                                @csrf
                                                <span style="color:red; padding-bottom:10px; display: block; font-size:14px;"><b>Warning: <span style="font-size:14px;">All Existing Targets Will Be Removed For This Month!</span></b></span>

                                                <span id="form-extra-fields"></span>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text" id="file">Upload Excel</span>
                                                    </div>
                                                    <div class="custom-file">
                                                        <input type="file" name="file" class="custom-file-input" id="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
                                                        <label class="custom-file-label file_name_items" for="inputGroupFile02">Choose
                                                            file</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0" style="background-color: #f6f6f6">
                <div class="col-12">
                    <div class="row">
                        <div class="col-auto p-0"> <a href="#" onClick="downloadSample()" class="btn btn-primary"><i class="fa fa-download"></i> <span>Sample Download</span></a></div>
                        <div class="col p-0 text-right">
                            <button type="button" style="padding: 8px 20px;" class="btn btn-primary saveKpiBulkUpload font13">Upload</button>
                            <button type="submit" class="btn btn-cancel" id="close-modal" data-dismiss="modal" aria-label="Close">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




@endsection