@extends('back.layouts.admin_main')
@section('administrador')

<style>
    .imagen_previa {
        height: 300px; 
        display: flex; 
        align-items: center;
        overflow: hidden;
    }
    .imagen_previa img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>
@php
    $e = $empresa[0] ?? null;
@endphp
<div class="col-12">
    <div class="col-12 bg-white p-3 rounded pb-5 mb-3" style="position: relative;">
        <form action="" id="agregarEmpresa">
            <input type="hidden" name="id" value="{{ $e->id ?? '' }}" class="form-control">
            <div class="col-12">
                <div class="col-12 pt-2 mb-4 border-bottom pb-4">
                    <p class="mb-0">Empresa</p>
                </div>

                <div class="col-12 mt-3">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="border rounded mb-3 imagen_previa bg-dark" id="imagen_previa" style="width: 200px; height: 200px;">
                                @if(optional($e)->path) 
                                    <img src="{{ asset('uploads/empresa/'.$e->path) }}" alt="">
                                @endif
                            </div>
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="file" name="file" id="file" class="form-control">
                                    <label for="">Logo *</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="entidad" value="{{ $e->entidad ?? '' }}" class="form-control">
                                    <label for="">Entidad *</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="ruc" value="{{ $e->ruc ?? '' }}" class="form-control">
                                    <label for="">RUC *</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="telefono" value="{{ $e->telefono ?? '' }}" class="form-control">
                                    <label for="">Teléfono</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="whatsapp" value="{{ $e->whatsapp ?? '' }}" class="form-control">
                                    <label for="">Whatsapp *</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="email" name="correo" value="{{ $e->correo ?? '' }}" class="form-control">
                                    <label for="">Correo Electrónico *</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-9">
                                <div class="form-floating">
                                    <input type="text" name="direccion" value="{{ $e->direccion ?? '' }}" class="form-control">
                                    <label for="">Dirección *</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="facebook" value="{{ $e->facebook ?? '' }}" class="form-control">
                                    <label for="">Facebook</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="instagram" value="{{ $e->instagram ?? '' }}" class="form-control">
                                    <label for="">Instagram</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="tiktok" value="{{ $e->tiktok ?? '' }}" class="form-control">
                                    <label for="">Tiktok</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="youtube" value="{{ $e->youtube ?? '' }}" class="form-control">
                                    <label for="">Youtube</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="linkedin" value="{{ $e->linkedin ?? '' }}" class="form-control">
                                    <label for="">LinkedIn</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="twitter" value="{{ $e->twitter ?? '' }}" class="form-control">
                                    <label for="">Twitter X</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 border-bottom mt-3 pb-1">
                            <label for="">Miami</label>
                        </div>

                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="dir_miami" value="{{ $e->dir_miami ?? '' }}" class="form-control">
                                    <label for="">Dirección Miami</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="tel_miami" value="{{ $e->tel_miami ?? '' }}" class="form-control">
                                    <label for="">Teléfono MIAMI</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 border-bottom mt-3 pb-1">
                            <label for="">Maritimo Miami</label>
                        </div>

                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="dir_maritimo_miami" value="{{ $e->dir_maritimo_miami ?? '' }}" class="form-control">
                                    <label for="">Dirección Maritimo Miami</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="tel_maritimo_miami" value="{{ $e->tel_maritimo_miami ?? '' }}" class="form-control">
                                    <label for="">Teléfono MIAMI</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 border-bottom mt-3 pb-1">
                            <label for="">España</label>
                        </div>

                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="dir_espana" value="{{ $e->dir_espana ?? '' }}" class="form-control">
                                    <label for="">Dirección España</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="col-lg-4">
                                <div class="form-floating">
                                    <input type="text" name="tel_espana" value="{{ $e->tel_espana ?? '' }}" class="form-control">
                                    <label for="">Teléfono MIAMI</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-end" style="position: absolute; top: 20px; right: 15px; width: 230px;">
                @if(isset($empresa[0]))
                    <button type="submit" class="btn btn-dark btn_empresa">MODIFICAR</button>
                @else
                    <button type="submit" class="btn btn-dark btn_empresa">AGREGAR</button>
                @endif
            </div>
        </form> 
    </div>
</div>


<script src="{{ asset('js/jquery.js') }}"></script>
<script>
    $('#agregarEmpresa').submit(function(e){
        e.preventDefault();

        var tipo = $('.btn_empresa').text();

        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('tipo', tipo);

        $.ajax({
            url: "{{ route('back.agregarEmpresa') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                location.reload();
            }
        })
    })

    document.getElementById("file").onchange = function(e) {
        // Creamos el objeto de la clase FileReader
        let reader = new FileReader();

        // Leemos el archivo subido y se lo pasamos a nuestro fileReader
        reader.readAsDataURL(e.target.files[0]);
        var imagen = document.getElementById('file').files[0].name;
        document.getElementById('file').innerHTML = imagen;

        // Le decimos que cuando este listo ejecute el código interno
        reader.onload = function(){
            let preview = document.getElementById('imagen_previa'),
                    image = document.createElement('img');

            image.src = reader.result;

            preview.innerHTML = '';
            preview.append(image);
        };
    }
</script>

@endsection