@extends('layouts/contentLayoutMaster')

@section('title', 'Operators')

@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">Operator</h4>
                </div>
                <div class="card-body">
                    <form class="form-add-operator">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="beneficiary_inclusion_sla">Inclusion SLA</label>
                                    <input type="text" id="beneficiary_inclusion_sla" class="form-control"
                                        placeholder="Inclusion SLA" name="beneficiary_inclusion_sla" required />
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="beneficiary_exclusion_sla">Exclusion SLA</label>
                                    <input type="text" id="beneficiary_exclusion_sla" class="form-control"
                                        placeholder="Exclusion SLA" name="beneficiary_exclusion_sla" required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="beneficiary_registration_changes_sla">Registration Changes
                                        SLA</label>
                                    <input type="text" id="beneficiary_registration_changes_sla" class="form-control"
                                        placeholder="Registration Changes SLA" name="beneficiary_registration_changes_sla"
                                        required />
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="beneficiary_second_card">Second Card</label>
                                    <input type="text" id="beneficiary_second_card" class="form-control"
                                        placeholder="Second Card" name="beneficiary_second_card" required />
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="reset" class="btn btn-primary me-1" id="btnAddOperators">Add</button>
                                <button type="reset" class="btn btn-outline-secondary" id="btnReset">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>
@endsection
@section('page-script')
<script>
    $(function() {
        'use strict';

        $(".form-add-operator").validate({
            rules: {
                beneficiary_inclusion_sla: 'required',
                beneficiary_exclusion_sla: 'required',
                beneficiary_registration_changes_sla: 'required',
                beneficiary_second_card: 'required',
            },
            messages: {
                beneficiary_inclusion_sla: "The inclusion field is required",
                beneficiary_exclusion_sla: "The exclusion is required",
                beneficiary_registration_changes_sla: "The registration field is required",
                beneficiary_second_card: "The second card is required",
            }
        });

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

            eve.preventDefault();

            $(".form-add-operator").submit();

        });

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

            eve.preventDefault();

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

                let json = Object.fromEntries((new FormData($(".form-add-operator").get(0)))
                    .entries());

                try {

                    let {
                        data: response
                    } = await axios({
                        url: `{{ route('api.operators.store') }}`,
                        method: 'post',
                        data: json,
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}"
                        }
                    }).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: 'error',
                                cancelButtonText: 'Fechar'
                            })
                        } else if (response.status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: 'O recurso requisitado não foi encontrado',
                                icon: 'error',
                                cancelButtonText: 'Fechar'
                            })
                        } else {

                            Swal.fire({
                                title: 'Ops!',
                                text: 'Ocorreu um erro tentando realizar o cadastro',
                                icon: 'error',
                                cancelButtonText: 'Fechar'
                            })

                        }

                    });

                    Swal.fire({
                        title: 'Uhuul!',
                        text: 'O operador foi adicionado com sucesso.',
                        icon: 'success',
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = '{{ route("dashboard.operators.index") }}'
                        }
                    })


                } catch (e) {

                }
            }

        });

        $('#btnReset').on('click', function() {
            window.location.href = '{{ route("dashboard.operators.index") }}';
        });


    });
</script>
@endsection