@extends('layouts.master')
@section('style')



@endsection

@section('content')
<style>
    .targetQty {
        font-size: 13px;
        height: 26px;
        box-shadow: none;
        width: 90px;
        padding-left: 10px;
        padding-right: 10px;
        border-color: #e9e9e9;
    }

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

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

    .wbtn {
        background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
        color: #282828;
        letter-spacing: 1px;
        margin-left: 10px
    }

    .total-tv {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        line-height: 1
    }


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

    .close-btn-pl {
        top: 13px;
        height: 24px
    }

    .close-btn-pl:after,
    .close-btn-pl:before {
        height: 22px;
        background-color: #717171
    }

    .report-filters {
        right: 55px
    }

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

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

    .pro-header-text {
        line-height: normal;
        padding: 0;
        margin: 0;
        background: none;
    }

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

    .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: 7px;
        padding-top: 7px
    }

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

    .ProListDiv .PR_Name {
        display: table-cell;
        vertical-align: middle;
        font-size: 12px;
        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: 50px;
        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: 8px;
        padding-bottom: 8px;
    }

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

    .set-unit-value .heaing-sec {
        font-size: 14px;
        border-bottom: solid 1px #eaeaea;
        padding-top: 7px;
        padding-bottom: 3px;
    }

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

    .set-unit-value .unit-row .btn-primary {
        font-size: 11px;
        padding: 6px 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;
    }

    .custom-control-label {
        line-height: 2
    }

    .kpi-checkbox {
        padding-top: 10px;
        padding-bottom: 10px;
        border: solid 1px #f0f0f0;
    }

    .kpi-checkbox .btn-primary {
        font-size: 13px;
        padding: 6px 25px;
        line-height: 1;
    }

    .kpi-p-edit {
        margin: 15px 0 0 0;
        font-size: 14px
    }

    .custom-select-sm {
        border-radius: 0;
        width: 200px;
        font-size: 13px;
        height: 32px;
        border-color: #eae9e9;
    }

    .nav-pills .nav-link.active ._cus-val,
    .nav-tabs .nav-link.active ._cus-val {
        color: #fff;
        background-color: #0038ba;
    }

    .nav-pills .nav-link ._cus-val,
    .nav-tabs .nav-link ._cus-val {
        background-color: #e2e9fb;
        color: #7f8998;
        font-size: 10px;
        padding: 3px 4px 2px 4px;
        height: 16px;
        margin-top: 3px;
        margin-left: 5px;
        font-family: proximanova-light, sans-serif;
        border-radius: 5px;
        display: inline-block;
        line-height: 1;
    }

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

    .date-input-set {
        box-shadow: none;
        height: 28px;
        font-size: 13px;
    }

    .PT-5 {
        padding-top: 5px !important
    }
</style>
<input type="text" id="month" hidden value="{{$date}}">
<input type="text" id="emp_region_id" value="{{$employee[0]->region_id}}" hidden>
<input type="text" id="emp_territory_id" value="{{$employee[0]->territory_id}}" hidden>
<input type="text" id="emp_area_id" value="{{$employee[0]->area_id}}" hidden>

<div class="row mt-2 mb-3">
    {{--<div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Employee <span>Target - {{$employee->employee_first_name.' '.$employee->employee_last_name}}</span></h2>
</div>--}}

<div class="col-lg-6 col-md-6 col-sm-6">
    <div class="float-right font14"><strong>Month:</strong> {{date('M, Y', strtotime('01-'.$date))}}</div>
</div>
</div>

<div class="row">
    <div class="col-md-12 mb-30">

        <div class="card PB-20">

            <div class="header" style="padding-top:13px;padding-bottom:13px;">
                <div class="row">
                    <div class="col-12">
                        <h2>Set <span>Expense</span></h2>
                    </div>

                </div>
            </div>
            <div>
                <div class="col-12 PT-10 PB-10">
                    <!-- <table class="table table-hover nowrap" id="employee_expense" style="width:100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Employee Name</th>
                                <th>Designation</th>
                                <th>Region</th>
                                <th>Area/Zone</th>
                                <th>Territory</th>
                                <th>Salary</th>
                                <th>Incentive</th>
                                <th>Commission</th>
                                <th>Vehicle Expense</th>
                                <th>DA/TA</th>
                                <th>Hotel</th>
                                <th>Travel/Fuel</th>
                                <th>Order Bookers</th>
                                <th>Total Ob Expense</th>
                                <th>Misc</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{$employee[0]->employee_id}}</td>
                                <td>{{$employee[0]->NAME}}</td>
                                <td>{{$employee[0]->designation}}</td>
                                <td><input type="text" name="target-value-0"  placeholder="{{$employee[0]->region_name}}" readonly  class="form-control targetQty"></td>
                                <td><input type="text" name="target-value-0" placeholder="{{$employee[0]->territory_name}}" readonly class="form-control targetQty"></td>
                                <td><input type="text" name="target-value-0" placeholder="{{$employee[0]->area_name}}" readonly class="form-control targetQty"></td>
                                <td>{{$employee[0]->employee_salary}}</td>
                                <td><input type="number" name="target-value-0" id="emp_incentive" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_commission" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_vehicle_expense" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_ta_da" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_hotel_expense" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_travle_fuel" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_oder_bookers" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_order_booker_expense" class="form-control targetQty"></td>
                                <td><input type="number" name="target-value-0" id="emp_misc" class="form-control targetQty"></td>
                                <td><button class="btn btn-default" id="set-employee-expense" onclick="addExpenseOfEmployee({{$employee[0]->employee_id}})"><a>Add</a></button></td>
                            </tr>
                        </tbody>
                    </table> -->
                    <div class="row">



                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label mb-10">ID</label>
                                <input type="text" id="" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label mb-10">Last Name</label>
                                <input type="text" id="" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label mb-10">Fathers Name</label>
                                <input type="text" id="" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label mb-10">Email ID</label>
                                <input type="text" id="" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label mb-10">Phone No 1</label>
                                <input type="text" id="" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label mb-10">Phone No 2</label>
                                <input type="text" id="" class="form-control" placeholder="">
                            </div>
                        </div>

                        <div class="col-md-4 PT-5">
                            <div class="form-group">
                                <label class="control-label mb-0">NIC #</label>
                                <input type="text" id="" class="form-control" placeholder="">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="font12 mb-0">Province</label>
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="select Province">
                                    <option selected>Select Province</option>
                                    <option>Province</option>
                                    <option>Province</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="font12 mb-0">City</label>
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="select City">
                                    <option selected>Select City</option>
                                    <option>City</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="font12 mb-0">Segment</label>
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="select Segment">
                                    <option selected>Select Segment</option>
                                    <option>Segment</option>
                                    <option>Segment</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>



            </div>

            <div class="col-md-12 PT-20 text-right">
                <button type="submit" class="btn btn-cancel" onclick="clearValue('target-value-', 'target-gr-'), deleteAllItem()">All Delete</button>
            </div>


        </div>



    </div>


</div>

@endsection

@section('scripts')
<script>
    function saveValue(key, item_id, pref_id, unit_id, trade_price, target_value_id, area_id, date, parent_unit_id) {

        var target_value = $('#' + target_value_id).val();
        var url = `/saveAreaTarget?item_id=${item_id}&key=${key}&pref_id=${pref_id}&unit_id=${unit_id}&trade_price=${trade_price}&target_value=${target_value}&area_id=${area_id}&trade_price=${trade_price}&date=${date}&parent_unit_id=${parent_unit_id}`;

        http('GET', url).then((e) => {
            if (e != 0) {
                self.notification('success', 'Add Successfully!')
                document.getElementById('target-add-btn-' + key).style.display = 'none';
                document.getElementById('target-action-btns-' + key).style.display = 'block';
                document.getElementById('target-action-btns-' + key).innerHTML = e;
            } else
                self.notification('error', 'Something Went Wrong!!')
        });
        // self.notification('error', 'All Inputs Must Fill!');

    }

    function updateValue(id, key, item_id, pref_id, unit_id, trade_price, target_value_id, area_id, date) {

        var target_value = $('#' + target_value_id).val();
        var url = `/updateAreaTarget?id=${id}&item_id=${item_id}&pref_id=${pref_id}&unit_id=${unit_id}&trade_price=${trade_price}&target_value=${target_value}&area_id=${area_id}&trade_price=${trade_price}&date=${date}`;

        http('GET', url).then((e) => {
            if (e != 0) {
                self.notification('success', 'Update Successfully!')
                document.getElementById('target-add-btn-' + key).style.display = 'none';
                // document.getElementById('target-update-btn-'+key).style.display = 'block';
                // document.getElementById('target-action-btns-'+key).innerHTML = e;
            } else
                self.notification('error', 'Something Went Wrong!!')
        });
    }

    function deleteItem(id, key) {
        var url = `/deleteAreaTarget?id=${id}`;
        http('GET', url).then((e) => {
            if (e == 1) {
                self.notification('success', 'Delete Successfully!')
                document.getElementById('target-add-btn-' + key).style.display = 'block';
                document.getElementById('target-action-btns-' + key).style.display = 'none';
                // document.getElementById('target-delete-btn-'+key).style.display = 'none';
            } else
                self.notification('error', 'Something Went Wrong!!')
        });
    }

    function deleteAllItem(areaID, date) {
        var url = `/deleteAllAreaTarget?areaID=${areaID}&date=${date}`;
        http('GET', url).then((e) => {
            if (e == 1) {
                location.reload();
                // self.notification('success', 'Delete Successfully!')
                // document.getElementById('target-add-btn-'+key).style.display = 'block';
                // document.getElementById('target-update-btn-'+key).style.display = 'none';
            } else
                self.notification('error', 'Something Went Wrong!!')
        });
    }

    function calculateGR(trade_price, value, id) {
        document.getElementById(id).innerHTML = (trade_price * value).toLocaleString(undefined, {
            maximumFractionDigits: 2
        });
    }

    function clearValue(valueId, GRId, range = null) {
        if (range == null) {
            document.getElementById(valueId).value = '';
            document.getElementById(GRId).innerHTML = '';
        } else {
            var table = $('#example').DataTable();
            table.destroy();

            for (var i = 0; range > i; i++) {

                var value_id = valueId + '' + i;
                var gr_id = GRId + '' + i;
                document.getElementById(value_id).value = '';
                document.getElementById(gr_id).innerHTML = '';

            }
            table = $('#example').DataTable();
        }
    }

    $('#datepicker2').datepicker({
        autoclose: true,
        minViewMode: 1,
        format: 'mm/yyyy'
    }).on('changeDate', function(selected) {
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.to').datepicker('setStartDate', startDate);
    });



    $('.form-control').on('focus blur', function(e) {
            $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
        })
        .trigger('blur');

    $(document).ready(function() {
        $('#SN-close, .overlay-blure').on('click', function() {
            $('#_subNav-id').removeClass('active');
            $('#blureEffct').removeClass('blur-div');
            $('body').removeClass('no-scroll')
        });
        $('#sidebar-menu').on('click', function() {
            $('#_subNav-id').addClass('active');
            $('#blureEffct').addClass('blur-div');
            $('body').addClass('no-scroll')
        });


        $('#modalClose').on('click', function() {
            $('#modalWindow').removeClass('modalShow');
        });
        $('#modalShow').on('click', function() {
            $('#modalWindow').addClass('modalShow');
        });

        $('#modalExpand-btn').click(function() {
            $("#modalWindow").toggleClass("modalExpand");
            $('i').toggleClass('fa-expand fa-compress');
        });

        $('#pl-close, .overlay-blure').on('click', function() {
            $('#product-cl-sec').removeClass('active');
            $('#blureEffct').removeClass('blur-div');
            $('body').toggleClass('no-scroll');
            $('i').toggleClass('fa-arrow-left  fa-arrow-right')
        });

        $('#productlist01').on('click', function() {
            $('#product-cl-sec').addClass('active');
            $('#blureEffct').addClass('blur-div');
            $('body').toggleClass('no-scroll');
            $('i').toggleClass('fa-arrow-left  fa-arrow-right')

        });

    });

    $(".formselect").select2();

    $(document).ready(function() {
        $('#example, #example2, #example3, #example4').DataTable();
    });


    $('#example2').dataTable({
        "paging": false
    });


    function http(type, url, formData) {
        var self = this;
        return new Promise(function(resolve, reject) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                url: url,
                type: type,
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(e) {
                    resolve(e);
                },
                error: function(err) {
                    console.log(err);
                    if (err.status == 422 || err.status == 500) {
                        self.notification('error', 'Some Error Occured, please try again.');
                    }
                }
            });
        });
    }

    function notification(type, message) {
        var bgColor = (type == 'error') ? 'red' : 'green';
        var el = $('#notifDiv');
        el.fadeIn();
        el.css('background', bgColor);
        el.text(message);
        setTimeout(() => {
            el.fadeOut();
        }, 3000);
    }
</script>



@endsection