@include('components/uheader')
@include('components/usidebar')
<!--  Begin CONTENT AREA  -->
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Task Creation</h2>
        <div class="viewAll mr-4">
            <a href="/employee_dashboard" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
            </a>
            <a href="{{ route('create_project') }}"><button class="btn btn-primary">Create Project</button></a>
            <button data-target="#taskName" data-toggle="modal" class="btn btn-primary" name="reset" type="button">Create Task</button>
        </div>
    </div>

    <div class="layout-px-spacing layout-top-spacing justify-content-center">
        <div class="modal-footer"> </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <table id="zero-config" class="table dt-table-hover" style="width:100%">
                        <thead>
                            <tr class="text-center">
                                <th>Sr. No</th>
                                <th>Project ID</th>
                                <th>Project Name</th>
                                <th>Task Name</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($project as $index => $r)
                                @php
                                    $explode = explode('-',$r->project_id);
                                    $split = $explode[0];
                                    $module_no = "(".$split.")";
                                    $project_name = $explode[1];
                                    $full_id = $module_no.'-'.$project_name;
                                @endphp
                                <tr class="">
                                    <td>
                                        {{++$index}}
                                    </td>
                                    <td class="text-center">{{$full_id}}</td>
                                    <td class="text-center">{{$r->project_name}}</td>
                                    <td class="td-content">
                                        @foreach($task as $t)
                                            @if(isset($t->project_id))
                                                @if($r->project_id == $t->project_id)
                                                    <div class="td-content row text-left pb-2 mb-3 border-bottom row">
                                                        <div class="col-10">
                                                            <span class=""> {{$t->task_name}} </span>
                                                        </div>
                                                        <div class="col-2">
                                                            <a href="javascript:void(0);" class="edit_task edit_designation" data-target="#edit_task" data-toggle="modal" data-task="{{$t->task_name}}" data-task_id="{{$t->task_id}}">
                                                                <img src="design/img/edit.svg" height="18" width="18" />
                                                            </a>
                                                            <a href="javascript:void(0);" class="delete" data-target="#delete_task" data-id="{{$t->id}}" data-toggle="modal" aria-hidden="true">
                                                                <img src="design/img/delete.svg" height="18" width="18" />
                                                            </a>
                                                        </div>
                                                    </div>  
                                                @endif
                                            @endif
                                        @endforeach
                                    </td>
                                    <td>
                                        <div class="leave-action text-center">
                                            <a href="javascript:void(0);" class="edit_project" data-target="#edit_project" data-toggle="modal" data-id="{{$r->id}}">
                                                <img src="design/img/edit.svg" style="width:24px; height:24px;" />
                                            </a>
                                            <a href="javascript:void(0);" class="delete_project ml-3" data-target="#delete_project" data-toggle="modal"  data-id="{{$r->project_id}}">
                                                <img src="design/img/delete.svg" style="width:24px; height:24px;" />
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>        
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- MODAL FOR EDIT PROJECT Name -->
    <div class="modal fade" id="edit_project" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Edit Project Name</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('edit_projectName') }}" method="post" class="form-group">
                        {{csrf_field()}}
                        <label>Edit Project Name:</label>
                        <input type="text" class="db_id form-control" name="edit_projectName" id="edit_projectName">
                        <input type="hidden" name="project_dbId" id="project_dbId">
                            <div class="row justify-content-end mr-3 mt-3 mb-3">
                                <button class="btn btn-success col-3 mr-3" type="submit">Save</button>
                                <button type="button" class="btn btn-primary col-3" data-dismiss="modal">Close</button>
                            </div>
                
                    </form>
                </div>
              
            </div>
        </div>
    </div>

    <!-- MODAL FOR DELETE TASK -->
    <div class="modal fade" id="delete_project" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Are You Want To Delete This Project?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('delete_projectName') }}" method="post" class="form-group">
                    {{csrf_field()}}
                    <input type="hidden" class="delete_projectName" name="delete_projectName">
                            
                    <div class="modal-foote"> 
                        <div class="row justify-content-end mr-3 mt-4">
                            <button class="btn btn-success col-3 mr-3" type="submit">Sure</button>
                            <button type="button" class="btn btn-primary col-3" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal for Create Task Name -->
    <div class="modal fade" id="taskName" tabindex="5" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Create Task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="task_cancel">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                	<form action="{{ route('store_taskName') }}" class="form-group" method="post">
                            {{csrf_field()}}
                        <div class="row">
                            <div class="col-6"> 
                            	<label for="project name">Select Project</label>
                            	<select class="form-control" name="project_id" id="select_projectName">
                            		<option value="Select Project">Select Project</option>
                                    @foreach($project as $project)
                                        <option value="{{$project->project_id}}">{{$project->project_name}}</option>
                                    @endforeach
                            	</select>
                                <p class="text-danger" id="task_error_msg"></p>
                            </div>
                            <div class="col-6">
                                <label for="project name" class="">Task Name</label>
                                <input type="text" class="form-control" id="task_name" placeholder="Enter Task Name" name="task_name">
                                <p class="text-danger" id="error_msg2"></p>
                            </div>
                            <div class="col-6">
                                <label for="project name" class="mt-3">Task ID</label>
                                <input type="text" readonly class="form-control" id="task_id" placeholder="Task ID" name="task_id">
                            </div>
                            <div class="col-6">
                                <label for="project name" class="mt-3">Assign To</label>
                                <select class="form-control" name="assign_to" id="select_employee">
                                    <option value="Select Employee">Select Employee</option>
                                    @foreach($all_employee as $employee)
                                        <option value="{{ $employee->id }}">{{$employee->first_name}} {{$employee->last_name}}({{$employee->id}})</option>
                                    @endforeach
                                </select> 
                                <p class="text-danger" id="error_msg3"></p>
                            </div>
                            <div class="col-6">
                                <label for="project name" class="mt-3">Start Date</label>
                                <input type="date" class="form-control" id="task_startDate" placeholder="Enter Task Name" name="task_startDate">
                                <p class="text-danger" id="error_msg4"></p>
                            </div>
                            <div class="col-6">
                                <label for="project name" class="mt-3">End Date</label>
                                <input type="date" class="form-control" id="task_endDate" placeholder="Enter Task Name" name="task_endDate">
                                <p class="text-danger" id="error_msg5"></p>
                            </div>
                            <div class="col">
                                <label for="project name" class="mt-3">Task Description</label>
                                <textarea class="form-control" id="task_id" placeholder="Enter Task Name" name="task_description"></textarea>
                            </div>
                        </div>
                        <div class="row justify-content-end mt-3">
                        	<div class="col-3">
                        		<button class="btn btn-success" type="submit" id="task_submit">Submit</button>
                        	</div>
                        	<div class="col-3">
                        		<button class="btn btn-primary task_cancel" data-dismiss="modal">Cancle</button>
                        	</div>
                        </div>
                    </form>  
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL FOR EDIT Task Name -->
    <div class="modal fade" id="edit_task" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Edit Task Name</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                <form action="{{ route('edit_taskName') }}" method="post" class="form-group">
                    {{csrf_field()}}
                    <label>Edit Task Name:</label>
                    <input type="text" class="db_id form-control" name="edit_taskName" id="edit_taskName">
                    <br>
                    <label>Edit Task ID:</label>
                    <input type="text" class="db_id form-control" name="edit_taskId" id="edit_taskId" readonly>

                        <div class="row justify-content-end mr-3 mt-3 mb-3">
                            <button class="btn btn-success col-3 mr-3" type="submit">Save</button>
                            <button type="button" class="btn btn-primary col-3" data-dismiss="modal">Close</button>
                        </div>
                    
                </form>
                </div>
                  
            </div>
        </div>
    </div>

    <!-- MODAL FOR DELETE TASK -->
    <div class="modal fade" id="delete_task" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Are You Want To Delete This Task?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('delete_taskName') }}" method="post" class="form-group">
                    {{csrf_field()}}
                    <input type="hidden" class="delete_db_id" name="db_id">

                    
                    <div class="modal-foote"> 
                        <div class="row justify-content-end mr-3 mt-4">
                            <button class="btn btn-success col-3 mr-3" type="submit">Sure</button>
                            <button type="button" class="btn btn-primary col-3" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@include('components/ufooter');
<script>
	$("#project_submit").on('click',function(event){
		if($("#project_name").val() == ''){
			$('#error_msg').text('This field is required*');
			event.preventDefault();
		}
	});

	$(".cancel").on('click',function(){
		$("#project_name").val('');
		$("#error_msg").text('');
        $("#project_startDate").val('');
        $("#project_endDate").val('');
	});

	$("#task_submit").on('click',function(event){
		if($("#select_projectName").val() == 'Select Project'){
			$('#task_error_msg').text('This field is required*');
			event.preventDefault();
		}

		if($("#task_name").val() == ''){
			$('#error_msg2').text('This field is required*');
			event.preventDefault();
		}

        if($("#select_employee").val() == 'Select Employee'){
            $("#error_msg3").text('This field is required*');
            event.preventDefault();
        }
	});

	$(".task_cancel").on('click',function(){
		$("#task_name").val('');
        $("#task_id").val('');

		$("#task_error_msg").text('');
        $("#error_msg3").text('');

	});

	$("#project_name").on('input',function(){
		var project_name = $(this).val();
        var remove_space = project_name.replaceAll(' ', '_');
		var id = $("#project_id").val();
        var split_id = id.split("-");
        var id = split_id[0]+"-";
		$("#project_id").val(id+remove_space);
	});

    $("#select_projectName").on('change',function(){

        var project_name = document.getElementById('select_projectName');
        var name =  project_name.options[project_name.selectedIndex].text;  
        $("#task_name").val(name+"_");
       
    });

    $("#save_data").on('click',function(){
        if($("#project_name").val() == ''){
            var val = {{ isset($project_id->id) ? $project_id->id : 0 }} + 1;
            if(val<10){
                var val = '00'+val;
            }else if(val < 100){
                var val = '0'+val;
            }else{
                var val = val;
            }
            $("#project_id").val(val+"-");
        }
    });




    $(".edit_task").on('click',function(){
        var task_name = $(this).data('task');
        $("#edit_taskName").val(task_name);
        var task_id = $(this).data('task_id');
        $("#edit_taskId").val(task_id);
    });

    $(".delete_task").on('click',function(){
        var task_id = $(this).data('id');
        var db_id = $(".delete_db_id").val(task_id);
    })

    $("#edit_taskName").on('input',function(){

    });

    $("#task_name").on('input',function(){
       var project_id = $("#select_projectName").val();
        var split = project_id.split("-");
        var pro_id = split[0];
        var project_id  = project_id.replace(/[{()}]/g, '');
        @php
            if(empty($task_id->id)){
        @endphp
                var project_name = project_id+"1";
            @php
            }else{
            @endphp
                var task_id = @php echo $task_id->id @endphp + 1;
                var project_name = project_id + task_id;
            @php
            } 
        @endphp;
        var task_name = $("#task_name").val();
        $.ajax({
            type : "get",
            url  : "{{ route('task_list') }}",
            data : {task_name:task_name,project_name:project_name,project_id:project_id,pro_id:pro_id},
            success : function(html){
                $('#task_id').val(html);
            }
        });
    });

    $(".edit_project").on('click',function(){
        var currentRow=$(this).closest("tr");
        var col1=currentRow.find("td:eq(2)").text(); // get current row 1st TD value
        var col2 = $(this).data('id');
        $("#edit_projectName").val(col1);
        $("#project_dbId").val(col2);
    });

    $(".delete_project").on('click',function(){
        var id = $(this).data('id');
        $(".delete_projectName").val(id);
    });


    $("#hide_popup").on('click',function(){
        $('.sidebar-wrapper').css("filter","blur(0px)");
        $('.layout-px-spacing').css("filter","blur(0px");
        $('#approve_modal').hide();
    });
</script>