@extends('layouts/mainLayout')
@section('title', "UGAF Home Care: Issues Tracker")
@include('sideMenu',['page_title' => 'dashboard','sub_page_title' => 'dashboard'])
<!-- Left Sidebar End -->
@section('styles')
<link href="{{URL::asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css" />
<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">New Issue</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">
                                    Issues
                                </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">Add Issue</a>
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class=" grid grid-cols-1 ">
                <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                    <div class="card-body">
                        
                        <div class="mt-5 relative overflow-x-auto">
                            <form action="" method="POST" id="createIssue" enctype="multipart/form-data">
                                @csrf
                                <div class="intro-y overflow-auto lg:overflow-visible mt-8 sm:mt-0">
                                    <div class="mt-3">
                                        <label class="form-label">Member</label>
                                        <select id="" class="dark:bg-zinc-800 dark:border-zinc-700 w-full rounded border-gray-100 py-2.5 text-sm text-gray-500 focus:border focus:border-violet-500 focus:ring-0 dark:bg-zinc-700/50 dark:text-zinc-100" name="member">
                                            <option value="0" selected="">Choose Member</option>
                                            @if(count($members) > 0)
                                                @foreach($members as $member)
                                                    <option value="{{$member['id']}}">{{$member['member_name']}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="mt-3">
                                        <label class="form-label">Assign To</label>
                                        <select id="" class="dark:bg-zinc-800 dark:border-zinc-700 w-full rounded border-gray-100 py-2.5 text-sm text-gray-500 focus:border focus:border-violet-500 focus:ring-0 dark:bg-zinc-700/50 dark:text-zinc-100" name="manager">
                                            <option value="0" selected="">Choose Case Manager</option>
                                            @if(count($managers) > 0)
                                                @foreach($managers as $mn)
                                                    <option value="{{$mn['id']}}">{{$mn['full_name']}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div> 
                                    <div class="mt-3">
                                        <label class="form-label">Case Supervisor</label>
                                        <select id="" class="dark:bg-zinc-800 dark:border-zinc-700 w-full rounded border-gray-100 py-2.5 text-sm text-gray-500 focus:border focus:border-violet-500 focus:ring-0 dark:bg-zinc-700/50 dark:text-zinc-100" name="supervisor">
                                            <option value="0" selected="">Choose Case Supervisor</option>
                                            @if(count($supervisors) > 0)
                                                @foreach($supervisors as $su)
                                                    <option value="{{$su['id']}}">{{$su['full_name']}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>   
                                    
                                    
                                    <div class="mt-3">
                                        <label class="form-label">Message</label>
                                        <textarea class="w-full py-1.5 placeholder:text-sm border-gray-100 rounded dark:bg-zinc-700/50 dark:border-zinc-600 dark:placeholder:text-zinc-100 dark:text-zinc-100" value="" name="message" required=""></textarea>
                                    </div>
                                    
                                    <div class="mt-3">
                                        <label class="form-label">Add Attachments</label>
                                        <input name="uploads[]" type="file" multiple="multiple" class="w-full py-1.5 placeholder:text-sm border-gray-100 rounded dark:bg-zinc-700/50 dark:border-zinc-600 dark:placeholder:text-zinc-100 dark:text-zinc-100" />
                                    </div>
                                    <div class="col-span-12 flex mt-3">
                                        <button class="btn btn-primary w-32 ml-2" type="submit">Add</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @push('scripts')
    <script src="{{URL::asset('assets/js/app.js')}}"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>
    <script src="{{URL::asset('js/sweetalert2.all.min.js')}}"></script>
    <script type="text/javascript">
        function submitForm(){
            var form = $("#createClientForm");
            Swal.showLoading('Sending ... Please wait!');
            $.ajax({
                type: 'POST',
                url:  '/addIssue',
                data: form.serialize(),
                success: function(response){
                    console.log(response);
                    if(response.response){
                        Swal.fire('Success!',response.result,'success');
                    }
                    else{
                        Swal.fire('Error!',response.result,'error');
                    }
                }
            });
            return false;
        }
        $("form#createIssue").submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            Swal.showLoading('Sending ... Please wait!');
            $.ajax({
                url: '/addIssue',
                type: 'POST',
                data: formData,
                success: function (response) {
                    console.log(response);
                    if(response.response){
                        Swal.fire('Success!',response.response,'success');
                    }
                    else{
                        Swal.fire('Error!',response.result,'error');
                    }
                },
                cache: false,
                contentType: false,
                processData: false
            });
        });
    </script>
    @endpush