@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 Task Update - {{$activities[0]->Activity}}</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content mt-0 p-0">
                        <form action="{{url('tasks', $activities[0]->id)}}" method="post" class="mb-3">
                            @csrf
                            @method('PUT')
                            <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" value="{{$activities[0]->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 @if($activities[0]->task_type == 'Input') selected @endif value="Input">Input</option>
                                            <option @if($activities[0]->task_type == 'Dropdown') selected @endif 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 @if($activities[0]->task_status == '1') selected @endif value="1">Active</option>
                                            <option @if($activities[0]->task_status == '0') selected @endif 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">
                                @foreach($activitiy_tasks as $option)
                                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 mt-3">
                                    <div class="form-group">
                                        <label class="mb-1">Answer</label>
                                        <input type="text" class="form-control" id="" name="option[]"
                                        value="{{$option->task_option}}" placeholder="Enter Answer" Required>
                                    </div>
                                </div>
                                @endforeach
                                <!-- <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">
                                        </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="{{$activities[0]->activity_name}}">
                                        <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="Update" />
                                    <!-- <button type="submit" class="btn btn-round btn-primary">Submit</button> -->
                                </div>
                            </div>
                        </form>
                        
                    </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 Task 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() {
        if ($('#task_type').val() == "Dropdown"){
                $(".multiple").removeClass('d-none');
            }
        $('#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