@extends('layouts/mainLayout')
@section('title', "UGAF Home Care: Issues Tracker")
@include('sideMenu',['page_title' => 'traffic','sub_page_title' => 'dashboard'])
@section('styles')
<link rel="stylesheet" type="text/css" href="{{URL::asset('css/sweetalert2.min.css')}}"/>
@endsection
@section('mainContent')
<div class="page-content dark:bg-zinc-700">
<div class="container-fluid px-[0.625rem]">
<div class="grid grid-cols-1 mb-5">
<div class="flex items-center justify-between">
    <h4 class="mb-sm-0 text-lg font-semibold grow text-gray-800 dark:text-gray-100">All Issues</h4>
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 ltr:md:space-x-3 rtl:md:space-x-0">
            <li class="inline-flex items-center">
                <a href="#" class="inline-flex items-center text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-zinc-100 dark:hover:text-white">
                    Dashboard
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    /
                    <a href="#" class="ltr:ml-1 rtl:mr-1 text-sm font-medium text-gray-500 hover:text-gray-900 ltr:md:ml-2 rtl:md:mr-2 dark:text-gray-100 dark:hover:text-white">All Issues</a>
                </div>
            </li>
        </ol>
    </nav>
</div>
</div>
<div class=" grid grid-cols-12 gap-5 mb-5 ">
<div class="col-span-12 xl:col-span-2">
    <div class="card dark:bg-zinc-800 dark:border-zinc-600">
        <div class="card-body">
            <a href="add-issue" type="button" class="btn w-full bg-red-500 border-transparent text-white shadow-md shadow-red-200 mb-4 dark:shadow-zinc-600">
                Add Issue
            </a>
            <div class="mail-list mt-4">
                <a href="/issues/open" class="block px-1 py-2 text-gray-500 dark:text-zinc-100">
                    <i class="mdi mdi-access-point ltr:mr-2 rtl:ml-2 text-base"></i> Open
                </a>
                <a href="/issues/completed" class="block px-1 py-2 text-gray-500 dark:text-zinc-100">
                    <i class="mdi mdi-star-outline ltr:mr-2 rtl:ml-2 text-base"></i>Completed
                </a>
                <a href="/dashboard" class="active block px-1 py-2 text-red-500 dark:text-zinc-100">
                    <i class="mdi mdi-email-check-outline ltr:mr-2 rtl:ml-2 text-base"></i>All Issues
                </a>
            </div>
        </div>
    </div>
</div>
<div class="col-span-12 xl:col-span-10">
    <div class="card dark:bg-zinc-800 dark:border-zinc-600 overflow-hidden">
        <div>
            <ul>
                <li class="hover:bg-gray-50/50 px-4 py-3.5 transition-all duration-200 dark:hover:bg-zinc-600/50">
                    <div class="grid grid-cols-12">
                        <div class="col-span-2">Member</div>
                        <div class="col-span-5">Message</div>
                        <div class="col-span-2">Date</div>
                        <div class="col-span-1">Status</div>
                        <div class="col-span-2">Action</div>
                    </div>
                </li>
                @foreach ($issues as $issue)
                @php
                switch($issue['status']){
                    case(1):
                        $status = 'Completed';
                        $color = "green";
                        break;

                    case(2):
                        $status = 'In Progress';
                        $color = "blue";
                        break;

                    default:
                        $status = "Open";
                        $color = "red";
                }
                @endphp
                <li class="hover:bg-gray-50/50 px-4 py-3.5 dark:hover:bg-zinc-600/50" id="{{$issue['id']}}">
                    <div class="grid grid-cols-12">
                        <div class="col-span-2">
                            <a href="#" class="text-gray-500 dark:text-zinc-100">{{ $issue['member_name'] }}</a>
                        </div>
                        <div class="col-span-5">
                            <div class="grid grid-cols-12">
                                <div class="col-span-10">{{$issue['message']}}</div>   
                            </div>
                        </div>
                        <div class="col-span-2">{{$issue['date_created']}}</div>
                        <div class="col-span-1">
                            <span style="color: {{$color}};">{{$status}}</span>
                        </div>
                        <div class="col-span-2" style="padding-left: 5px;">
                            <a class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 dark:text-gray-100 dark:hover:bg-zinc-600/50 hover:bg-gray-50/50" href="/issues/view/{{$issue['id']}}">View</a>
                            @if($status !='Completed')
                            <a class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap dark:text-gray-100 dark:hover:bg-zinc-600/50 bg-transparent text-gray-700 hover:bg-gray-50/50" href="#">Mark Completed</a >
                            @endif
                            @if($status =='Completed')
                            <a class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent dark:text-gray-100 dark:hover:bg-zinc-600/50 text-gray-700 hover:bg-gray-50/50 " href="#">Reopen</a>
                            @endif
                            <a class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent dark:text-gray-100 dark:hover:bg-zinc-600/50 text-gray-700 hover:bg-gray-50/50 " id="{{$issue['id']}}" onclick="return deleteIssue(this);">Delete</a> 
                        </div>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="flex items-center sm:ml-auto">
        <p class="text-gray-500 dark:text-gray-200">{{ $issues->onEachSide(2)->links() }} </p>
    </div>
</div>
</div>
</div>
</div>                   
@endsection
@push('scripts')
<script src="{{URL::asset('assets/js/app.js')}}"></script>
<script src="{{URL::asset('js/sweetalert2.all.min.js')}}"></script>
    <script type="text/javascript">
        function deleteIssue(opvalue){
            var id_user = opvalue.id;
            var token = "{{ csrf_token() }}";
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                  if (result.value) {
                    $.post("/deleteIssue", {action: 'delete', '_token': token, id_user: id_user}, function(message){
                        $("li#" + id_user).remove()
                        Swal.fire('Issue Deleted',message.response,'success');
                    });
                  }
                });
            
            return false;
        } 
        </script>
    @endpush