@extends('layouts.app')

@section('title', 'Cadastrar Cotas')

@section('content')

@section('page-function', 'Distribuição de cotas')

<section class="content">
    <div class="container-fluid">
        @include('template.alert')
        <div class="row">
            <div class="col-12">
                <div class="card card-info">
                    <div class="card-header">
                        Distribuição: {{ $cota->nome }}
                    </div>


                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-3 form-group">
                                <label for="total">Total da cota:</label>
                                <input type="number" class="form-control" readonly id="total"
                                    value="{{ $cota->quantidade }}">
                            </div>
                            <div class="col-sm-3 form-group">
                                <label for="restante">Total restante:</label>
                                <input type="number" class="form-control" readonly id="restante" value="">
                            </div>
                        </div>

                        @foreach($clinicas as $clinica)
                        @if((sizeof($cotas) > 0) && (array_key_exists($clinica->id, $cotas)))
                        <div class="row">
                            <div class="col-sm-12 col-md-2">
                                {{ $clinica->nome }}
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="cf">Canino Fêmeas</label>
                                <input type="number" class="form-control" name="cf" id="cf-{{$clinica->id}}"
                                    value="{{(array_key_exists('cf', $cotas[$clinica->id])) ? $cotas[$clinica->id]['cf']['quantidade'] :''}}"
                                    min="0">
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="cm">Canino Machos</label>
                                <input type="number" class="form-control" name="cm" id="cm-{{$clinica->id}}"
                                    value="{{(array_key_exists('cm', $cotas[$clinica->id])) ? $cotas[$clinica->id]['cm']['quantidade'] :''}}"
                                    min="0">
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="ff">Felinos Fêmeas</label>
                                <input type="number" class="form-control" name="ff" id="ff-{{$clinica->id}}"
                                    value="{{(array_key_exists('ff', $cotas[$clinica->id])) ? $cotas[$clinica->id]['ff']['quantidade'] :''}}"
                                    min="0">
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="fm">Felinos Machos</label>
                                <input type="number" class="form-control" name="fm" id="fm-{{$clinica->id}}"
                                    value="{{(array_key_exists('fm', $cotas[$clinica->id])) ? $cotas[$clinica->id]['fm']['quantidade'] :''}}"
                                    min="0">
                            </div>
                        </div>
                        @else
                        <div class="row">
                            <div class="col-sm-12 col-md-2">
                                {{ $clinica->nome }}
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="cf">Canino Fêmeas</label>
                                <input type="number" class="form-control" name="cf" id="cf-{{$clinica->id}}" value=""
                                    min="0">
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="cm">Canino Machos</label>
                                <input type="number" class="form-control" name="cm" id="cm-{{$clinica->id}}" value=""
                                    min="0">
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="ff">Felinos Fêmeas</label>
                                <input type="number" class="form-control" name="ff" id="ff-{{$clinica->id}}" value=""
                                    min="0">
                            </div>
                            <div class="col-sm-12 col-md-2 form-group">
                                <label for="fm">Felinos Machos</label>
                                <input type="number" class="form-control" name="fm" id="fm-{{$clinica->id}}" value=""
                                    min="0">
                            </div>
                        </div>
                        @endif
                        @endforeach
                    </div>
                    <div class="card-footer">
                        <button type="submit" onclick="submit(event)" name="enviar" id="enviar"
                            class="btn btn-primary">Salvar</button>
                    </div>
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</section><!-- /.content -->

@push('scripts')
<script>
    let totalSomado = 0;
    let total;
    let formData = new FormData();
    let distributedCotas = [];
    $(function () {
        total = document.getElementById('total');
        restante = document.getElementById('restante');
        cotasCf = document.getElementsByName('cf');
        cotasCm = document.getElementsByName('cm');
        cotasFf = document.getElementsByName('ff');
        cotasFm = document.getElementsByName('fm');
        $(cotasCf).inputmask('99999')
        restante.value = total.value;
        cotasCf.forEach(element => {
            $(element).on('change', function () {
                if (this.value < 0) {
                    alert('Valor negativo não permitido!');
                    this.value = 0;
                }
                distribuiCota(this.id, this.value);
            });
            if (element.value) {
                $(element).trigger('change');
            }

        });
        cotasCm.forEach(element => {
            $(element).on('change', function () {
                if (this.value < 0) {
                    alert('Valor negativo não permitido!');
                    this.value = 0;
                }
                distribuiCota(this.id, this.value);
            });
            if (element.value) {
                $(element).trigger('change');
            }

        });
        cotasFf.forEach(element => {
            $(element).on('change', function () {
                if (this.value < 0) {
                    alert('Valor negativo não permitido!');
                    this.value = 0;
                }
                distribuiCota(this.id, this.value);
            });
            if (element.value) {
                $(element).trigger('change');
            };
        });
        cotasFm.forEach(element => {
            $(element).on('change', function () {
                if (this.value < 0) {
                    alert('Valor negativo não permitido!');
                    this.value = 0;
                }
                distribuiCota(this.id, this.value);
            });
            if (element.value) {
                $(element).trigger('change');
            }
        });
    });

    function submit($event) {
        if (restante.value < 0) {
            Swal.fire({
                title: 'Atenção!',
                text: 'O valor distribuido é maior que o total da cota!',
                icon: 'warning',
                confirmButtonText: 'Confirmar'
            });
            return;
        }
        $('#enviar').prop('disabled', true);
        const request = new XMLHttpRequest();
        $event.preventDefault();
        formData.append('cota_id', "{{ $cota->id }}");
        formData.append('cotas', JSON.stringify(distributedCotas));
        formData.append('_token', '{{ csrf_token() }}');
        Swal.showLoading();
        postData(formData)
            .then(data => {
                Swal.close();
                if (data.success == true) {
                    Swal.fire({
                        title: 'Cota distribuida com sucesso!',
                        text: 'Confirme para continuar',
                        icon: 'success',
                        confirmButtonText: 'Confirmar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{route('cota.list')}}";
                        }
                    });
                    $('#enviar').prop('disabled', false);
                } else {
                    Swal.close();
                    Swal.fire({
                        title: 'Erro ao distribuir cota!',
                        text: data.message,
                        icon: 'error',
                        confirmButtonText: 'Confirmar'
                    })
                    console.error(data.message);
                    $('#enviar').prop('disabled', false);
                }
            });
        $('#enviar').prop('disabled', false);
    }

    async function postData(formData) {
        const response = await fetch("{{route('cota.distribuir')}}", {
            method: 'POST',
            body: formData
        });
        return response.json();
    }

    function distribuiCota(elementId, value) {
        let index = distributedCotas.findIndex(x => x.id == elementId);
        if (index == -1) {
            distributedCotas.push({
                id: elementId,
                value: parseInt(value)
            });
        } else {
            distributedCotas[index].value = parseInt(value);
        }
        calcultaTotal();
    }

    function calcultaTotal() {
        totalSomado = 0;
        distributedCotas.forEach(element => {
            totalSomado += element.value;
        });
        restante.value = total.value - totalSomado;
        if (restante.value < 0) {
            Swal.fire({
                title: 'Atenção!',
                text: 'O valor distribuido é maior que o total da cota!',
                icon: 'warning',
                confirmButtonText: 'Confirmar'
            });
        }
    }


</script>
@endpush
@endsection