@extends('layouts.mainlayout')
@section('content')
    <div class="album text-muted">
        <div class="container mw-100">
            <div class="card mb-3 align-middle">

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card mb-3">
                            <div class="card-header">
                                <i class="fas fa-chart-bar"></i>
                                Time spent in Sweden
                            </div>
                            <div class="card-body">
                                <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                                <script src="/vendor/js/gijgo.min.js"
                                        type="text/javascript"></script>
                                <link href="/css/gijgo.min.css"
                                      rel="stylesheet" type="text/css"/>
                                                                <form action="{{route('gen_time_in_sw', ['id' => $id])}}" method="POST" id="myform">
                                    <div class="row">
                                        <div class="col-xl-4 col-sm-6 mb-2">
                                            <p>Start date</p>
                                            <input class="form-control input-lg" type='text' id="s_date"
                                                   name='s_date'
                                                   value="" required/>
                                            <script>
                                                $('#s_date').datepicker({
                                                    uiLibrary: 'bootstrap4',
                                                    format: 'yyyy-mm-dd'
                                                });
                                            </script>
                                            <!---->
                                        </div>
                                        <div class="col-xl-4 col-sm-6 mb-2">
                                            <div id="arrival_div" class=""><p>End date</p>
                                                <input class="form-control input-lg" type='text' id="e_date"
                                                       name='e_date'
                                                       value="{{date('Y-m-d')}}" required/>
                                                <script>
                                                    $('#e_date').datepicker({
                                                        uiLibrary: 'bootstrap4',
                                                        format: 'yyyy-mm-dd'
                                                    });
                                                </script>
                                            </div>
                                            <!---->
                                        </div>
                                        <div class="col-xl-4 col-sm-6 mb-2">
                                            <div id="arrival_div" class="text-center">
                                                <br>
                                                <button type="submit" class="btn btn-primary btn-block">Generate
                                                </button>
                                            </div>
                                            <!---->
                                        </div>
                                    </div>
                                    @csrf
                                </form>
                            </div>
                            <div class="card-footer small text-muted"></div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card mb-3">
                            <div class="card-header">
                                <i class="fas fa-chart-bar"></i>
                                Staffs Gender on specific date
                            </div>
                            <div class="card-body">
                                <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                                <script src="/vendor/js/gijgo.min.js"
                                        type="text/javascript"></script>
                                <link href="/css/gijgo.min.css"
                                      rel="stylesheet" type="text/css"/>
                                                                <form action="{{route('gender_interval', ['id' => $id])}}" method="POST" id="myform_2">
                                    <div class="row">
                                        <div class="col-xl-6 col-sm-6 mb-2">
                                            <p>Start date</p>
                                            <input class="form-control input-lg" type='text' id="s_gdate"
                                                   name='s_gdate'
                                                   value="@isset($hideform2){{$datum}}@endisset" required/>
                                            <input type="hidden" name="download" id="download" value="0"/>
                                            <script>
                                                $('#s_gdate').datepicker({
                                                    uiLibrary: 'bootstrap4',
                                                    format: 'yyyy-mm-dd'
                                                });
                                            </script>
                                        </div>
                                        <div class="col-xl-3 col-sm-3 mb-2">
                                            <div id="arrival_div" class="text-center">
                                                <br>
                                                <button type="submit" class="btn btn-primary btn-block" id="generate"
                                                        name="generate">Generate
                                                </button>
                                                <script>
                                                    $('#generate').click(function () {
                                                        $('#download').attr("value", '0');
                                                    });
                                                </script>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-sm-3 mb-2">
                                            <div id="arrival_div" class="text-center">
                                                <br>
                                                <button type="submit" class="btn btn-primary btn-block" id="bdownload"
                                                        name="bdownload">Download
                                                </button>
                                            </div>
                                            <script>
                                                $('#bdownload').click(function () {
                                                    $('#download').attr("value", '1');
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    @csrf
                                </form>
                                @isset($hideform2)
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            Male: {{$f}} / Female: {{$n}}
                                        </div>
                                    </div>
                                @endisset
                            </div>
                            <div class="card-footer small text-muted"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card mb-3">
                            <div class="card-header">
                                <i class="fas fa-chart-bar"></i>
                                Time spent in Sweden by farm
                            </div>
                            <div class="card-body">
                                <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                                <script src="/vendor/js/gijgo.min.js"
                                        type="text/javascript"></script>
                                <link href="/css/gijgo.min.css"
                                      rel="stylesheet" type="text/css"/>
                                                                <form action="{{route('bf_gen_time_in_sw', ['id' => $id])}}" method="POST" id="myform">
                                    <div class="row">
                                        <div class="col-xl-4 col-sm-6 mb-2">
                                            <p>Start date</p>
                                            <input class="form-control input-lg" type='text' id="bf_s_date"
                                                   name='s_date'
                                                   value="" required/>
                                            <script>
                                                $('#bf_s_date').datepicker({
                                                    uiLibrary: 'bootstrap4',
                                                    format: 'yyyy-mm-dd'
                                                });
                                            </script>
                                            <!---->
                                        </div>
                                        <div class="col-xl-4 col-sm-6 mb-2">
                                            <div id="arrival_div" class=""><p>End date</p>
                                                <input class="form-control input-lg" type='text' id="bf_e_date"
                                                       name='e_date'
                                                       value="{{date('Y-m-d')}}" required/>
                                                <script>
                                                    $('#bf_e_date').datepicker({
                                                        uiLibrary: 'bootstrap4',
                                                        format: 'yyyy-mm-dd'
                                                    });
                                                </script>
                                            </div>
                                            <!---->
                                        </div>
                                        <div class="col-xl-4 col-sm-6 mb-2">
                                            <div id="arrival_div" class="">
                                                <p>Farm</p>
                                                <select class="form-control input-lg" name="farm" id="farm">