@extends('layouts/layout')
@section('title', 'Tasks')
@push('style')
@endpush

@section('content')
@if ($message = Session::get('success'))
@include('sweetalert::alert')
@endif
<!-- page content -->
<div class="" role="main">
    <div class="">
        <div class="row">
            <div class="col-md-12 col-sm-12 mt-2">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Activity Tasks - @if(isset($activities[0]))
						{{$activities[0]->Activity}}
					@else
						
					@endif</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content mt-0 p-0">
                        <form action="{{url('tasks')}}" method="post" class="mb-3">
                            @csrf
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="form-group">
                                        <label class="mb-1">Task Name</label>
                                        <input type="text" id="task_name" name="task_name" autocomplete="off"
                                            class="form-control" placeholder="Enter Task Name">
                                        <span id="task_name_error" class="text-danger d-inline-block"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                    <div class="form-group">
                                        <label class="mb-1">Answer Type</label>
                                        <select class="select2 form-control" name="task_type" id="task_type" data-toggle="select2">
                                            <option value="" selected>Select Answer Type</option>
                                            <option value="Input">Input</option>
                                            <option value="Dropdown">Dropdown</option>
                                        </select>
                                        <span id="task_type_error" class="text-danger d-inline-block"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                    <div class="form-group">
                                        <label class="mb-1">Task Status</label>
                                        <select class="select2 form-control" name="status" id="status" data-toggle="select2">
                                            <option value="" selected>Select Status</option>
                                            <option value="1">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                        <span id="status_error" class="text-danger d-inline-block"></span>
                                    </div>
                                </div>
                            </div>
                            <!--  -->
                            <div class="row multiple d-none">
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                    <div class="form-group">
                                        <label class="mb-1">Answer</label>
                                        <input type="text" class="form-control" id="" name="option[]"
                                            placeholder="Enter Answer">
                                    </div>
                                </div>

                                <!-- <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 mt-2">
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <input class="custom-checkbox" type="hidden" id="checkbox"
                                                name="checkbox[]" value="0">
                                            <label for="checkbox">CheckBox</label>
                                        </div>
                                    </div>
                                </div> -->

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <button type="button" id="addEmail" class="btn btn-primary mt-4">Add
                                            More</button>
                                        <button type="button" id="removeEmail"
                                            class="btn btn-warning mt-4">Remove
                                            One</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row multiple d-none">
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 mt-2">
                                    <div class="form-group">
                                        <label  class="mb-1" for="exampleInputEmail1">Answer</label>
                                        <input type="text" class="form-control" id="" name="option[]"
                                            placeholder="Enter Answer">
                                    </div>
                                </div>

                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 mt-2">
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <input class="custom-checkbox" type="hidden" name="checkbox[]"
                                                value="1">
                                            <!-- <label for="checkbox">CheckBox</label> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row multiple d-none">
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 mt-2">
                                    <div id="more-email"></div>
                                </div>
                                <div class="col-md-2">
                                    <div class="checkbox_other"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 offset-md-5 mt-4">
                                    <input type="hidden" id="activity_name" name="activity_name" autocomplete="off"
                                        class="form-control" value="{{$id}}">
                                        <a href="javascript:history.back()" class="btn btn-primary btn-round">Back</a>
                                    <input type="submit" class="btn btn-success btn-round btn-primary"
                                        name="create_template" id="create_template" value="Submit" />
                                    <!-- <button type="submit" class="btn btn-round btn-primary">Submit</button> -->
                                </div>
                            </div>
                        </form>
                        <div class="col-md-12 col-sm-12 ">
                            <div class="">
                                <div class="">
                                    <table id="datatable-fixed-header"
                                        class="table table-striped table-bordered text-center" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Task Name</th>
                                                <th>Answer Type</th>
                                                <th>Task Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($activities as $sms)
                                            @php
                                                                        $i = "Active"
                                                    @endphp
                                                    @php
                                                                        $j = "Inactive"
                                                    @endphp 
                                                <tr>
                                                    <td>{{$sms->id}}</td>
                                                    <td>{{$sms->task_name}}</td>
                                                    <td>{{$sms->task_type}}</td>
                                                    <td>@php
                                                            $var = $sms->task_status==1
                                                        @endphp
                                                            @if($var==1)                          
                                                            <label class="badge  bg-success">{{$i}}</label>
                                                            @else
                                                            <label class="badge bg-warning">{{ $j }}</label>
                                                            @endif</td>
                                                    <td> <a class="btn btn-primary btn-sm btn-round"
                                                            href="{{ route('tasks.edit' , $sms->id)}}">
                                                            <i class="fa fa-edit text-white"></a></i>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
@endsection
@push('scripts')
<script>
$(document).ready(function() {
    $("#create_template").on('click', function() {
        var error_msg = "";

        if ($("#task_name").val() == "") {
            $("#task_name_error").text("Please enter Task Name.");
            error_msg = "Error";
        } else {
            $("#task_name_error").text("");
        }

        if ($("#task_type").val() == "") {
            $("#task_type_error").text("Please Select Answer Type.");
            error_msg = "Error";
        } else {
            $("#task_type_error").text("");
        }

        if ($("#status").val() == "") {
            $("#status_error").text("Please Select Task Status.");
            error_msg = "Error";
        } else {
            $("#status_error").text("");
        }

        if (error_msg) {
            return false;
        }
    });

});
</script>
<script>
    $(document).ready(function() {
        $('#task_type').on('change', function() {
            if ($('#task_type').val() == "Input") {
                $(".multiple").addClass('d-none');
            } else {
                $(".multiple").removeClass('d-none');
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("#addEmail").on("click", function() {
            $("#more-email").append(
                "<div class='form-group'><label class='mt-3' for='exampleInputEmail1'>Answer</label><input type='text' class='form-control'  name='option[]' placeholder='Enter Answer'/></div>"
            );
        });
        $("#removeEmail").on("click", function() {
            $("#more-email").children().last().remove();
        });
    });
    </script>
@endpush