@extends('admin.layout.master')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1 class="m-0">Redes Sociales</h1>
                </div>
            </div>
            <div class="col-lg-3">
                <button onclick="agregar()" type="button" class="btn bg-info mt-2 mb-2">
                    <i class="fa fa-plus" aria-hidden="true"></i> Agregar
                </button>
            </div>
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body" id="listar">
                        <table id="tabla" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                   
                                    <th>Nombre</th>
                                    <th>Opciones</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ($data as $row)
                            @php
                            $id = $row->id;
                            @endphp
                            <tr>
                                <td>{{$id}}</td>
                                <td>{{ $row->nombre }}</td>
                                <td>
                                    @if($row->estado == 2)
                                        <button onclick="activar('{{ $id }}')" type="button" class="btn bg-danger">Desactivado</button>
                                    @else
                                        <button onclick="eliminar('{{ $id }}')" type="button" class="btn bg-success">Activo</button>
                                    @endif
                                    <button onclick="editar('{{ $id }}')" type="button" class="btn bg-warning">Editar</button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        </table>
                    </div>
                    <div class="card-body col-lg-12" id="registrar" style="display:none;">
                        <form id="redSocialForm" name="redSocialForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" id="redSocial-id">
                            <div class="form-row">
                               
                                <div class="form-group col-md-6">
                                    <label for="nombre">Nombre</label>
                                    <input type="text" name="nombre" id="nombre" class="form-control">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="link">Link</label>
                                    <input type="text" name="link" id="link" class="form-control">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="estado">Estado</label>
                                    <select name="estado" id="estado" class="form-control">
                                        <option value="1">Activo</option>
                                        <option value="2">Desactivado</option>
                                    </select>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Guardar</button>
                            <button type="button" class="btn btn-secondary" onclick="cancelar()">Cancelar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // $('#tabla').DataTable({
        //     "paging": true,
        //     "lengthChange": false,
        //     "searching": true,
        //     "ordering": true,
        //     "info": true,
        //     "autoWidth": false,
        //     "responsive": true,
        //     "order": [[0, "desc"]],
        // });

    });

    function readURL(input, target) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $(target).attr('src', e.target.result).show();
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function editar(id) {
        document.getElementById('registrar').style.display = 'block';
        document.getElementById('listar').style.display = 'none';

        $.ajax({
            url: '{{ url('admin/redes_sociales') }}/'+id,
            method: 'GET',
            success: function(response) {
                let redSocial = response.data;
                document.getElementById('redSocial-id').value = redSocial.id;  
                document.getElementById('nombre').value = redSocial.nombre;
                document.getElementById('link').value = redSocial.link;
                document.getElementById('estado').value = redSocial.estado;
               
            },
            error: function() {
                alert('Error al cargar los datos');
            }
        });
    }

    function eliminar(id) {
        if(confirm('¿Estás seguro de desactivar esta red social?')) {
            $.ajax({
                url: '{{ url('admin/redes_sociales/destroy') }}/' + id,
                method: 'GET',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    location.reload();
                }
            });
        }
    }

    function activar(id) {
        if(confirm('¿Estás seguro de activar esta red social?')) {
            $.ajax({
                url: '{{ url('administrador/redes_sociales/activar') }}/' + id,
                method: 'GET',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    location.reload();
                }
            });
        }
    }

    $('#redSocialForm').on('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{ url('admin/redes_sociales/store') }}',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: '¡Éxito!',
                    text: 'Datos guardados exitosamente'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = '{{ url('admin/redes_sociales') }}';
                    }
                });
            },
            error: function(response) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al guardar los datos'
                });
            }
        });
    });

    function cancelar() {
        document.getElementById('registrar').style.display = 'none';
        document.getElementById('listar').style.display = 'block';
    }

    function agregar() {
        document.getElementById('registrar').style.display = 'block';
        document.getElementById('listar').style.display = 'none';
        document.getElementById('redSocial-id').value = '';
       
        document.getElementById('nombre').value = '';
        document.getElementById('link').value = '';
        document.getElementById('estado').value = '1';
        
    }
</script>
@endsection