@extends('layouts.app2')



@section('badcome')
<!--  <div class="badecome_div mb10">
<div class="pb10 pt10">
     <a href="{{ url('home') }}" class="badge badge-theam p7">Home </a> <span class="badcome_line"> | </span> <a href="{{ route('usermanagement')}}" class="badge badge-theam p7"> Dashboard </a>
  </div>
</div>-->
@endsection
@section('dynamic_css')
<style>
    .f-600 {
        font-weight: 600;
    }

    .f-13 {
        font-size: 13px !important;
    }

    .v-errors {
        background-color: #eee;
        list-style: disc;
        border: 2px solid red;
        padding: 5px 20px;
        color: darkred;
    }

    /* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 31px;
        margin-top: 6px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 23px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>
@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12 text-right">
            <button type="button" class="btn btn-outline-warning btn-sm waves-effect" data-toggle="modal" data-target="#addDistrictTask" >
                <i class="fa fa-plus"></i> Add District Task
            </button>
        </div>
        <div class="col-md-12 col-md-push-0 p20 bg-white mt10">
            <table class="table table-bordered table-condensed table table-striped table-responsive" style="display: block;">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Task title</th>
                        <th>District Name</th>
                        <th>Target</th>
                        <th>Month, Year</th>
                        <th>Created On</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $i = $district_target->firstItem();
                    $status = [
                    'Incomplete',
                    'Complete'
                    ];
                    @endphp
                    @foreach($district_target AS $value)
                    <tr>
                        <td>{{$i++}}</td>
                        <td>{{$value['task_title']}}</td>
                        <td>{{$value['district_name']}}</td>
                        <td>{{$value['district_target']}}</td>
                        <td>{{$value['month']}},{{$value['year']}}</td>
                        <td>{{$value['created_at']}}</td>
                        <td>{{$status[$value['target_status']]}}</td>
                        <td>
                            <div style="display: flex;width:300px">
                                <a href="" class="btn btn-sm-1 btn-warning district-task-edit-btn" data-toggle="modal" data-target="#addDistrictTask" id="edit_{{$value['id']}}">Edit</a>
                                @if(!$value['employee_targets_id'])
                                <button type="button" class="btn btn-sm-1 btn-danger del-district-task-btn" id="del_{{$value['id']}}">DELETE</button>
                                @endif	

                                <label class="switch">
                                    <input type="checkbox" id="activeDeactive" data-task_id="{{ $value['district_target_id']}}" @if($value['is_active']==1) {{'checked'}} @endif >
                                           <span class="slider"></span>
                                </label>
                                <button type="button" class="btn btn-sm-1 btn-danger view-district-task-btn" id="view_{{$value['id']}}" data-toggle="modal" data-target="#viewDistrictTask">VIEW MORE</button>
                            </div>
                        </td>


                    </tr>
                    @endforeach
                </tbody>
            </table>
            {{$district_target->links()}}
        </div>
    </div>
</div>


<!-- =================================================== ADD MODAL =============================================== -->
<div class="modal fade" id="addDistrictTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-notify modal-info" role="document">
        <!--Content-->
        <div class="modal-content">

            <form id="saveDistrictTargetDetails" action="{{url('/save_district_target')}}" method="POST">
                @csrf
                <!--Header-->
                <div class="modal-header">
                    <p class="heading lead">Add District Task</p>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="white-text">×</span>
                    </button>
                </div>

                <!--Body-->

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12" id="editData">
                            
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" id="saveDistrictTargetDetailsValidation"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="text-upper text_style">Select Task</label>
                            <select name="select_task" id="select_task" class="form-control form-control-sm" required>
                                <option value="">--Select--</option>
                                @foreach($task_masters AS $li)
                                <option value="{{$li->id}}">{{$li->task_title}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="text-upper text_style">Select District</label>
                            <select name="select_district" id="select_district" class="form-control form-control-sm" required>
                                <option value="">--Select--</option>
                                @foreach($districts AS $li)
                                <option value="{{$li->district_code}}">{{$li->district_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="text-upper text_style" id="ex_dip_cer_label">District target</label>
                            <input type="number" name="district_target" id="district_target" class="form-control form-control-sm"/>
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="text-upper text_style" id="ex_dip_cer_label">Target Month</label>
                            <select name="target_month" id="target_month" class="form-control form-control-sm">
                                <option value="">--Select--</option>
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="text-upper text_style" id="ex_dip_cer_label">Target Year</label>
                            <select name="target_year" id="target_year" class="form-control form-control-sm">
                                <option value="">--Select--</option>
                                @foreach($years AS $li)
                                <option value="{{$li}}">{{$li}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="text-upper text_style" id="ex_dip_cer_label">Target Description</label>
                            <textarea name="target_desp" id="target_desp" class="form-control form-control-sm"></textarea>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="text-upper text_style" id="ex_dip_cer_label">Remarks</label>
                            <textarea name="remarks" id="remarks" class="form-control form-control-sm"></textarea>
                        </div>
                    </div>

                </div>

                <!--Footer-->
                <div class="modal-footer">
                    <a type="button" class="btn btn-info waves-effect waves-light" id="district-task-btn">CREATE
                        <i class="fa fa-diamond ml-1"></i>
                    </a>
                    <input type="hidden" name="edit_district_task_id" id="edit_district_task_id" class="form-control">
                    <a type="button" class="btn btn-info waves-effect waves-light" id="district-edit-task-btn">EDIT
                        <i class="fa fa-diamond ml-1"></i>
                    </a>
                    <button type="reset" class="btn btn-warning waves-effect waves-light">RESET</button>
                    <a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">CANCEL</a>
                </div>
            </form>
        </div>
        <!--/.Content-->
    </div>
</div>

<div class="modal fade" id="viewDistrictTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-notify modal-info" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">View District Task Details</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="white-text">×</span>
                </button>
            </div>

            <!--Body-->

            <div class="modal-body">
                <h3 class="text text-info text-center" id="waiting_message">Please wait for a moment....</h3>
                <table class="table table-bordered table-responsive" hidden="" id="task_table">
                    <tr>
                        <th>Task Title</th><td id="title_data"></td>
                    </tr>
                    <tr>
                        <th>Task Description</th><td id="task_description_data"></td>
                    </tr>
                    <tr>
                        <th>District Task Description</th><td id="district_task_description_data"></td>
                    </tr>
                    <tr>
                        <th>District Task Remarks</th><td id="district_task_remarks"></td>
                    </tr>
                    <tr>
                        <th>Remaining Targets</th><td id="remaining_target_data"></td>
                    </tr>
                </table>

            </div>

            <!--Footer-->
            <div class="modal-footer">
                <a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">CANCEL</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<script>
    $(document).ready(function(){
       $('#district-edit-task-btn').attr('hidden','hidden') ;
    });
    $(document).on('click', '#district-task-btn', function () {
        Swal({
            title: 'Are you sure?',
            text: "You are going to create a new district target!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, create it!'
        }).then((result) => {
            $('#saveDistrictTargetDetailsValidation').empty();
            if (result.value) {

                $.post("{{url('/save_district_target')}}", {
                    '_token': $('meta[name=csrf-token]').attr('content'),
                    'task': $('#select_task').val(),
                    'district': $('#select_district').val(),
                    'target': $('#district_target').val(),
                    'month': $('#target_month').val(),
                    'year': $('#target_year').val(),
                    'desp': $('#target_desp').val(),
                    'remarks': $('#remarks').val()
                }, function (j) {
                    if (j['msg'] == "VE") {
                        $('#saveDistrictTargetDetailsValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveDistrictTargetDetailValidationErrors"></ul>');

                        $.each(j.error, function (index, value) {
                            $('#saveDistrictTargetDetailValidationErrors').append('<li>' + value + '</li>');
                        });
                    } else {
                        Swal(j['msg']);
                        $('#saveDistrictTargetDetails').trigger("reset");
                        location.reload();

                    }
                })
                        .fail(function () {
                            Swal("Something went wrong! Please try again.");
                        });

            }
        });
    });
    $(document).on('change', '#target_year', function () {
        if ($('#select_task').val() == "") {
            Swal("Please select a task.");
        } else if ($('#select_district').val() == "") {
            Swal("Please select a district.");
        } else if ($('#target_month').val() == "") {
            Swal("Please select a month.");
        }
        if (($('#select_task').val() != "") && ($('#select_district').val() != "") && ($('#target_month').val() != "")) {
            $.get("{{url('/check_monthly_task')}}", {
                'task': $('#select_task').val(),
                'district': $('#select_district').val(),
                'month': $('#target_month').val(),
                'year': $('#target_year').val()
            }, function (j) {
                if (j.count > 0) {
                    Swal("Same task cannot be alloted to same district for same month.");
                    $('#saveDistrictTargetDetails').trigger("reset");
                }
            });
        }
    });





    $(document).on('click', '#activeDeactive', function (e) {
        e.preventDefault();
        if ($(this).prop("checked") == true) {
            var msg = "You are going to activate this task!";
            var flag = 1;
        } else {
            var msg = "You are going to de-activate this task!";
            var flag = 0;
        }

        var district_task = $(this).data('task_id');
        Swal({
            title: 'Are you sure?',
            text: msg,
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, do it!'
        }).then((result) => {
            if (result.value) {
                $.post("{{url('/active_or_deactive_district_task')}}", {
                    '_token': $('meta[name=csrf-token]').attr('content'),
                    'flag': flag,
                    'task_id': district_task
                }, function (j) {
                    if (j['msgType'] == true) {
                        Swal({
                            title: 'Success',
                            text: j['msg'],
                            type: 'success',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Ok'
                        }).then((result) => {
                            if (result.value) {
                                location.reload();
                            }
                        });
                    } else {
                        toastr.success(j['msg']);
                    }
                })
                        .fail(function () {
                            Swal("Something went wrong! Please try again.");
                        })
            }
        });
    });

    $(document).on('click', '.del-district-task-btn', function () {
        var task_id = $(this).attr('id').split("_");
        Swal({
            title: 'Are you sure?',
            text: "You are about to delete a district target!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {

                $.post("{{url('/delete_district_target')}}", {
                    '_token': $('meta[name=csrf-token]').attr('content'),
                    'task': task_id[1]
                }, function (j) {
                    Swal(j['msg']);
                    location.reload();
                })
                        .fail(function () {
                            Swal("Something went wrong! Please try again.");
                        });

            }
        });
    });

    $(document).on('click', '.view-district-task-btn', function () {
        var id = $(this).attr('id').split("_");
        $.get("{{url('/view_district_task')}}", {
            district_task: id[1]
        }, function (j) {
            for (var i = 1; i < j.length; i++) {
                $('#title_data').text(j[i].task_title);
                $('#task_description_data').text(j[i].task_description);
                $('#district_task_description_data').text(j[i].task_district_description);
                $('#district_task_remarks').text(j[i].task_district_remarks);
                $('#remaining_target_data').text(j[i].remaining_target)
            }
            $('#waiting_message').hide();
            $('#task_table').removeAttr("hidden");
        }).fail(function () {
            Swal("Something went wrong! Please try again.");
        });
    });

    $(document).on('click', '.district-task-edit-btn', function () {
        $('#district-edit-task-btn').removeAttr("hidden");
        $('#district-task-btn').attr('hidden', 'hidden');
        var $row = jQuery(this).closest('tr');
        var $columns = $row.find('td');

        $columns.addClass('row-highlight');

        var values = [];
        jQuery.each($columns, function (i, item) {
            values[i] = "" + item.innerHTML;
        });
        var table = "<table class='table table-responsive table-bordered'>\n\
<tr><th>Task Title</th><td>" + values[1] + "</td></tr>\n\
<tr><th>District Name</th><td>" + values[2] + "</td></tr>\n\
<tr><th>Target</th><td>" + values[3] + "</td></tr>\n\
<tr><th>Month,Year</th><td>" + values[4] + "</td></tr>\n\
</table>";
        $('#editData').html(table);
        var id = $(this).attr('id').split("_");
        $('#edit_district_task_id').val(id[1]);
    });
    
    $(document).on('click', '#district-edit-task-btn', function () {
        Swal({
            title: 'Are you sure?',
            text: "You are going to edit district target!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, edit it!'
        }).then((result) => {
            $('#saveDistrictTargetDetailsValidation').empty();
            if (result.value) {

                $.post("{{url('/edit_district_target')}}", {
                    '_token': $('meta[name=csrf-token]').attr('content'),
                    'task': $('#select_task').val(),
                    'district': $('#select_district').val(),
                    'target': $('#district_target').val(),
                    'month': $('#target_month').val(),
                    'year': $('#target_year').val(),
                    'desp': $('#target_desp').val(),
                    'remarks': $('#remarks').val(),
                    'district_task':$('#edit_district_task_id').val()
                }, function (j) {
                    if (j['msg'] == "VE") {
                        $('#saveDistrictTargetDetailsValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveDistrictTargetDetailValidationErrors"></ul>');

                        $.each(j.error, function (index, value) {
                            $('#saveDistrictTargetDetailValidationErrors').append('<li>' + value + '</li>');
                        });
                    } else {
                        Swal(j['msg']);
                        $('#editData').html("");
                        $('#saveDistrictTargetDetails').trigger("reset");
                        location.reload();

                    }
                })
                        .fail(function () {
                            Swal("Something went wrong! Please try again.");
                        });

            }
        });
    });
</script>
@endsection