@extends('layouts.app2')

@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;
    }
    
    ul.pagination{
       border: 1px solid #659fde;
       padding-left: 0px;
       padding: 5px;
    }
    
    ul.pagination li{
      padding: 5px 8px;
      font-size: 15px;

    }
    ul.pagination li.active {
        background-color: #4285f4;
        border-radius: 50%;
        color: white;
        padding: 5px 12px;
    }
    
</style>
@endsection
@section('badcome')

@endsection

@section('content')
<div class="container">
    <div class="row container_layout 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="#addMasterEntry"   id="add-task-btn">
                <i class="fa fa-plus"></i> Add 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">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Task title</th>
                        <th>Task Description</th>
                        <th>Program</th>
                        <th>Created By</th>
                        <th>Created On</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $i = $task_masters->firstItem();
                    $status = ['De-active','Active'];
                    @endphp
                    @foreach($task_masters AS $value)
                    <tr>
                        <td>{{$i++}}</td>
                        <td>{{$value['task_title']}}</td>
                        <td>{{$value['task_description']}}</td>
                        <td>{{$value['program_name']}}</td>
                        <td>{{$value['created_by']}}</td>
                        <td>{{$value['created_at']}}</td>
                        <td>{{$status[$value['task_status']]}}</td>
                        <td>
                            <button type="button" class="btn btn-outline-warning btn-sm waves-effect task-edit-btn" data-toggle="modal" data-target="#addMasterEntry" id="edit_task_{{$value['id']}}">
                                <i class="fa fa-edit"></i> EDIT
                            </button>
                            <button type="button" class="btn btn-primary btn-sm btn-activation" data-toggle="modal" data-target="#modalActivation" id="task_{{$value['id']}}">ACTIVATION</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            {{ $task_masters->links() }}
        </div>
    </div>
</div>


<!-- =================================================== ADD QUALIFICATION DETAILS =============================================== -->
<div class="modal fade right" id="addMasterEntry" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" data-backdrop="false" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-full-height modal-right modal-notify modal-warning" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead" ><span id="form_header">Add</span> 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-->
            <form id="saveTaskDetails" action="{{url('/save_task')}}" method="POST">
                {{ csrf_field() }}
                <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="saveTaskDetailsValidation"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 form-group">
                            <label class="text-upper text_style">Select Program</label>
                            <select name="select_program" id="select_program" class="form-control form-control-sm" required>
                                <option value="">--Select--</option>
                                @foreach($programs AS $li)
                                <option value="{{$li->program_id}}">{{$li->program_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12 form-group">
                            <label class="text-upper text_style" id="ex_dip_cer_label">Task title</label>
                            <input type="text" name="task_title" id="task_title" class="form-control form-control-sm"/>
                        </div>
                        <div class="col-md-12 form-group">
                            <label class="text-upper text_style" id="ex_dip_cer_label">Task Description</label>
                            <textarea name="task_desp" id="task_desp" class="form-control form-control-sm"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 form-group">
                            <input type="hidden" name="edit_task_id" id="edit_task_id" class="form-control" required>
                            <button type="button" class="btn btn-primary btn-sm waves-effect waves-light" id="task-save-btn">Save Details
                                <i class="fa fa-save ml-1"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-sm waves-effect waves-light" id="task-edit-save-btn" hidden>Edit Details
                                <i class="fa fa-save ml-1"></i>
                            </button>
                            <button type="button" class="btn btn-outline-danger btn-sm waves-effect"
                                    data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>

            </form>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: modalSocial-->
<div class="modal fade" id="modalActivation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">

        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title"><i class="fa fa-users"></i> Task Activation</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>

            <!--Body-->
            <div class="modal-body mb-0 text-center">
                <div class="row">
                    <div class="col-md-12" id="saveTaskActivationValidation"></div>
                </div>
                <form method="post" action="" class="form-horizontal" id="saveTaskActivtion">
                    <div class="form-group row">
                        <select class="form-control" name="activation_staus" id="activation_staus" required>
                            <option value="">---SELECT ACTIVATION STATUS---</option>
                            <option value="1">Activate</option>
                            <option value="0">De-Activate</option>
                        </select>
                    </div>
                    <div class="form-group row">
                        <input type="hidden" name="task" id="task" class="form-control" required>
                        <button type="button" class="btn btn-sm btn-primary" id="change-status-btn">SAVE</button>
                    </div>
                </form>

            </div>

        </div>
        <!--/.Content-->

    </div>
</div>
<!--Modal: modalSocial-->
<script>
    $(document).on('click', '#task-save-btn', function () {
        Swal({
            title: 'Are you sure?',
            text: "You are going to create a new task!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, create it!'
        }).then((result) => {
            $('#saveTaskDetailsValidation').empty();
            if (result.value) {

                $.post("{{url('/save_task')}}", {
                    '_token': $('meta[name=csrf-token]').attr('content'),
                    'program': $('#select_program').val(),
                    'task_title': $('#task_title').val(),
                    'task_desp': $('#task_desp').val()
                }, function (j) {
                    if (j['msg'] == "VE") {
                        $('#saveTaskDetailsValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveTaskDetailValidationErrors"></ul>');

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

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

            }
        });
    });
    $(document).on('click', '.btn-activation', function () {
        var id = $(this).attr('id').split("_");
        $('#task').val(id[1]);

    });
    $(document).on('click', '#change-status-btn', function () {
        Swal({
            title: 'Are you sure?',
            text: "You are going to change task activation sttatus!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, change it!'
        }).then((result) => {
            $('#saveTaskActivationValidation').empty();
            if (result.value) {

                $.post("{{url('/save_task_activation')}}", {
                    '_token': $('meta[name=csrf-token]').attr('content'),
                    'status': $('#activation_staus').val(),
                    'task': $('#task').val()
                }, function (j) {
                    if (j['msg'] == "VE") {
                        $('#saveTaskActivationValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveTaskActivationValidationErrors"></ul>');

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

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

            }
        });
    });
    $(document).on('click', '.task-edit-btn', function () {
        $('#task-edit-save-btn').removeAttr("hidden");
        $('#task-save-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;
        });


        
 
        $("#select_program > option").each(function() {
            if(values[3]==this.text){
                 $(this).prop('selected',true)
            }
           
        });
        
        $('#form_header').empty();
        $('#form_header').append('Edit');
        $('#task_title').val(values[1]);
        $('#task_desp').val(values[2]); 
        var id = $(this).attr('id').split("_");
        $('#edit_task_id').val(id[2]);
    });
    
    
    $(document).on('click', '#add-task-btn', function () {
        $('#task-save-btn').removeAttr("hidden");
        $('#task-edit-save-btn').attr('hidden', 'hidden');
        $('#editData').html("");
        $('#form_header').empty();
        $('#form_header').append('Add');
        $('#task_title').val('');
        $('#task_desp').val('');
        $("#select_program > option:selected").prop("selected", false)
    });
    
    
    
    
    $(document).on('click', '#task-edit-save-btn', function () {
        Swal({
            title: 'Are you sure?',
            text: "You are going to edit a task!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, edit it!'
        }).then((result) => {
            $('#saveTaskDetailsValidation').empty();
            if (result.value) {

                $.post("{{url('/edit_task')}}", {
                    '_token': $('meta[name=csrf-token]').attr('content'),
                    'program': $('#select_program').val(),
                    'task_title': $('#task_title').val(),
                    'task_desp': $('#task_desp').val(),
                    'task':$('#edit_task_id').val()
                }, function (j) {
                    if (j['msg'] == "VE") {
                        $('#saveTaskDetailsValidation').append('<ul class="form-group f-600 f-13 v-errors" id="saveTaskDetailValidationErrors"></ul>');

                        $.each(j.error, function (index, value) {
                            $('#saveTaskDetailValidationErrors').append('<li>' + value + '</li>');
                        });
                    } else {
                        $('#saveTaskDetails').trigger("reset");
                        Swal({
                            title: 'Success?',
                            text: j['msg'],
                            type: 'success',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Ok'
                        }).then((result) => {
                            if (result.value) {
                                 location.reload();
                            }
                        });
                        
                    }
                })
                        .fail(function () {
                            Swal("Something went wrong! Please try again.");
                        });

            }
        });
    });
    
    

    
    
</script>
@endsection