@extends('layouts.app')

@section('title', 'Página Inicial')

@section('content')

@section('page-function', 'Página de Relatórios')

<!-- Content (Page) -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Relatório Quantitativo</h4>
                    </div>
                    <div class="card-body">
                        <a class="btn btn-sm btn-primary waves-effect"
                            title="Relatório com a quantidade de animais cadastrados, consultados e castrados."
                            href="{{route('relatorio.quantitativo')}}" target="_blank">
                            Imprimir Relatório Quantitativo
                            <i class="fas fa-info-circle"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Relatório de animais agendados por clínica</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{route('relatorio.agendados')}}" method="get">
                            @csrf
                            <div class="row">
                                <div class="col-sm-12 col-md-4">
                                    <div class="form-group">
                                        <label for="clinica_id">Clínica</label>
                                        <select class="form-control" name="clinica_id" id="clinica_id">
                                            <option value="">Selecione uma clínica</option>
                                            @foreach ($clinicas as $clinica)
                                            <option value="{{$clinica->id}}">{{$clinica->nome}}</option>
                                            @endforeach
                                        </select>

                                        @error('data_inicio')
                                        <p class="danger">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4">
                                    <div class="form-group" id="data_ini">
                                        <label for="data_inicio">Data início do período de consulta</label>
                                        <div class="input-group date" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input"
                                                name="data_inicio" id="data_inicio" data-target="#data_inicio" value=""
                                                placeholder="Data início do período de consulta" />
                                            <div class="input-group-append" data-target="#data_inicio"
                                                data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                            @error('data_inicio')
                                            <p class="danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4">
                                    <div class="form-group" id="data_end">
                                        <label for="data_fim">Data fim do período de consulta</label>
                                        <div class="input-group date" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input" name="data_fim"
                                                id="data_fim" data-target="#data_fim" value=""
                                                placeholder="Data fim do período de consulta" />
                                            <div class="input-group-append" data-target="#data_fim"
                                                data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                            @error('data_fim')
                                            <p class="danger">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-sm btn-primary waves-effect"
                                title="Relatório de animais agendados por clínica.">
                                Gerar Relatório
                                <i class="fas fa-info-circle"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@push('scripts')
<script>
    $(function () {
        $('#data_inicio').datetimepicker({
            format: 'DD/MM/YYYY',
            locale: 'pt-br'
        });
        $('#data_fim').datetimepicker({
            format: 'DD/MM/YYYY',
            locale: 'pt-br',
            useCurrent: false
        });
        $("#data_inicio").on("change.datetimepicker", function (e) {
            $('#data_fim').datetimepicker('minDate', e.date);
        });
        $("#data_fim").on("change.datetimepicker", function (e) {
            $('#data_inicio').datetimepicker('maxDate', e.date);
        });
    });
</script>
@endpush
@endsection