@extends('layouts.app')

@push('css')
<link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<style>
    .input-material{
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    .loading {
        z-index: 20;
        position: fixed;
        top: 0;
        left: -5px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-content: center;
        align-self: center;
    }

    .loading-content {
        display: flex;
        justify-content: center;
        align-content: center;
        align-self: center;
        width: 50px;
        height: 50px;
    }
    .hiden{
        display: none;
    }
    .loader-image {
        width: 220px;
        z-index: 20;
    }
    .loader {
        z-index: 25;
        width: 150px;
        height: 150px;
        padding: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #0b5cd7;
        --_m:
            conic-gradient(#0000 10%,#000),
            linear-gradient(#000 0 0) content-box;
        -webkit-mask: var(--_m);
                mask: var(--_m);
        -webkit-mask-composite: source-out;
                mask-composite: subtract;
        animation: l3 1s infinite linear;
    }
    @keyframes l3 {to{transform: rotate(1turn)}}
    li.select2-results__option.select2-results__option--disabled{
        color: #3E4144 !important;
        font-family: 'SKFSans-Medium' !important;
    }
</style>

@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <h3 class="texto-obscuro">Añade una sucursal</h3>
                    {{-- <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('reparacions') }}">Reparaciones</a><span class="breadcrumb-item active">Confirmación de envío del equipo</span></nav> --}}
                </div>
            </div>
            <div class="row">
                {!! Form::open(['route' => 'sucursales-update','class' => 'formulario-suc col-12','files' => true,'id' => 'form_suc']) !!}
                    <div class="empty-space-30"></div>
                    @include('sucursales.create_sucursal_fields')
                    <div class="empty-space-30"></div>
                    <input type="hidden" id="id" value="{{$id}}" name="id">
                {!! Form::close() !!}
            </div>
            <div class="empty-space-50"></div>
            <div class="row botonera-inferior">
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('sucursales') }}" class="btn btn-secundario text-white width-250">Cancelar <span><-</span></a>
                    <button type="button" id="crear_suc" class="btn btn-principal width-250">Enviar solicitud<span>-></span></button>
                </div>
            </div>
            <div class="empty-space-50"></div>
        </div>
    </div>
    <section id="loading">
        <div id="loading-content" class="hiden">
            <div class="loader"></div>
        </div>
    </section>
@endsection

@push('scripts')
<script src="{{ asset('js/select2/select2.min.js') }}"></script>
<script src="{{ asset('js/validaciones/validaciones.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<script>

        var url_dinamica = "{{ url('/') }}";

        $('.js-example-basic-single').select2({});

        var selectOne = '';
        $(document).ready(function(){
        function cargarMunicipios(){
            var id = $('#entidad').val();
            var estado = $('#entidad option:selected')[0].label;
            var municipioSeleccionado = $('#municipio').val();

            $('#municipio').empty();

            $.ajax({
                url: url_dinamica+'/api/getMunicipios/'+id,
                method: 'GET',
                dataType: 'json',
                success: function(value){

                    $.each(value.data, function(key, valor){
                        var selected = (municipioSeleccionado && municipioSeleccionado == valor.id_mun) ? 'selected' : '';

                        $('#municipio').append('<option value="'+valor.id_mun+'" '+selected+'>'+valor.municipio+'</option>');
                    });

                    $('#municipio').select2();

                    if (municipioSeleccionado) {
                        $('#municipio').val(municipioSeleccionado).trigger('change');
                    }
                },
                error: function(xhr, error, valor){
                    console.log('Error al obtener municipios');
                }
            });
        }

        $('#entidad').change(function(){
            cargarMunicipios();
        });

        if ($('#entidad').val() != '') {
            cargarMunicipios();
        }
    });

        $('#municipio').change(function(){
            var id = $(this).val();
            console.log(id);
            selectOne = id;
        })

        $('#crear_suc').click(function(){
            $('#crear_suc').attr('disabled');
            validar();
        });

        function validar(){
                var validacion = true;

                if(!validar_texto('#empresa',0,1))
                    {
                        console.log('empresa');
                        validacion = false;
                        $("#empresa_mensaje").text('Los datos proporcionados no son validos');
                        $("#empresa_mensaje").slideDown();
                        $("#empresa").addClass('is-invalid');
                    }else{
                        $("#empresa_mensaje").slideUp();
                        $("#empresa_mensaje").text('');
                        $("#empresa").removeClass('is-invalid');
                    }

                if(!validar_texto('#nombre_sucursal',0,1))
                    {
                        console.log('nombre_sucursal');
                        validacion = false;
                        $("#nombre_sucursal_mensaje").text('Los datos proporcionados no son validos');
                        $("#nombre_sucursal_mensaje").slideDown();
                        $("#nombre_sucursal").addClass('is-invalid');
                    }else{
                        $("#nombre_sucursal_mensaje").slideUp();
                        $("#nombre_sucursal_mensaje").text('');
                        $("#nombre_sucursal").removeClass('is-invalid');
                    }

                if(!validar_texto('#direccion',0,1))
                {
                    console.log('direccion');
                    validacion = false;
                    $("#direccion_mensaje").text('Los datos proporcionados no son validos');
                    $("#direccion_mensaje").slideDown();
                    $("#direccion").addClass('is-invalid');
                }else{
                    $("#direccion_mensaje").slideUp();
                    $("#direccion_mensaje").text('');
                    $("#direccion").removeClass('is-invalid');
                }

                if(!validar_texto('#codigo_postal',0,1))
                {
                    console.log('codigo_postal');
                    validacion = false;
                    $("#codigo_postal_mensaje").text('Los datos proporcionados no son validos');
                    $("#codigo_postal_mensaje").slideDown();
                    $("#codigo_postal").addClass('is-invalid');
                }else{
                    $("#codigo_postal_mensaje").slideUp();
                    $("#codigo_postal_mensaje").text('');
                    $("#codigo_postal").removeClass('is-invalid');
                }

                // if(selectOne == 0)
                //     {
                //         $("#ciudad_mensaje").text('Debes de seleccionar una opción válida.');
                //         $("#ciudad_mensaje").slideDown();
                //         validacion = false;
                //         $("#muncipio").addClass('is-invalid');
                //         $(".select2-selection--single").css('border-bottom','1px solid #f86c6b !important');
                //     }else{
                //         $("#ciudad_mensaje").slideUp();
                //         $("#ciudad_mensaje").text('');
                //         $("#muncipio").removeClass('is-invalid');
                //         $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
                //     }

                if(validacion){
                    showLoading();
                    $('#crear_suc').html('Cargando...');
                    $('.formulario-suc').submit();
                    $('#crear_suc').html('Cargando...');
                }else{
                    $("#validacion").modal();
                    $('#crear_suc').removeAttr('disabled');
                    hideLoading();
                }
            }

        function showLoading() {
            document.querySelector('#loading').classList.add('loading');
            document.querySelector('#loading-content').classList.add('loading-content');
            document.querySelector('#loading-content').classList.remove('hiden');
        }

        function hideLoading() {
            document.querySelector('#loading').classList.remove('loading');
            document.querySelector('#loading-content').classList.remove('loading-content');
            document.querySelector('#loading-content').classList.add('hiden');
        }


</script>

@endpush