@extends('layouts.master')
@section('contain')
    {{-- style="box-shadow: 0px 0px 14px 3px #cfcfcf; background: linear-gradient(45deg, rgb(241, 234, 234), transparent);border: 1px solid #cdcdcd;" --}}
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Children  Detail</h3>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                    {{-- <li class="breadcrumb-item active">User Table</li> --}}
                </ol>
                {{-- <a href="{{ Route('address.swform') }}"><button type="button"
                    class="btn btn-info d-none d-lg-block m-l-15 text-white"><i class="fa fa-plus-circle"></i> Create
                    New</button></a> --}}
            </div>
        </div>
    </div>
    <!-- Start Page Content -->
    <!-- ============================================================== -->
    <div class="card">
        <div class="card-body">
            <h3 class="text-success">Children  Reports</h3>
            <div class="table-responsive">
                <table id="myTable" class="table table-striped border dataTable no-footer">
                    <thead>
                        <tr style="background-color: gray " class="text-white">
                            <th>S.No</th>
                            <th>Title</th>
                            <th>Height</th>
                            <th>Height Unit</th>
                            <th>Weight</th>
                            <th>Weight Unit</th>
                            <th>Media</th>
                            <th>Description</th>
                            <th>Recorded Date</th>
                        </tr>
                    </thead>
                    @php
                        $num = 1;
                    @endphp
                    <tbody>
                        @foreach ($childeAndreports as $childeAndreport)
                            @foreach ($childeAndreport->myreports as $myreport)
                                <td>{{ $num++ }}</td>
                                <td>{{ $myreport->title }}</td>
                                <td>{{ $myreport->height }}</td>
                                <td>{{ $myreport->height_unit }}</td>
                                <td>{{ $myreport->weight }}</td>
                                <td>{{ $myreport->weight_unit }}</td>
                                <td>
                                    <a  class="fancybox" href="{{ URL::asset($myreport->media  != null ? env('MEDIA_URL') . $myreport->media  : 'images/933-9332131_profile-picture-default-png.png') }}"
                                        target="_blank">
                                        <img title="view Doc" src="{{ asset('images/pdflogo.jfif') }}"
                                            class="img-circle" width="150" />
                                    </a>
                                </td>
                                <td>{{ $myreport->description }}</td>
                                <td>{{ $myreport->recorded_at ? date('d-m-Y', strtotime($myreport->recorded_at)) : "" }}</td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h3 class="text-success">Growth Logs</h3>
            {{-- <h6 class="card-subtitle">Data table example</h6> --}}
            <div class="table-responsive">
                <table id="myTableGrowth" class="table table-striped border dataTable no-footer">
                    <thead>
                        <tr style="background-color: gray " class="text-white">
                            <th>S.No</th>
                            <th>Height</th>
                            <th>Height Unit</th>
                            <th>Weight</th>
                            <th>Weight Unit</th>
                            <th>Recorded Date</th>
                        </tr>
                    </thead>
                    @php
                        $num = 1;
                    @endphp
                    <tbody>
                        @foreach ($growth_logs as $growth_log)
                            <td>{{ $num++ }}</td>
                            <td>{{ $growth_log->height }}</td>
                            <td>{{ $growth_log->height_unit }}</td>
                            <td>{{ $growth_log->weight }}</td>
                            <td>{{ $growth_log->weight_unit }}</td>
                            <td>{{ $growth_log->recorded_at ? date('d-m-Y', strtotime($growth_log->recorded_at)) :""}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End PAge Content -->
    <script>
        $(function() {

            $('#myTableGrowth').DataTable({
                columnDefs: [{
                    bSortable: false,
                    targets: [-1]
                }]
            });
            var table = $('#example').DataTable({
                "columnDefs": [{
                    "visible": false,
                    "targets": 2
                }],
                "order": [
                    [2, 'asc']
                ],
                "displayLength": 25,
                "drawCallback": function(settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;
                    api.column(2, {
                        page: 'current'
                    }).data().each(function(group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group +
                                '</td></tr>');
                            last = group;
                        }
                    });
                }
            });
            // Order by the grouping
            $('#example tbody').on('click', 'tr.group', function() {
                var currentOrder = table.order()[0];
                if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
                    table.order([2, 'desc']).draw();
                } else {
                    table.order([2, 'asc']).draw();
                }
            });
            // responsive table
            $('#config-table').DataTable({
                responsive: true
            });
            $('#example23').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            });
            $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass(
                'btn btn-primary me-1');
        });
    </script>
@endsection