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

    <div class="page-body main_form">
        <div class="container">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-4 main-header">
                        <h2><span>Reports</span></h2>
                    </div>
                    <div class="col-md-8">
                        <div class="mb-1">
                            <form method="post" action="{{route('report.pdf')}}">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="control-label" for="select_kids"><h5>Select Kid</h5>
                                            </label>
                                            <select class="form-control js-example-basic-single" id="select_kids"
                                                    name="select_kids" required>
                                                <option value="" disabled selected>Select Kids</option>
                                                @foreach($kids as $kidsName)
                                                    <option value="{{ $kidsName->id}}"
                                                        {{ ($data['select_kids'] == $kidsName->id) ? ' selected ' : ' ' }}> {{ $kidsName->first_name }} {{ $kidsName->last_name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="control-label" for="select_month"><h5>Select Month</h5>
                                            </label>
                                            <input class="datepicker-here form-control digits" type="text"
                                                   data-language="en" data-min-view="months" data-view="months"
                                                   data-date-format="yyyy-mm" name="select_month" id="select_month"
                                                   autocomplete="off" required value="{{$data['select_month']}}">
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label class="control-label" for="show_report"><h5>&nbsp;</h5></label>
                                            <br>
                                            <button type="button" class="btn btn-primary btn-primary"
                                                    id="show_report" onclick="getKidsData();">Show Report
                                            </button>

                                            <button type="submit" class="btn btn-primary btn-primary" id="get_pdf">
                                                Export PDF
                                            </button>

                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>

                    </div>
                    <div class="col-md-12">
                        <div class="alert alert-danger" id="validation-errors">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container">
            <div class="row">

                <div class="col-md-12 student-edit">
                    <table class="display dataTable dtr-inline bodyData" id="basic-37" role="grid"
                           aria-describedby="responsive_info">

                        <thead>
                        <tr>
                            <th class="no-sort" width="20%">DATE</th>
                            <th class="no-sort" width="20%">DROP OFF</th>
                            <th class="no-sort" width="20%"></th>
                            <th class="no-sort" width="20%">PICK UP</th>
                            <th class="no-sort" width="20%"></th>
                        </tr>
                        </thead>
                        <tbody>


                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
    {{--<div class="page-body">
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6 main-header">
                        <h2>Drop-in-off <span>Reports </span></h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            @if(session()->has('error'))
                <div class="alert alert-danger">
                    {{ session()->get('error') }}
                </div>
            @endif
            <div class="alert alert-danger" id="validation-errors">
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="mb-1">
                                <form method="post" action="{{route('report.pdf')}}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label" for="select_kids"><h5>Select Kid</h5>
                                                </label>
                                                <select class="form-control js-example-basic-single" id="select_kids"
                                                        name="select_kids" required>
                                                    @if($data != null)
                                                        <option value="{{ $data->id}} "
                                                                name="{{ $data->first_name }} {{ $data->last_name }}  "
                                                                selected>{{ $data->first_name }} {{ $data->last_name }} </option>
                                                    @else
                                                        <option value="" disabled selected>Select Kids</option>
                                                    @endif
                                                    @foreach($kids as $kidsName)
                                                        <option value="{{ $kidsName->id}}"
                                                                name="{{ $kidsName->first_name }} {{ $kidsName->last_name }} "> {{ $kidsName->first_name }} {{ $kidsName->last_name }} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label" for="select_month"><h5>Select Month</h5>
                                                </label>
                                                <input class="datepicker-here form-control digits" type="text"
                                                       data-language="en" data-min-view="months" data-view="months"
                                                       data-date-format="yyyy-mm" name="select_month" id="select_month"
                                                       autocomplete="off" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label" for="show_report"><h5>&nbsp;</h5></label>
                                                <br>
                                                <button type="button" class="btn btn-info btn-secondary"
                                                        id="show_report" onclick="getKidsData();">Show Report
                                                </button>
                                                <button type="submit" class="btn btn-info btn-secondary" id="get_pdf">
                                                    Download PDF
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                            <div class="card-body">
                                <div id="student_details"></div>
                                <div class="dt-ext table-responsive">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <table class="display dataTable dtr-inline bodyData" id="responsive"
                                                   role="grid" aria-describedby="responsive_info" style="width: 997px;">
                                                <thead>
                                                <tr role="row">
                                                    <th class="sorting_asc" tabindex="0" aria-controls="responsive"
                                                        rowspan="1" colspan="1" style="width: 66px;"
                                                        aria-sort="ascending"
                                                        aria-label="Date: activate to sort column descending">Date
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="responsive"
                                                        rowspan="1" colspan="1" style="width: 129px;"
                                                        aria-label="Drop-Off Person: activate to sort column ascending">
                                                        Drop-Off Person
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="responsive"
                                                        rowspan="1" colspan="1" style="width: 110px;"
                                                        aria-label="Drop-off Time: activate to sort column ascending">
                                                        Drop-off Time
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="responsive"
                                                        rowspan="1" colspan="1" style="width: 79px;"
                                                        aria-label="Signature: activate to sort column ascending">
                                                        Signature
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="responsive"
                                                        rowspan="1" colspan="1" style="width: 121px;"
                                                        aria-label="Pick-up Person: activate to sort column ascending">
                                                        Pick-up Person
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="responsive"
                                                        rowspan="1" colspan="1" style="width: 104px;"
                                                        aria-label="Pick-up Time: activate to sort column ascending">
                                                        Pick-up Time
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="responsive"
                                                        rowspan="1" colspan="1" style="width: 93px;"
                                                        aria-label="Signature: activate to sort column ascending">
                                                        Signature
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>


                                                </tbody>
                                                <tfoot>
                                                <tr>
                                                    <th rowspan="1" colspan="1">Date</th>
                                                    <th rowspan="1" colspan="1">Drop-Off Person</th>
                                                    <th rowspan="1" colspan="1">Drop-off Time</th>
                                                    <th rowspan="1" colspan="1">Signature</th>
                                                    <th rowspan="1" colspan="1">Pick-up Person</th>
                                                    <th rowspan="1" colspan="1">Pick-up Time</th>
                                                    <th rowspan="1" colspan="1">Signature</th>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>--}}
    <!-- Old Content -->


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