@extends('layouts/contentLayoutMaster')

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

@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.Pages.colab.Title') }}</h4>
                </div> --}}
                <div class="card-body">
                    <form class="form-add-colab">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-12">
                                <div class="mb-1">
                                    <div class="">
                                        <label class="form-label"
                                            for="contract_id">{{ __('locale.Pages.Colab.Label.contract_id') }}</label>
                                            <select id="contract_id" class="form-select"
                                            placeholder="{{ __('locale.Pages.Colab.Label.contract_id') }}"name="contract_id"
                                            required>
                                            @if ($contracts)
                                                @foreach ($contracts as $contract)
                                                    <option value="{{ $contract->id }}">{{ $contract->policy_number }}</option>
                                                @endforeach
                                            @endif
                                            
                                            </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-12">
                                <div class="mb-1">
                                    <div class="">
                                        <label class="form-label"
                                            for="product_id">{{ __('locale.Pages.Colab.Label.product_id') }}</label>
                                            <select id="product_id" class="form-select"
                                            placeholder="{{ __('locale.Pages.Colab.Label.product_id') }}"name="product_id"
                                            required>
                                            @if ($contract_products)
                                                @foreach ($contract_products as $contract_product)
                                                    @if ($contract_product->product)
                                                        <option value="{{ $contract_product->product->id }}">{{ $contract_product->product->name }}</option>
                                                    @endif
                                                @endforeach
                                            @endif
                                            </select>
                                    </div>
                                </div>
                            </div>
                        </div>                   
                        <div class="row">
                            <div class="col-md-6 mb-12">
                                <div class="mb-1">
                                    <div class="">
                                        <label class="form-label"
                                            for="employee_id">{{ __('locale.Pages.Colab.Label.employee_id') }}</label>
                                            <select id="employee_id" class="form-select"
                                            placeholder="{{ __('locale.Pages.Colab.Label.employee_id') }}"name="employee_id"
                                            required>
                                            @if ($employees)
                                                @foreach ($employees as $employee)
                                                    <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                                                @endforeach
                                            @endif
                                            </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label"
                                        for="operator_type">{{ __('locale.Pages.Colab.Label.operator_type') }}</label>
                                    <select class="form-select" name="operator_type"
                                        id="operator_type" required>
                                        <option value="1">{{ __('locale.Pages.Colab.Label.material') }}</option>
                                        <option value="2">{{ __('locale.Pages.Colab.Label.digital') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="operator_number">{{ __('locale.Pages.Colab.Label.operator_number') }}</label>
                                    <input type="text" id="operator_number" class="form-control" autocomplete="off" placeholder="{{ __('locale.Pages.Colab.Label.operator_number') }}"
                                        name="operator_number" required />
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="active_plan" autocomplete="off">{{ __('locale.Pages.Colab.Label.active_plan') }}</label>
                                    <input type="text" id="active_plan" class="form-control" placeholder="{{ __('locale.Pages.Colab.Label.active_plan') }}"
                                        name="active_plan" required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="paid_value" autocomplete="off">{{ __('locale.Pages.Colab.Label.paid_value') }}</label>
                                    <input type="text" id="paid_value" class="form-control money" placeholder="R$:"
                                        name="paid_value" required />
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label"
                                        for="payment_method">{{ __('locale.Pages.Colab.Label.payment_method') }}</label>
                                    <input type="text" id="payment_method" class="form-control" placeholder="{{ __('locale.Pages.Colab.Label.payment_method') }}" name="payment_method"
                                        required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary me-1" id="btnAddEmployee">{{ __('locale.Pages.team.Button.Add') }}</button>
                                <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Pages.team.Button.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/jquery-mask/jquery.mask.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
@endsection
@section('page-script')
<script>
    $(function() {
        'use strict';

        // $('.select2').each(function() {
        //     var $this = $(this);
        //     $this.wrap('<div class="position-relative"></div>');
        //     $this.select2({
        //         dropdownAutoWidth: true,
        //         width: '100%',
        //         dropdownParent: $this.parent()
        //     });
        // });

        $(".form-add-colab").validate({
            rules: {
                contract_id: 'required',
                product_id: 'required',
                employee_id: 'required',
                operator_type: 'required',
                operator_number: 'required',
                active_plan: 'required',
                paid_value: 'required',
                payment_method: 'required',
            },
        });

        $(".money").mask("#.##0,00", {
            reverse: true
        });

        $("#contract_id").on("change", function() {
    // Lógica para obter o contract_id selecionado
    let contract_id = $(this).val();

    // Faz a requisição para obter os produtos associados ao contrato selecionado
    let url = "{{ route('api.products.contract', ['id' => ':id']) }}".replace(':id', contract_id);

    axios.get(url, {
            headers: {
                "Authorization": "Bearer {{ session('Authorization') }}"
            }
        })
        .then(function(response) {
            // Limpa o select2 de products e preenche com os novos dados
            $('#product_id').empty();
            var products = response.data;

            $('#product_id').select2({
                multiple: true,
                data: products.map(function(product) {
                    return {
                        id: product.id,
                        text: product.name
                    };
                })
            });
        })
        .catch(function(error) {
            console.error('Erro na requisição:', error);
        });
});


        // $("#modalAddBroker #form-modal-add-broker").validate({
        //     rules: {
        //         name: 'required',
        //         cnpj: 'required',
        //         susep: 'required',
        //         company_id: 'required',
        //     },
        // });

        // $("#modalAddBroker #btnModalAddBroker").on("click", function() {

        //     $("#form-modal-add-broker").submit();

        // });

        // $("#form-modal-add-broker").on("submit", async function(eve) {

        //     eve.preventDefault();

        //     if ($(this).get(0).checkValidity()) {

        //         let payload = Object.fromEntries((new FormData($(this).get(0))).entries())

        //         let {
        //             data: json,
        //             ...response
        //         } = await axios({
        //                 method: 'post',
        //                 url: `{{ route('api.brokers.store') }}`,
        //                 data: payload,
        //                 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: '{{ __('locale.Pages.team.Error') }}',
        //                         cancelButtonText: '{{ __('locale.Pages.team.Column.CloseButton') }}'
        //                     })
        //                 } else if (response.status === 404) {
        //                     Swal.fire({
        //                         title: 'Ops!',
        //                         text: '{{ __('locale.Pages.team.Column.RequestedNotFound') }}',
        //                         icon: '{{ __('locale.Pages.team.Error') }}',
        //                         cancelButtonText: '{{ __('locale.Pages.team.Column.CloseButton') }}'
        //                     })
        //                 } else {

        //                     Swal.fire({
        //                         title: 'Ops!',
        //                         text: '{{ __('locale.Pages.team.Column.ErrorRegisterOperator') }}',
        //                         icon: '{{ __('locale.Pages.team.Error') }}',
        //                         cancelButtonText: '{{ __('locale.Pages.team.Column.CloseButton') }}'
        //                     })

        //                 }

        //                 return false;

        //             });

        //         let new_select_option = `<option value="${json.id}" select>${json.name}</option>`;

        //         $("#broker_id").append(new_select_option);

        //         $(this).get(0).reset();

        //         $("#modalAddBroker").modal('hide');


        //     }


        // });

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

            eve.preventDefault();

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

        });

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

            eve.preventDefault();

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

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

                    let {
                        data: response
                    } = await axios({
                        url: `{{ route('api.conditions.colabs.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: '{{ __('locale.Pages.team.Error') }}',
                                cancelButtonText: '{{ __('locale.Pages.team.Column.CloseButton') }}'
                            })
                        } else if (response.status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: '{{ __('locale.Pages.team.Column.RequestedNotFound') }}',
                                icon: '{{ __('locale.Pages.team.Error') }}',
                                cancelButtonText: '{{ __('locale.Pages.team.Column.CloseButton') }}'
                            })
                        } else {

                            Swal.fire({
                                title: 'Ops!',
                                text: '{{ __('locale.Pages.team.Column.RegisterError') }}',
                                icon: '{{ __('locale.Pages.team.Error') }}',
                                cancelButtonText: '{{ __('locale.Pages.team.Column.CloseButton') }}'
                            })

                        }

                        return false;

                    });

                    Swal.fire({
                        title: 'Uhuul!',
                        text: '{{ __('locale.Pages.team.Column.RegisterEmployee') }}',
                        icon: '{{ __('locale.Pages.team.Success') }}',
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = `{{ route('dashboard.colabs.index') }}`
                        }
                    })


                } catch (e) {

                }
            }

        });

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


    });
</script>
@endsection