@extends('backend.layout.master')
@include('backend.kids.css')
@section('content')

    <div class="page-body">
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6 main-header">
                        <h2>Children <span>Profile Management </span></h2>
                        <h6 class="mb-0">All Children</h6>
                    </div>
                    <div class="col-lg-6 breadcrumb-right">
                        <div class="btn-showcase">
                            <a href="{{route('kids.archive-index')}}">
                                <button class="btn btn-pill btn-info btn-air-success btn-air-success"
                                        style="float:right;"><i class="fa fa-archive"></i> Archived Profiles
                                </button>
                            </a>
                            <a href="{{route('kids.add')}}">
                                <button class="btn btn-pill btn-success btn-air-success btn-air-success"
                                        style="float:right;">Add Child Profile
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container-fluid general-widget">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        @if(session()->has('success'))
                            <div class="alert alert-success hide-alert">
                                {{ session()->get('success') }}
                            </div>
                        @endif
                        <div class="card-body card-dashboard">
                            <div class="order-history table-responsive">
                                <div id="basic-1_wrapper" class="dataTables_wrapper no-footer">
                                    <table class="table display" id="list_kids">
                                        <thead>
                                        <tr>
                                            <th scope="col">Child Picture</th>
                                            <th scope="col">First Name</th>
                                            <th scope="col">Last Name</th>
                                            <th scope="col"><i class="fa fa-angle-down"></i>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($kids as $key=>$val)
                                            <tr>
                                                <td> @php echo $val['image_backend']; @endphp </td>
                                                <td>
                                                    <div class="product-name"><a
                                                            href="{{route('kids.edit',$val['id'])}}"
                                                            style="font-weight:bold;">{{$val['first_name']}}</a></div>
                                                </td>
                                                <td>
                                                    <div class="product-name"><a
                                                            href="{{route('kids.edit',$val['id'])}}"
                                                            style="font-weight:bold;">{{$val['last_name']}}</a></div>
                                                </td>
                                                <td>
                                                    <div class="actions" style="display: inline-block;">
                                                        <a href="{{route('kids.edit',$val['id'])}}">
                                                            <button class="btn btn-outline-secondary-2x" type="button">
                                                                Edit
                                                            </button>
                                                        </a>

                                                        <div class="dropdown pull-right ml-2">
                                                            <button class="btn btn-danger dropdown-toggle"
                                                                    type="button" data-toggle="dropdown"
                                                                    aria-haspopup="true" aria-expanded="false">
                                                                Delete
                                                            </button>
                                                            <div class="dropdown-menu" x-placement="bottom-start">
                                                                <a type="button" class="dropdown-item ask_archive"
                                                                   href="javascript:void(0);"
                                                                   data-id="{{ $val['id'] }}"><i
                                                                        class="fa fa-archive"></i> Archive</a>
                                                                <a type="button" class="dropdown-item ask_delete"
                                                                   href="javascript:void(0);"
                                                                   data-id="{{ $val['id'] }}"><i
                                                                        class="fa fa-trash"></i> Delete</a>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection
@include('backend.kids.js')