@extends('layouts.app', ['activePage' => 'sucursales', 'titlePage' => __('Sucursales')])
@section('content')

@include('catalogo.domicilios.domicilios', ['Paises' => $paises])
<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-primary">
                        <div class="row">
                            <div class="col-4">
                                <h4 class="card-title "> @if(isset($sucursal)) Editar @else Nueva @endif
                                    Sucursal</h4>
                            </div>
                            <div class="col-8" align="right">

                            </div>
                        </div>
                    </div>
                    <div class="card card-body">
                        <div class="row">
                            <div class="col-12">
                                <form action="{{ url('config/sucursales/guarda_sucursal')}}" id="frm_guarda_sucursal" method="post">
                                    @csrf
                                    <input type="hidden" id="idSucursalHidden" name="idSucursalHidden" @if(isset($sucursal)) value="{{ $sucursal->Id }}" @else value="" @endif>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Numero de Sucursal <span class="text-danger">*</span></label></label>
                                                <input type="number" class="form-control" name="numero_sucursal" @if(isset($sucursal)) value="{{ $sucursal->Sucursal }}" @else value="" @endif required>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Nombre</label>
                                                <input type="text" class="form-control" name="nombre_sucursal" @if(isset($sucursal)) value="{{ $sucursal->Descripcion }}" @else value="" @endif>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Nombre Gerente</label>
                                                <input type="text" class="form-control" name="gerente_sucursal" @if(isset($sucursal)) value="{{ $sucursal->Gerente }}" @else value="" @endif>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                    <div class="col-md-4">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Teléfono <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control" name="Telefono" @if(isset($sucursal)) value="{{ $sucursal->Telefono }}" @else value="" @endif required>
                                                <small class="form-text text-muted">
                                                    Número teléfonico
                                                </small>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Calle <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="calle" @if(isset($sucursal)) value="{{ $sucursal->Calle }}" @else value="" @endif required>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="input-group input-group-static mb-4">
                                                <label>N. Exterior <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="numero_exterior" maxlength="4" @if(isset($sucursal)) value="{{ $sucursal->NumeroExterior }}" @else value="" @endif required>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group input-group-static mb-4">
                                                <label>N. Interior</label>
                                                <input type="text" class="form-control" name="numero_interior" maxlength="4" @if(isset($sucursal)) value="{{ $sucursal->NumeroInterior }}" @else value="" @endif>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Tasa IVA</label>
                                                <input type="number" class="form-control" name="tasa_iva" @if(isset($sucursal)) value="{{ $sucursal->TasaIVA }}" @else value="" @endif>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Hora Local</label>
                                                <input type="number" class="form-control" name="hora_local" @if(isset($sucursal)) value="{{ $sucursal->HoraLocal }}" @else value="" @endif>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Almacen</label>
                                                <select class="form-control" id="almacen" name="almacen">
                                                    <option disabled selected value="">
                                                        -[Selecciona una opción]-
                                                    </option>
                                                                                                    </select>
                                                <small class="form-text text-muted">
                                                                                                    </small>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row jumbotron">
                                        <div class="col-3">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Colonia <span class="text-danger">*</span></label>
                                                <input type="text" id="coloniaV" class="form-control" disabled @if(isset($sucursal)) value="{{$colonia->Descripcion}}" colonia_id="{{$colonia->Id}}" @else value="" colonia_id="" @endif>
                                                <input type="hidden" id="colonia" name="colonia" class="form-control" @if(isset($sucursal)) value="{{$colonia->Id}}" @else value="" @endif required>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Pais <span class="text-danger">*</span></label>
                                                <input type="text" id="paisV" class="form-control" disabled>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Estado <span class="text-danger">*</span></label>
                                                <input type="text" id="estadoV" class="form-control" disabled>
                                            </div>
                                        </div>
                                        <div class="col-3 text-center">
                                            <a href="" class="btn btn-primary center" data-bs-toggle="modal" data-bs-target="#crearDomicilio">
                                                @if(isset($sucursal)) <i class="fa fa-pencil"></i>
                                                Editar
                                                @else
                                                <i class="fa fa-plus"></i> Agregar
                                                @endif
                                                domicilio
                                            </a>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-3">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Municipio <span class="text-danger">*</span></label>
                                                <input type="text" id="municipioV" class="form-control" disabled>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group input-group-static mb-4">
                                                <label>Población <span class="text-danger">*</span></label>
                                                <input type="text" id="poblacionV" class="form-control" disabled>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group input-group-static mb-4">
                                                <label>CP <span class="text-danger">*</span></label>
                                                <input type="text" id="cpV" class="form-control" disabled>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 mt-2" align="right">
                                            <a href="{{ url('config/sucursales') }}" class="btn btn-danger ">Cancelar</a>
                                            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Guardar
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(".datepicker").flatpickr({
            minDate: "today"
        });

        getInfoDomicilio();
    });

    $Colonia.addEventListener('change', async (event) => {
        const $coloniaValue = $Colonia.options[$Colonia.selectedIndex].value;
        $btnIdentificarColonia.disabled = false;
        $formColoniaDomicilio.addEventListener('submit', async (event) => {
            event.preventDefault();
            console.log($coloniaValue);
            fetchRequest('{{url("/domicilios/colonias/identificador")}}', {
                    id: $coloniaValue
                })
                .then(response => {
                    ({
                        status,
                        message,
                        payload
                    } = response);
                    ({
                        colonia,
                        estado,
                        municipio,
                        pais,
                        poblacion
                    } = payload);
                    if (status == 200) {
                        Swal.fire({
                            type: 'success',
                            title: '¡Colonia Identificada!',
                            showConfirmButton: false,
                            timer: 2500
                        });
                        $('#crearDomicilio').modal('hide');
                        $('#paisV').val(pais.Pais);
                        $('#estadoV').val(estado.Estado);
                        $('#municipioV').val(municipio.Municipio);
                        $('#poblacionV').val(poblacion.Descripcion);
                        $('#coloniaV').attr('colonia_id', colonia.Id);
                        $('#colonia').val(colonia.Id);
                        $('#coloniaV').val(colonia.Descripcion);
                        $('#cpV').val(colonia.CodigoPostal)
                    }
                    if (status == 404) {
                        Swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            text: 'ID incorrecto'
                        });
                        $('#paisV').val('')
                        $('#estadoV').val('')
                        $('#municipioV').val('')
                        $('#poblacionV').val('')
                        $('#coloniaV').val('')
                        $('#cpV').val('')
                    }
                })
        })
    })

    function getInfoDomicilio() {
        if ($('#coloniaV').val() != '') {
            var Colonia_id = $('#coloniaV').attr('colonia_id');
            $.ajax({
                    url: '{{ url("catalogo/empresas/get_infocol" )}}',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: Colonia_id,
                    },
                })
                .done(function(resp) {
                    console.log(resp.data);
                    $('#paisV').val(resp.data.pais['Pais']);
                    $('#estadoV').val(resp.data.estado['Estado']);
                    $('#municipioV').val(resp.data.municipio['Municipio']);
                    $('#poblacionV').val(resp.data.poblacion['Descripcion']);
                    $('#cpV').val(resp.data.colonia['CodigoPostal'])
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
        }
    }

    $('#addC').click(function() {
        $('#crearDomicilio').modal('show')
    })

    $('#addC').click(function() {
        $('#crearDomicilio').modal('show')
    })

    $("#frm_guarda_sucursal").submit(function(event) {


        var msj = "";
                    msj = "¡Se ha registrado con éxito!";
        
        event.preventDefault(); // Prevent the form from submitting via the browser
        var form = $(this);
        $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                dataType: 'json',
                data: form.serialize()
            })
            .done(function(resp) {
                // console.log(resp);
                if (resp.status == 1) {

                    Swal.fire({
                        type: 'success',
                        title: msj,
                        showConfirmButton: false,
                        timer: 2500
                    });

                    setTimeout(() => {
                        window.location.href = "{{ url('config/sucursales') }}";
                    }, 2600)


                } else {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: resp.msg
                    })
                }
            })
            .fail(function(resp) {
                // console.log("error");

                Swal.fire({
                    type: 'error',
                    title: 'Cambie el numero de sucursal y vuelva a guardar',
                    text: resp.msg
                })

            })
            .always(function() {
                // console.log("complete");
            });

    });
</script>
@endsection