@extends('layouts.app')

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

@section('content')

@section('page-function', 'Home')

<!-- Content (Page) -->
<section class="content">
    <div class="container-fluid">
        @include('template.alert')
        <div class="row">
            <div class="col-12 mt-2">
                <div class="card card-outline card-primary">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <button data-toggle="modal" data-target="#modal-default"
                                    class="btn btn-sm btn-outline-primary"><i class="fas fa-plus primary"></i>
                                    INCLUIR NOVO ANIMAL</button>
                                <a href="#espera" id="btn_espera" class="btn btn-sm btn-outline-success"><i
                                        class="fas fa-clipboard-list success"></i> LISTA DE ESPERA</a>
                                <a href="#castracao" id="btn_castracao" class="btn btn-sm btn-outline-danger"><i
                                        class="far fa-eye danger"></i> CASTRAÇÃO AGENDADA </a>
                                <a href="#cancelados" id="btn_canceladas" class="btn btn-sm btn-outline-info"><i
                                        class="fas fa-window-close info"></i> CANCELADOS </a>
                                <a href="#finalizados" id="btn_finalizados" class="btn btn-sm btn-outline-dark"><i
                                        class="fas fa-check dark"></i> FINALIZADOS </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12  mt-2">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Consulta</h3>
                    </div>

                    <div class="card-body">
                        <form id="ordemForm">
                            @csrf
                            <table class="table table-bordered yajra-datatable col-sm-12" id="myTable">
                                <thead>
                                    <tr>
                                        <th>R.I</th>
                                        <th>ANIMAL</th>
                                        <th>TUTOR</th>
                                        <th>CONTATO TUTOR</th>
                                        <th>DATA ENTRADA</th>
                                        <th>ETAPA</th>
                                        <th>GERENCIAR</th>
                                    </tr>
                                </thead>
                            </table>
                        </form>
                    </div>
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</section><!-- /.content -->
@include('castracao.widgets.adicionar-modal')
@include('castracao.widgets.contato-modal')
@include('castracao.widgets.finalizar-modal')
@include('castracao.widgets.cancelar-modal')
@include('castracao.widgets.ausencia-modal')
@include('castracao.widgets.reagendar-modal')
@push('scripts')
<script>
    $(function () {
        var csrf_token = "{{ csrf_token() }}";
        var idTipo, idSexo, idAnimal;
        var hash = window.location.hash;
        switch (hash) {
            case '#espera':
                var dataToFetch = {
                    status: 1
                };
                break;
            case '#castracao':
                var dataToFetch = {
                    status: 4
                };
                break;
            case '#cancelados':
                var dataToFetch = {
                    status: 7
                };
                break;
            case '#finalizados':
                var dataToFetch = {
                    status: 8
                };
                break;
            default:
                var dataToFetch = {
                    status: 1
                };
                break;
        }
        var table = $('#myTable').DataTable({
            responsive: true,
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/pt-BR.json',
            },
            processing: true,
            serverSide: true,
            searchDelay: 1000,
            ajax: {
                url: "{{route('castracao.json')}}",
                type: 'GET',
                data: function (d) {
                    return $.extend(d, dataToFetch);
                }
            },
            deferRender: true,
            dom: 'Bfrtip',
            columns: [
                {
                    data: 'registro_interno',
                    name: 'registro_interno'
                },
                {
                    data: 'animal',
                    name: 'animal'
                },
                {
                    data: 'tutor',
                    name: 'tutor'
                },
                {
                    data: 'contato',
                    name: 'contato',
                    orderable: false
                },
                {
                    data: 'data_entrada',
                    name: 'data_entrada'
                },
                {
                    data: 'etapa',
                    name: 'etapa'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });

        $("#btn_espera").click(function () {
            dataToFetch.status = 1;
            table.ajax.reload();
        });

        $("#btn_castracao").click(function () {
            dataToFetch.status = 4;
            table.ajax.reload();
        });

        $("#btn_canceladas").click(function () {
            dataToFetch.status = 7;
            table.ajax.reload();
        });

        $("#btn_finalizados").click(function () {
            dataToFetch.status = 8;
            table.ajax.reload();
        });

        $(document).on('click', "#reagendar-triagem", function () {
            // Use event delegation since the buttons are added dynamically
            idTipo = $(this).data('tipo-id');
            idSexo = $(this).data('sexo-id');
            idAnimal = $(this).data('animal-id');
        });

        $('#animal').select2({
            placeholder: 'Digite o nome ou id do animal / tutor',
            language: "pt-BR",
            delay: 500,
            minimumInputLength: 1,
            dropdownParent: $('#modal-default'),
            ajax: {
                url: "{{route('animal.busca')}}",
                data: function (params) {
                    if (isNumeric(params.term)) {
                        return {
                            id: params.term,
                        }
                    } else {
                        return {
                            nome: params.term,
                        }
                    }
                },
            }
        });

        // listening for show event of modal_contato's modal
        $('#modal_contato').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var id_castracao_animal = button.data('castracao-id'); // Extract info from data-* attributes

            $('#id_castracao_animal').val(id_castracao_animal);
        });

        // listening for show event of modal_finalizar's modal
        $('#modal_finalizar').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var id_castracao_animal = button.data('castracao-id'); // Extract info from data-* attributes

            $('#id_castracao').val(id_castracao_animal);
        });

        // listening for show event of modal_cancelar's modal
        $('#modal_cancelar').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var id_castracao_animal = button.data('castracao-id'); // Extract info from data-* attributes

            $('#id_castracao_cancelar').val(id_castracao_animal);
        });

        $('#modal_ausencia').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var id_castracao_animal = button.data('castracao-id'); // Extract info from data-* attributes


            $('#id_castracao_ausencia').val(id_castracao_animal);
        });

        $('#modal_reagendar').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var id_castracao_animal = button.data('castracao-id'); // Extract info from data-* attributes

            $('#id_castracao_reagendar').val(id_castracao_animal);
        });
        $('#modal_reagendar').on('hidden.bs.modal', function (event) {
            // Clear modal after close to avoid data conflicts
            $('#clinicas').val('');
            $('#data_reagendamento').val('');
            $('#cota_disponivel').val('');
            $('#id_cota').val('');
            $('#reagendar').prop('disabled', true);
        });
        $('#data_agendamento').datetimepicker({
            format: 'DD/MM/YYYY HH:mm',
            locale: 'pt-br',
            sideBySide: true,
            minDate: new Date()
        });

        $('#data_reagendamento').datetimepicker({
            format: 'DD/MM/YYYY HH:mm',
            locale: 'pt-br',
            sideBySide: true,
            minDate: new Date()
        });

        $("input[name='flexRadioDefault']").change(function () {
            if ($(this).val() == 1) {
                $("#data_agendamento").prop('disabled', false);
                $('#div_triagem').show();
            } else {
                $("#data_agendamento").prop('disabled', true);
                $('#div_triagem').hide();
            }
        });

        $('#clinicas').on('change', function () {
            $('#data_agendamento').attr('placeholder', 'Data de agendamento da castração');
            $('#data_reagendamento').attr('disabled', true);
            $('#reagendar').prop('disabled', true);
            var clinica = $(this).val();
            if (clinica == null || clinica == '') {
                return false;
            }
            var cota = 0;

            $.ajax({
                url: "{{route('cota.get')}}",
                type: 'GET',
                data: {
                    clinica_id: clinica,
                    tipo_id: idTipo,
                    sexo_id: idSexo,
                    animal_id: idAnimal,
                    _token: csrf_token
                },
                dataType: 'json',
                beforeSend: function () {
                    $('#cota_disponivel').val('Carregando...');
                    $('#reagendar').attr('disabled', true);
                },
                success: function (data) {
                    cota = data.cota;
                    if (cota.quantidade == null || cota.quantidade == 0) {
                        $('#cota_disponivel').val('Não há cota disponível para este animal');
                        return;
                    }
                    $('#cota_disponivel').val(cota.quantidade);
                    $('#id_cota').val(cota.cota_id)
                    $('#reagendar').prop('disabled', false);
                }
            });

            $.ajax({
                url: "{{  route('getEnabledDatesFromAgenda')  }}",
                type: 'GET',
                data: {
                    clinica_id: clinica,
                    tipo_id: idTipo,
                    sexo_id: idSexo,
                    animal_id: idAnimal,
                    _token: csrf_token
                },
                dataType: 'json',
                beforeSend: function () {
                    $('#reagendar').attr('disabled', true);
                },
                success: function (data) {
                    availableDates = data.data;
                    $('#data_reagendamento').datetimepicker('destroy');
                    if (availableDates.length == 0) {
                        $('#data_reagendamento').datetimepicker({
                            format: 'DD/MM/YYYY HH:mm',
                            locale: 'pt-br',
                            sideBySide: true,
                            useCurrent: false,
                            minDate: new Date(),
                        })

                        $('#data_reagendamento').datetimepicker('disable');
                        $('#data_reagendamento').attr('placeholder', 'Não há datas disponíveis nesta clínica');
                        return;
                    }
                    $('#data_reagendamento').datetimepicker({
                        format: 'DD/MM/YYYY HH:mm',
                        locale: 'pt-br',
                        sideBySide: true,
                        minDate: new Date(),
                        useCurrent: false,
                        enabledDates: availableDates,
                    });
                    $('#data_reagendamento').attr('disabled', false);
                },
                error: function (data) {
                    $('#data_reagendamento').datetimepicker('destroy');
                    $('#data_reagendamento').datetimepicker({
                        format: 'DD/MM/YYYY HH:mm',
                        locale: 'pt-br',
                        sideBySide: true,
                        useCurrent: false,
                        minDate: new Date()
                    });
                    $('#data_reagendamento').attr('disabled', false);
                }
            });


        });
    });

    $(document).on('select2:open', () => {
        document.querySelector('.select2-search__field').focus();
    });

    function isNumeric(str) {
        if (typeof str != "string") return false // we only process strings!
        return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
            !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
    }
</script>
@endpush
@endsection