@extends('layouts/contentLayoutMaster')

@section('title', __('locale.DependentsDocuments'))

@section('content')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
    <!-- Page css files -->
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
@endsection

<section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('locale.Table.Dependents.Document.Column.CardTitle') }}</h4>
                </div>
                <div class="card-body">
                    <form class="form-add-dependent-document" enctype="multipart/form-data">
                        <input type="hidden" name="dependent_id" value="{{ $dependent->id }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="document">{{ __('locale.Table.Dependents.Document.Column.Document') }}</label>
                                    <input type="file" id="document" class="form-control" placeholder="document" name="document" accept="image/jpeg, image/png, image/jpg" onchange="validateFile()" required />
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="type">{{ __('locale.Table.Dependents.Document.Column.TypeDocument') }}</label>
                                    <select id="type" class="form-select" name="type" required>
                                        <option value="0">{{ __('locale.Table.Dependents.Document.Column.TypeCPF') }}</option>
                                        <option value="1">{{ __('locale.Table.Dependents.Document.Column.TypeRG') }}</option>
                                        <option value="2">{{ __('locale.Table.Dependents.Document.Column.TypeCNH') }}</option>
                                        <option value="3">{{ __('locale.Table.Dependents.Document.Column.TypeCTPS') }}</option>
                                        <option value="4">{{ __('locale.Table.Dependents.Document.Column.TypeBirthCertificate') }}</option>
                                        <option value="5">{{ __('locale.Table.Dependents.Document.Column.TypePassport') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary me-1"
                                    id="btnAddDependentDocuments">{{ __('locale.Table.Dependents.Document.Column.Add') }}</button>
                                <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.Dependents.Document.Column.Back') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('vendor-script')
<!-- vendor files -->
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/jquery-mask/jquery.mask.js')) }}"></script>

@endsection
@section('page-script')
<script>
    $('.document').on('change', async function(event) {
            validateFile();

            console.log('aqui')

        function validateFile() {
            const fileInput = document.getElementById('fileInput');
            const errorMessage = document.getElementById('error-message');
            const allowedExtensions = ['png', 'pdf', 'jpg','docx','jpeg','dock'];
            const maxFileSize = 5 * 1024; // 5 KB

            const file = fileInput.files[0];

            if (file) {
                // Verificar tamanho do arquivo
                if (file.size > maxFileSize) {
                    errorMessage.textContent = '{{ __("locale.Table.Dependents.Document.Column.ErrorMaxFileSize") }}';
                    fileInput.value = ''; // Limpar o input
                    return;
                }

                // Verificar extensão do arquivo
                const fileExtension = file.name.split('.').pop().toLowerCase();
                if (!allowedExtensions.includes(fileExtension)) {
                    errorMessage.textContent = '{{ __("locale.Table.Dependents.Document.Column.ErrorFileExtension") }}';
                    fileInput.value = ''; // Limpar o input
                    return;
                }

                // Limpar mensagens de erro se o arquivo for válido
                errorMessage.textContent = '';
            }
        }

            });

    $(function() {
        'use strict';

        $.validator.addMethod("fileRequired", function(value, element) {
            return element.files.length > 0;
        }, "{{ __('locale.Table.Dependents.Document.Column.ErrorFileExtension') }}");

        $(".form-add-dependent-document").validate({

            rules: {
                dependent_id: 'required',
                type: 'required',
                document:  {fileRequired: true},

            },
            messages: {
                dependent_id: "{{ __('locale.Table.Dependents.Document.Column.RequiredDependentId') }}",
                type: "{{ __('locale.Table.Dependents.Document.Column.RequiredType') }}",
                document: "{{ __('locale.Table.Dependents.Document.Column.RequiredDocument') }}",
            }
        });


        $('#btnAddDependentDocuments').on("click", async function(eve) {

            eve.preventDefault();

            $(".form-add-dependent-document").submit();

            });

        });

        $(".form-add-dependent-document").on("submit", async function(eve) {

            eve.preventDefault();

            if ($(".form-add-dependent-document").get(0).checkValidity()) {

                let formdata = new FormData($(".form-add-dependent-document").get(0));

                try {
                    let {
                        data: response
                    } = await axios({
                        url: `{{ route('api.dependents.documents.store') }}`,
                        method: 'post',
                        data: formdata,
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}",
                            "Content-Type": "multipart/form-data"
                        }
                    }).catch((e) => {

                        let response = e.response;

                        @if (env('APP_DEBUG'))
                            console.warn(e)
                        @endif

                        if (response.status === 400 || response.status === 422) {
                            Swal.fire({
                                title: 'Ops!',
                                text: response.data.message,
                                icon: "{{ __('locale.Table.Dependents.Document.Column.Error') }}",
                                cancelButtonText: "{{ __('locale.Table.Dependents.Document.Column.Close') }}"
                            })
                        } else if (response.status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Table.Dependents.Document.Column.Status404Error') }}",
                                icon: "{{ __('locale.Table.Dependents.Document.Column.Error') }}",
                                cancelButtonText: "{{ __('locale.Table.Dependents.Document.Column.Close') }}"
                            })
                        } else {

                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Table.Dependents.Document.Column.ErrorForm') }}",
                                icon: "{{ __('locale.Table.Dependents.Document.Column.Error') }}",
                                cancelButtonText: "{{ __('locale.Table.Dependents.Document.Column.Close') }}"
                            })

                        }

                    });

                    Swal.fire({
                        title: 'Uhuul!',
                        text: "{!! __('locale.Table.Dependents.Document.Column.AddSuccess') !!}",
                        icon: "{{ __('locale.Table.Dependents.Document.Column.Success') }}",
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href =
                                '{{ route('dashboard.dependents_documents.index', $dependent->id) }}'
                        }
                    })


                } catch (e) {

                }
            }

        });

        $('#btnReset').on('click', function() {
            window.location.href = '{{ route('dashboard.dependents_documents.index', $dependent->id) }}';
        });

</script>
@endsection