@extends('admin.layouts.app')

@section('content')
    <div class="container-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Task</h2>
                                    <p>Edit Task Data</p>
                                </div>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="POST" class="needs-validation" id="form-data" name="form-data" novalidate>
                            {{ csrf_field() }}

                            <div class="form-group">
                                <label class="form-label" for="name">Client </label>
                                <select class="form-select" id="client_id" name="client_id" required>
                                    @foreach ($client as $row)
                                        <option value="{{$row['id']}}">{{$row['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="name">Project </label>
                                <select class="form-select" id="project_id" name="project_id" required>
                                    @foreach ($project as $row)
                                        <option value="{{$row['id']}}">{{$row['client_name']}} - {{$row['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="name">User </label>
                                <select class="form-select" id="user_id" name="user_id" required>
                                    @foreach ($user as $row)
                                        <option value="{{$row['id']}}">{{$row['name']}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Title </label>
                                <input class="form-control" type="text" id="title" name="title" value="" placeholder="Enter Title" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="notes">Description</label>
                                <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Due Date </label>
                                <input class="form-control" type="date" id="due_date" name="due_date" value="" placeholder="Enter Date" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Priority </label>
                                <select class="form-select" id="priority" name="priority" required>
                                    <option value="Low">Low</option>
                                    <option value="Medium">Medium</option>
                                    <option value="High">High</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Tags </label>
                                <input class="form-control" type="text" id="tags" name="tags" value="" placeholder="Enter Tags" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Progress </label>
                                <input class="form-control" type="number" id="progress" name="progress" value="" placeholder="Enter Progress" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Status </label>
                                <select class="form-select" id="status" name="status" required>
                                    <option value="Todo">Todo</option>
                                    <option value="Doing">Doing</option>
                                    <option value="Done">Done</option>
                                </select>
                            </div>

                            <br><br>
                            <button type="submit" class="btn btn-success">Submit</button>
                            <a href="{{ URL::previous() }}" class="btn btn-danger">Cancel</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        $.ajaxSetup({
            headers:{
                'Authorization': "Bearer {{$session_token}}"
            }
        });
        $.ajax({
            url: '/api/task/{{$id}}',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    $("#detail-data-success").show();
                    $("#detail-data-failed").hide();

                    $('#client_id').val(result['data']['client_id']);
                    $('#project_id').val(result['data']['project_id']);
                    $('#user_id').val(result['data']['user_id']);
                    $('#title').val(result['data']['title']);
                    $('#description').val(result['data']['description']);
                    $('#due_date').val(result['data']['due_date']);
                    $('#priority').val(result['data']['priority']);
                    $('#tags').val(result['data']['tags']);
                    $('#progress').val(result['data']['progress']);
                    $('#status').prop("checked", result['data']['status']);

                } else {
                    $("#detail-data-success").hide();
                    $("#detail-data-failed").show();

                    $('#message').html(result['message']);
                }
            },
            fail: function () {
                $("#detail-data-success").hide();
                $("#detail-data-failed").show();

                $('#message').html(result['message']);
            }
        });



        $('#form-data').submit(false);
        $("#form-data").submit( function () {

            if($(this).valid()) {
                var form = $("#form-data").serializeArray();
                var formdata = {};
                $.map(form, function(n, i){
                    formdata[n['name']] = n['value'];
                });

                $.ajaxSetup({
                    headers:{
                        'Authorization': "Bearer {{$session_token}}"
                    }
                });
                $.ajax({
                    url: '/api/task/{{$id}}',
                    type: "PUT",
                    data: JSON.stringify(formdata),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            Swal.fire({
                                icon: "success",
                                title: "Success",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            }).then((result) => {
                                window.location.replace("{{ url('/admin/task') }}");
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            });
                        }
                    }
                });
            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }
            return false;
        });

    </script>
@endsection