@extends('layouts/mainLayout')
@section('title', "UGAF Home Care: Issues Tracker")
<!-- ========== Left Sidebar Start ========== -->
@include('sideMenu',['page_title' => 'clients','sub_page_title' => 'member'])
<!-- 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 Member</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">
                                    Profiles
                                </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 Member</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="grid grid-cols-12">
                            
                        </div>
                        <div class="mt-5 relative overflow-x-auto">
                           <form action="" method="POST" id="createClientForm" onsubmit="return submitForm();">
                                        @csrf
                                        <div class="intro-y overflow-auto lg:overflow-visible mt-8 sm:mt-0">
                                            
                                            <div class="mt-3">
                                                <label class="form-label">Full Name</label>
                                                <input type="text" 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="fullname" required="" />
                                            
                                            </div>
                                            
                                            <div class="mt-3">
                                                <label class="form-label">Date of Birth</label>
                                                <input class="w-full rounded border-gray-100 py-2.5 text-sm text-gray-500 focus:border focus:border-violet-500 dark:bg-zinc-700/50 dark:border-zinc-600 dark:text-zinc-100" type="text" value="" id="datepicker" name="dob">
                                            </div> 
                                            
                                            <div class="col-span-12 flex mt-3">
                                                <button class="btn btn-primary w-32 ml-2" type="submit">Create</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 src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
                const picker = new Litepicker({ 
                    element: document.getElementById('datepicker'),
                    autoRefresh: true,
                    autoApply: false,
                    singleMode: true,
                    showWeekNumbers: true,
                    dropdowns: {
                        minYear: 1960,
                        maxYear: 2000,
                        months: true,
                        years: true
                    }
                });
            });
        function submitForm(){
            var form = $("#createClientForm");
            Swal.showLoading('Creating ... Please wait!');
            $.ajax({
                type: 'POST',
                url:  '/createMember',
                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;
        }
    </script>
    @endpush