@include('header')

    <style>
        .ql-toolbar .dropdown {
            display: none;
        }
        .ql-toolbar .ql-link {
            display: none !important;
        }
        .hover-image {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
            z-index: 99;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hover-image:hover {
            background: #0000006b;
            cursor: pointer;
        }
        .hover-image:hover .fa-trash {
            opacity: 1 !important;
        }
        #vendedores .ql-editor {
            min-height: 120px;
        }
        #loadingMessage {
            position: absolute;
            z-index: 9999999999;
            bottom: 75px;
            left: 50%;
            transform: translateX(-50%);
            color: #3d3d3d;
            background: #ccc;
            padding: 5px 15px;
            border-radius: 5px;
        }
    </style>
	
	<section class="content">
        <div>
			<button class="btn bg-teal" onclick="history.go(-1)"><i class="fas fa-arrow-left"></i> Volver</button>
		</div>

        <div style="margin-top:45px;height: min-content;">
            <h1 style="font-size:22px;text-transform:uppercase;color:#444;">Fotos de Portadas</h1>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                @foreach ($imagenes_slider as $image)
                    <div style="max-width: 150px;position:relative;height:fit-content;">
                        <img src="{{asset($image->path)}}" alt="imagen-portada" width="150">
                        <div class="hover-image" data-toggle="modal" data-target="#modalDeleteImagen" onclick="loadDataDeleteImagen({{$image->id}},'portada')">
                            <i class="fa fa-trash" style="color: #fff;opacity: 0;font-size:20px;"></i>
                        </div>
                    </div>
                @endforeach
                <div style="max-width: 150px;position:relative;">
                    <button type="button" onclick="openImagen('portada')" style="padding:5px 10px;border:2px solid #777;border-radius:5px;">Nueva Imagen +</button>
                    <input type="file" name="new_img" id="imagen_portada" style="position: absolute;top:0;display:none;">
                </div>
            </div>
            <div id="botonGuardarPortadas" style="margin-top:5px;">
                <button type="button" onclick="savePortadas()" class="btn bg-teal">Guardar</button>
            </div>
        </div>

        <div style="margin-top:45px;height: min-content;">
            <h1 style="font-size:22px;text-transform:uppercase;color:#444;">Flyers para los viajes <span style="font-size: 16px;">(1600 x 340 píxeles)</span></h1>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                @foreach ($imagenes_flyers as $image_flyer)
                    <div style="max-width: 250px;position:relative;height:fit-content;">
                        <img src="{{asset($image_flyer->path)}}" alt="imagen-portada" width="250">
                        <div class="hover-image" data-toggle="modal" data-target="#modalDeleteImagen" onclick="loadDataDeleteImagen({{$image_flyer->id}},'flyer')">
                            <i class="fa fa-trash" style="color: #fff;opacity: 0;font-size:20px;"></i>
                        </div>
                    </div>
                @endforeach
                <div style="max-width: 150px;position:relative;">
                    <button type="button" onclick="openImagen('flyer')" style="padding:5px 10px;border:2px solid #777;border-radius:5px;">Nueva Imagen +</button>
                    <input type="file" name="new_img" id="imagen_flyer" style="position: absolute;top:0;display:none;">
                </div>
            </div>
            <div id="botonGuardarPortadas" style="margin-top:5px;">
                <button type="button" onclick="savePortadas()" class="btn bg-teal">Guardar</button>
            </div>
        </div>

        <div style="margin-top:25px;">
            <h1 style="font-size:22px;text-transform:uppercase;color:#444;">Datos de Contacto</h1>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                <div style="max-width:160px;width:100%;">
                    <p style="margin-bottom:0px;">WhatsApp:</p>
                    <input type="text" id="telefono_whatsapp" value="{{$data_web->telefono_whatsapp ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:160px;width:100%;">
                    <p style="margin-bottom:0px;">Teléfono 1:</p>
                    <input type="text" id="telefono_1" value="{{$data_web->telefono_1 ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:160px;width:100%;">
                    <p style="margin-bottom:0px;">Teléfono 2:</p>
                    <input type="text" id="telefono_2" value="{{$data_web->telefono_2 ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:160px;width:100%;">
                    <p style="margin-bottom:0px;">Teléfono 3:</p>
                    <input type="text" id="telefono_3" value="{{$data_web->telefono_3 ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:160px;width:100%;">
                    <p style="margin-bottom:0px;">Teléfono 4:</p>
                    <input type="text" id="telefono_4" value="{{$data_web->telefono_4 ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
            </div>
            <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:15px;">
                <div style="max-width:250px;width:100%;">
                    <p style="margin-bottom:0px;">Dirección 1:</p>
                    <input type="text" id="direccion_1" value="{{$data_web->direccion_1 ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:250px;width:100%;">
                    <p style="margin-bottom:0px;">Dirección 2:</p>
                    <input type="text" id="direccion_2" value="{{$data_web->direccion_2 ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:250px;width:100%;">
                    <p style="margin-bottom:0px;">Email:</p>
                    <input type="text" id="email" value="{{$data_web->email ?? ''}}" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
            </div>
            <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:15px;">
                <div style="max-width:375px;width:100%;height: min-content;">
                    <p style="margin-bottom:0px;">Horarios Atención Pigüé:</p>
                    <div id="horarios_atencion_pigue" style="background:#fff;">
                        @php echo $data_web->horarios_atencion_pigue @endphp
                    </div>
                </div>
                <div style="max-width:375px;width:100%;height: min-content;">
                    <p style="margin-bottom:0px;">Horarios Atención Bahía Blanca:</p>
                    <div id="horarios_atencion_bahia" style="background:#fff;">
                        @php echo $data_web->horarios_atencion_bahia @endphp
                    </div>
                </div>
            </div>
            <div id="botonGuardarContacto" style="margin-top:5px;">
                <button type="button" onclick="saveContacto()" class="btn bg-teal">Guardar</button>
            </div>
        </div>

        <div style="margin-top:45px;height: min-content;">
            <h1 style="font-size:22px;text-transform:uppercase;color:#444;">¿Quiénes somos?</h1>
            <div id="quienes_somos" style="background:#fff;">
                @php echo $data_web->quienes_somos @endphp
            </div>
            <div id="botonGuardarQuienesSomos" style="margin-top:5px;">
                <button type="button" onclick="saveQuienesSomos()" class="btn bg-teal">Guardar</button>
            </div>
        </div>

        <div style="margin-top:45px;">
            <h1 style="font-size:22px;text-transform:uppercase;color:#444;">Testimonios de los clientes</h1>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                <div style="max-width:250px;width:100%;">
                    <p style="margin-bottom:0px;">Testimonio 1:</p>
                    <textarea id="texto_testimonio_1" rows="6" class="form-control" placeholder="Testimonio" style="border: 1px solid #ccc;width:100%;max-width:250px;">{{$data_web->texto_testimonio_1 ?? ''}}</textarea>
                    <input type="text" id="nombre_testimonio_1" value="{{$data_web->nombre_testimonio_1 ?? ''}}" placeholder="Nombre del cliente" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:250px;width:100%;">
                    <p style="margin-bottom:0px;">Testimonio 2:</p>
                    <textarea id="texto_testimonio_2" rows="6" class="form-control" placeholder="Testimonio" style="border: 1px solid #ccc;width:100%;max-width:250px;">{{$data_web->texto_testimonio_2 ?? ''}}</textarea>
                    <input type="text" id="nombre_testimonio_2" value="{{$data_web->nombre_testimonio_2 ?? ''}}" placeholder="Nombre del cliente" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:250px;width:100%;">
                    <p style="margin-bottom:0px;">Testimonio 3:</p>
                    <textarea id="texto_testimonio_3" rows="6" class="form-control" placeholder="Testimonio" style="border: 1px solid #ccc;width:100%;max-width:250px;">{{$data_web->texto_testimonio_3 ?? ''}}</textarea>
                    <input type="text" id="nombre_testimonio_3" value="{{$data_web->nombre_testimonio_3 ?? ''}}" placeholder="Nombre del cliente" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
            </div>
            <div id="botonGuardarTestimonios" style="margin-top:5px;">
                <button type="button" onclick="saveTestimonios()" class="btn bg-teal">Guardar</button>
            </div>
        </div>

        <div style="margin-top:45px;margin-bottom:150px;height: min-content;">
            <h1 style="font-size:22px;text-transform:uppercase;color:#444;">Nuestros Vendedores</h1>
            <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;">
                <div style="max-width:210px;width:100%;display:none;">
                    <input type="text" id="id_vendedor" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:210px;width:100%;">
                    <p style="margin-bottom:0px;">Nombre</p>
                    <input type="text" id="nombre_vendedor" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:250px;width:100%;">
                    <p style="margin-bottom:0px;">Email</p>
                    <input type="text" id="email_vendedor" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="max-width:150px;width:100%;">
                    <p style="margin-bottom:0px;">Teléfono</p>
                    <input type="text" id="telefono_vendedor" class="form-control" style="width:100%;border: 1px solid #ccc;margin-top:5px;">
                </div>
                <div style="margin-top: 25px;" id="botonAgregarVendedores">
                    <button type="button" onclick="addVendedor()" class="btn bg-teal">Agregar +</button>
                </div>
            </div>
            <div id="listaVendedores">
                @foreach ($vendedores as $vendedor)
                    <p id="vendedor-{{$vendedor->id}}" style="display: list-item;margin-left: 20px;margin-bottom: 0;">
                        <span id="data-nombre-{{$vendedor->id}}">{{$vendedor->nombre}}</span> - <span id="data-email-{{$vendedor->id}}">{{$vendedor->email}}</span> - <span id="data-telefono-{{$vendedor->id}}">{{$vendedor->telefono}}</span> 
                        <button type="button" title="Editar" onclick="loadVendedor('{{$vendedor->id}}');" style="background: transparent;border: none;color: #2196f3;padding:0 1px;">
                            <i class="fa fa-edit"></i>
                        </button>
                        <button type="button" data-toggle="modal" data-target="#modalBorrarVendedor" title="Borrar" onclick="dataDeleteVendedor('{{$vendedor->id}}');" style="background: transparent;border: none;color: red;padding:0 1px;">
                            <i class="fa fa-times"></i>
                        </button>
                    </p>
                @endforeach
            </div>
        </div>
		
	</section>

    <div id="modalDeleteImagen" class="modal fade" role="dialog">
		<div class="modal-dialog" style="width: 450px !important;">
			<!-- Modal content-->
			<div class="modal-content" style="border-radius: 5px;">
				<form action="{{route('delete_imagenes')}}" method="POST" onsubmit="return disableButton('button-delete-image')">
				@csrf
                    <div class="modal-header" style="padding: 5px;"></div>
                    <div class="swal-title" style="padding: 15px 20px;text-align:left;">Borrar Imagen</div>
                    
                    <div style="padding: 0 20px;">
                        <p style="color:#777;">¿Está seguro de borrar la imagen?</p>
                    </div>

                    <input type="text" name="id_delete" id="id_delete" style="display:none;" required>
                    <input type="text" name="tipo_imagen" id="tipo_imagen_delete" style="display:none;" required>

					<div class="swal-footer">
						<div class="swal-button-container">
							<button data-dismiss="modal" class="swal-button swal-button--cancel">Cancelar</button>
							<div class="swal-button__loader"></div>
						</div>
						<div class="swal-button-container">
							<button type="submit" id="button-delete-image" class="swal-button swal-button--confirm">Aceptar</button>
							<div class="swal-button__loader"></div>
						</div>
					</div>
				</form>
			</div>	
		</div>
	</div>
    <!-- Modal Delete Vendedor -->
	<div id="modalBorrarVendedor" class="modal fade" role="dialog">
		<div class="modal-dialog" style="width: 450px !important;">
			<!-- Modal content-->
			<div class="modal-content" style="border-radius: 5px;">
                <div class="modal-header" style="padding: 5px;">
                </div>
                <div class="swal-icon swal-icon--warning" style="width: 50px;height: 50px;margin: 10px auto;">
                    <span class="swal-icon--warning__body" style="height: 20px;width: 4px;">
                        <span class="swal-icon--warning__dot" style="width: 4px;height: 4px;margin-left: -2px;"></span>
                    </span>
                </div>
                <div class="swal-title" style="padding-top: 10px;margin-bottom:0;">Borrar Vendedor</div>
                <p style="padding: 16px; text-align:center; font-size: 18px;">¿Está seguro de eliminar el vendedor?</p>
                <input type="text" id="idVendedorDelete" name="idVendedorDelete" style="display:none;">

                <div class="swal-footer">
                    <div class="swal-button-container">
                        <button data-dismiss="modal" class="swal-button swal-button--cancel">Cancelar</button>
                        <div class="swal-button__loader"></div>
                    </div>
                    <div class="swal-button-container">
                        <button data-dismiss="modal" class="swal-button swal-button--confirm" onclick="deleteVendedor()">Aceptar</button>
                        <div class="swal-button__loader"></div>
                    </div>
                </div>
			</div>	
		</div>
	</div>

    <div id="loadingMessage" style="display: none;">Subiendo imagen...</div>

@include('footer')

<script> // Quill
    new Quill('#horarios_atencion_pigue', {
        theme: 'snow'
    });
    new Quill('#horarios_atencion_bahia', {
        theme: 'snow'
    });
    new Quill('#quienes_somos', {
        theme: 'snow'
    });
</script>
<script>
    function saveContacto() {
        $('#botonGuardarContacto').html('<button type="button" class="btn bg-teal">Guardando...</button>');
        let telefono_whatsapp = $('#telefono_whatsapp').val()
        let telefono_1 = $('#telefono_1').val()
		let telefono_2 = $('#telefono_2').val()
		let telefono_3 = $('#telefono_3').val()
		let telefono_4 = $('#telefono_4').val()
		let direccion_1 = $('#direccion_1').val()
		let direccion_2 = $('#direccion_2').val()
		let email = $('#email').val()
		let horarios_atencion_pigue = $('#horarios_atencion_pigue .ql-editor').html();
		let horarios_atencion_bahia = $('#horarios_atencion_bahia .ql-editor').html();

        $.ajax({
            type:'POST',
            url:"{{route('save_contacto')}}",
            data: {
                "_token": "{{csrf_token()}}",
                telefono_whatsapp: telefono_whatsapp,
                telefono_1: telefono_1,
                telefono_2: telefono_2,
                telefono_3: telefono_3,
                telefono_4: telefono_4,
                direccion_1: direccion_1,
                direccion_2: direccion_2,
                email: email,
                horarios_atencion_pigue: horarios_atencion_pigue,
                horarios_atencion_bahia: horarios_atencion_bahia
            },
            success:function(){
                $('#botonGuardarContacto').html('<button type="button" onclick="saveContacto()" class="btn bg-teal">Guardar</button>');
            }
        });
    }
</script>
<script>
    function saveQuienesSomos() {
        $('#botonGuardarQuienesSomos').html('<button type="button" class="btn bg-teal">Guardando...</button>');
        let quienes_somos = $('#quienes_somos .ql-editor').html();

        $.ajax({
            type:'POST',
            url:"{{route('save_quienes_somos')}}",
            data: {
                "_token": "{{csrf_token()}}",
                quienes_somos: quienes_somos,
            },
            success:function(){
                $('#botonGuardarQuienesSomos').html('<button type="button" onclick="saveQuienesSomos()" class="btn bg-teal">Guardar</button>');
            }
        });
    }
</script>
<script>
    function saveTestimonios() {
        $('#botonGuardarTestimonios').html('<button type="button" class="btn bg-teal">Guardando...</button>');
        let texto_testimonio_1 = $('#texto_testimonio_1').val()
		let nombre_testimonio_1 = $('#nombre_testimonio_1').val()
		let texto_testimonio_2 = $('#texto_testimonio_2').val()
		let nombre_testimonio_2 = $('#nombre_testimonio_2').val()
		let texto_testimonio_3 = $('#texto_testimonio_3').val()
		let nombre_testimonio_3 = $('#nombre_testimonio_3').val()

        $.ajax({
            type:'POST',
            url:"{{route('save_testimonios')}}",
            data: {
                "_token": "{{csrf_token()}}",
                texto_testimonio_1: texto_testimonio_1,
                nombre_testimonio_1: nombre_testimonio_1,
                texto_testimonio_2: texto_testimonio_2,
                nombre_testimonio_2: nombre_testimonio_2,
                texto_testimonio_3: texto_testimonio_3,
                nombre_testimonio_3: nombre_testimonio_3
            },
            success:function(){
                $('#botonGuardarTestimonios').html('<button type="button" onclick="saveTestimonios()" class="btn bg-teal">Guardar</button>');
            }
        });
    }
</script>
<script>
    function addVendedor() {
        let id = $('#id_vendedor').val();
        let nombre = $('#nombre_vendedor').val();
        let email = $('#email_vendedor').val();
        let telefono = $('#telefono_vendedor').val();

        if (nombre != "") {
            $('#botonAgregarVendedores').html('<button type="button" class="btn bg-teal">Guardando...</button>');
            
            $.ajax({
                type:'POST',
                url:"{{route('save_vendedores')}}",
                data: {
                    "_token": "{{csrf_token()}}",
                    id: id,
                    nombre: nombre,
                    email: email,
                    telefono: telefono,
                },
                success:function(id_resp){
                    $('#botonAgregarVendedores').html('<button type="button" onclick="addVendedor()" class="btn bg-teal">Agregar +</button>');
                    if (id != '') {
                        $('#vendedor-'+id).html('<span id="data-nombre-'+id_resp+'">'+nombre+'</span> - <span id="data-email-'+id_resp+'">'+email+'</span> - <span id="data-telefono-'+id_resp+'">'+telefono + '</span> '+
                                                '<button type="button" title="Editar" onclick="loadVendedor('+id_resp+');" style="background: transparent;border: none;color: #2196f3;padding:0 1px;">'+
                                                    '<i class="fa fa-edit"></i>'+
                                                '</button>'+
                                                '<button type="button" data-toggle="modal" data-target="#modalBorrarVendedor" title="Borrar" onclick="dataDeleteVendedor('+id_resp+');" style="background: transparent;border: none;color: red;padding:0 1px;">'+
                                                    '<i class="fa fa-times"></i>'+
                                                '</button>')
                    } else {
                        $('#listaVendedores').append('<p id="vendedor-'+id_resp+'" style="display: list-item;margin-left: 20px;margin-bottom: 0;">'+
                                                        '<span id="data-nombre-'+id_resp+'">'+nombre+'</span> - <span id="data-email-'+id_resp+'">'+email+'</span> - <span id="data-telefono-'+id_resp+'">'+telefono + '</span> '+
                                                        '<button type="button" title="Editar" onclick="loadVendedor('+id_resp+');" style="background: transparent;border: none;color: #2196f3;padding:0 1px;">'+
                                                            '<i class="fa fa-edit"></i>'+
                                                        '</button>'+
                                                        '<button type="button" data-toggle="modal" data-target="#modalBorrarVendedor" title="Borrar" onclick="dataDeleteVendedor('+id_resp+');" style="background: transparent;border: none;color: red;padding:0 1px;">'+
                                                            '<i class="fa fa-times"></i>'+
                                                        '</button>'+
                                                    '</p>')
                    }

                    $('#id_vendedor').val('');
                    $('#nombre_vendedor').val('');
                    $('#email_vendedor').val('');
                    $('#telefono_vendedor').val('');
                }
            });
        } else {
            alert('Debes completar el nombre para guardar.')
        }
    }

    function loadVendedor(id) {
        let nombre = $('#data-nombre-'+id).text()
        let email = $('#data-email-'+id).text()
        let telefono = $('#data-telefono-'+id).text()
        $('#id_vendedor').val(id);
        $('#nombre_vendedor').val(nombre);
        $('#email_vendedor').val(email);
        $('#telefono_vendedor').val(telefono);
        $('#botonAgregarVendedores').html('<button type="button" onclick="addVendedor()" class="btn bg-teal">Actualizar</button>');
    }

    function dataDeleteVendedor(id) {
        $('#idVendedorDelete').val(id);
    }
</script>
<script>
    function deleteVendedor() {
        let id = $('#idVendedorDelete').val();
        $('#vendedor-'+id).append(' <em>Borrando...</em>')
        $.ajax({
            type:'POST',
            url:"{{route('delete_vendedor')}}",
            data: {
                "_token": "{{csrf_token()}}",
                id: id
            },
            success:function(){
                $('#vendedor-'+id).remove()
            }
        });
    }
</script>
<script>
    function loadDataDeleteImagen(id, tipo) {
        $('#id_delete').val(id)
        $('#tipo_imagen_delete').val(tipo)
    }
</script>
<script>
    function disableButton(id) {
        document.getElementById(id).disabled = true;
        return true;
    }
</script>
<script>
    function openImagen(tipo) {
        $('#imagen_'+tipo).click();
    }

    $('#imagen_portada').ijaboCropTool({
        preview : '.image-previewer',
        setRatio:16/9,
        allowedExtensions: ['webp'],
        buttonsText:['CORTAR','SALIR'],
        buttonsColor:['#30bf7d','#ee5155', -15],
        processUrl:'{{ route("save_imagenes", ["tipo" => "portada"]) }}',
        withCSRF:['_token','{{ csrf_token() }}'],
        onSuccess:function(message, element, status){
            location.reload();
        },
        onError:function(message, element, status){
            $('#loadingMessage').hide();
            alert(message);
        }
    });
    $('#imagen_flyer').ijaboCropTool({
        preview : '.image-previewer',
        setRatio:4.7,
        allowedExtensions: ['webp'],
        buttonsText:['CORTAR','SALIR'],
        buttonsColor:['#30bf7d','#ee5155', -15],
        processUrl:'{{ route("save_imagenes", ["tipo" => "flyer"]) }}',
        withCSRF:['_token','{{ csrf_token() }}'],
        onSuccess:function(message, element, status){
            location.reload();
        },
        onError:function(message, element, status){
            $('#loadingMessage').hide();
            alert(message);
        }
    });
</script>