@extends('layouts.landing')

@section('title', 'Goals')

@section('content')
    <div class="row mobile-mt-8">
        <div class="col-12">
            @forelse ($goals as $goal)
                <div class="card w-100 border-0 p-0 bg-custom-gray shadow-xss rounded-xxl">
                    <div class="card-body p-4">
                        <div class="row">
                            <div class="col-12 col-lg-1 col-xl-1">
                                <div class="text-center my-3 d-flex align-items-center justify-content-center">
                                    @include('elements.goal-progress')
                                </div>
                            </div>
                            <div class="col-12 col-lg-11 col-xl-11">
                                <div class="d-flex justify-content-between">
                                    <h5>{{$goal->name}}</h5><br>
                                    <div class="dropdown custom-drop">
                                        <a class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                            <i class="fe fe-more-vertical"></i>
                                        </a>
                                        <div class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                            <div class="card-body p-0 d-flex">
                                                <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                <a href="#!" onclick="editGoal(`{{$goal->name}}`, `{{$goal->description}}`, `{{$goal->end_date}}`, `{{$goal->id}}`)">
                                                    <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Edit</h6>
                                                </a>
                                            </div>
                                            <form action="/goals/delete-goal/{{$goal->id}}" method="POST">
                                                {{ csrf_field() }}
                                                {{ method_field('DELETE') }}
                                                <div class="card-body p-0 d-flex">
                                                    <button type="submit" class="custom-btn-none text-gray-900 text-dark" onclick="return deleteGoal();">
                                                        <i class="mdi mdi-delete"></i> Delete
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <span class="small text-gray-500"><i class="mdi mdi-calendar"></i> {{\Carbon\Carbon::parse($goal->created_at)->toFormattedDateString()}} - {{\Carbon\Carbon::parse($goal->end_date)->toFormattedDateString()}}</span>
                                <p class="pt-2">
                                    {!! $goal->description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                @forelse ($goal->targets as $target)
                    <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-12 col-lg-1 col-xl-1">
                                    <div class="text-center my-3 d-flex align-items-center justify-content-center">
                                        <img src="{{asset('assets/images/icon_target.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="col-12 col-lg-11 col-xl-11">
                                    <div class="row">
                                        <div class="col">
                                            <p class="pt-2">
                                                {!! $target->description !!}
                                            </p>
                                            <span class="small text-gray-500"><i class="mdi mdi-calendar"></i> {{\Carbon\Carbon::parse($target->created_at)->toFormattedDateString()}} - {{\Carbon\Carbon::parse($target->date)->toFormattedDateString()}}</span>
                                        </div>
                                        <div class="col-auto">
                                            <div class="d-flex justify-content-between">
                                                <div class="form-check form-switch mr-3">
                                                    <input type="hidden" name="target_status" id="target_status{{$target->id}}" value="{{$target->target_status}}">
                                                    <input type="checkbox" name="goal_check" class="form-check-input" onclick="completeTarget('target_status{{$target->id}}', 'target_label{{$target->id}}', '{{$target->id}}', this)" {{$target->target_status == 1 ? 'checked' : ''}}>
                                                    <label for="target_status" id="target_label{{$target->id}}" class="form-check-label text-dark">{{$target->target_status == 1 ? 'Smashed' : 'Smash'}}</label>
                                                </div>
                                                <div class="dropdown custom-drop">
                                                    <a class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                        <i class="fe fe-more-vertical"></i>
                                                    </a>
                                                    <div class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                                        <div class="card-body p-0 d-flex">
                                                            <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                            <a href="#!" onclick="editTarget(`{{$target->description}}`, `{{$target->end_date}}`, `{{$target->id}}`)">
                                                                <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Edit</h6>
                                                            </a>
                                                        </div>
                                                        <form action="/goals/delete-target/{{$target->id}}" method="POST">
                                                            {{ csrf_field() }}
                                                            {{ method_field('DELETE') }}
                                                            <div class="card-body p-0 d-flex">
                                                                <button type="submit" class="custom-btn-none text-gray-900 text-dark" onclick="return deleteTarget();">
                                                                    <i class="mdi mdi-delete"></i> Delete
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                        <div class="card-body p-4">
                            <h5>Targets</h5>
                            <div class="row">
                                <div class="col-12">
                                    <div class="text-center">
                                        <img src="{{asset('assets/images/goal_raafiki.png')}}" class="w80 mt-6" alt="">
                                        <p class="pt-6 font-lg lh-2">Make your goals a reality</p>
                                        <span class="pt-4 text-gray-500">Create mesurable targets </span>
                                        <div class="my-5">
                                            <a href="#!" onclick="showTarget('{{$goal->id}}')" class="custom-btn">Set a Target</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforelse
                @if(count($goal->targets) > 0)
                    <div class="my-5 text-center justify-content-center">
                        <a href="#!" onclick="showTarget('{{$goal->id}}')" class="custom-btn"><i class="mdi mdi-plus"></i> Add new Target</a>
                    </div>
                @endif
                <hr>
            @empty
                <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                    <div class="card-body p-4">
                        <h5>Create Goals and Targets</h5>
                        <div class="row">
                            <div class="col-12">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/goal_raafiki.png')}}" class="w80 mt-6" alt="">
                                    <p class="pt-6 font-lg lh-2">Make your goals a reality</p>
                                    <span class="pt-4 text-gray-500">Create goals break them down into mesurable targets </span>
                                    <div class="my-5">
                                        <a href="" data-toggle="modal" data-target="#createGoal" class="custom-btn">Set a Goal</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
    @if(count($goals) > 0)
        <a class="cursor" data-toggle="modal" data-target="#createGoal">
            <div class="note">
                <span class="icon"><i class="mdi mdi-plus"></i></span>
            </div>
        </a>
    @endif
    @include('elements.create-goal')
    @include('elements.edit-goal')
    @include('elements.create-target')
    @include('elements.edit-target')
    <script>
        const name = document.getElementById('name');
        const description = document.getElementById('description');
        // const date = document.getElementById('date');
        const createBtn = document.getElementById('createBtn');

        const enableCreateBtn = () => {
            createBtn.disabled = !(
                name.value &&
                description.value
                // date.value
            );
        }

        name.addEventListener('change', enableCreateBtn);
        description.addEventListener('change', enableCreateBtn);
        // date.addEventListener('change', enableCreateBtn);

        function deleteGoal() {
            if(!confirm("Are you sure you want to delete this goal?"))
            event.preventDefault();
        }

        function deleteTarget() {
            if(!confirm("Are you sure you want to delete this target?"))
            event.preventDefault();
        }

        function showTarget(id) {
            $('#goal-id').val(id);
            const targetDescription = document.getElementById('target-description');
            // const targetDate = document.getElementById('target-date');
            const createTargetBtn = document.getElementById('createTargetBtn');

            const enableCreateTargetBtn = () => {
                createTargetBtn.disabled = !(
                    targetDescription.value
                    // targetDate.value
                );
            }

            targetDescription.addEventListener('change', enableCreateTargetBtn);
            // targetDate.addEventListener('change', enableCreateTargetBtn);

            $('#createTarget').modal('show');

        }

        function completeTarget(divId, label, targetId, event){
            if(event.checked == true){
                $("#"+ divId).val(1);
                $("#"+ label).html('Smashed');
                var target_status = 1;
                $.ajax({
                    type:'POST',
                    url: "/goals/complete-target/" + targetId,
                    data:{
                        "_token": "{{ csrf_token() }}",
                        target_status:target_status,
                    },
                    success:function(data){
                        toastr.success("Target completed", "", defaultSetting)
                        window.location.href = "{{route('goal.index')}}";
                    },
                    error: function(error) {
                        toastr.error("There was a problem completing this target", "", defaultSetting)
                    }
                });
            }else{
                $("#"+ divId).val(0);
                $("#"+ label).html('Smash');
                var target_status = 0;
                $.ajax({
                    type:'POST',
                    url: "/goals/complete-target/" + targetId,
                    data:{
                        "_token": "{{ csrf_token() }}",
                        target_status:target_status,
                    },
                    success:function(data){
                        toastr.success("Target incomplete", "", defaultSetting);
                        window.location.href = "{{route('goal.index')}}";

                    },
                    error: function(error) {
                        toastr.error("There was a problem completing this target", "", defaultSetting)
                    }
                });
            }
        }

        function editGoal(name, description, end_date, id) {
            $("#goal-name").val(name);
            $("#goal-description").val(description);
            $("#goal-date").val(end_date);
            $("#edit-goal-id").val(id);

            $("#editGoal").modal("show");
        }

        function editTarget(description, end_date, id) {
            $("#edit-target-description").val(description);
            $("#edit-target-date").val(end_date);
            $("#target-id").val(id);

            $("#editTarget").modal("show");
        }
    </script>
@endsection