@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Lista de clientes')
@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)
@section('content_header')
    <h1>Listado de clientes</h1>
@stop

@section('content')

    @if (session()->has('info'))
        <div class="alert alert-info" role="alert">
            {{ session('info') }}
        </div>
    @endif

    <div class="d-flex justify-content-between align-items-center">
        <div>
            <a href="{{ route('clientes.create') }}" class="btn btn-primary mb-3 mr-2"> <i class="fa fa-user"></i> Nuevo
                Cliente</a>
            <a href="#!" class="btn btn-success mb-3 mr-2" data-toggle="modal" data-target="#editModal"> <i
                    class="fa fa-list"></i>
                Actualizar Precios</a>
            <a class="btn btn-info mb-3" href="{{ route('clientes.import-prices') }}">
                <i class="fa fa-file-import"></i> Importar precios
            </a>
        </div>

        <!-- Generar Deuda -->
        <!--
        <form action="{{ route('clientes.generar-deuda') }}" method="POST">
            @csrf
            <button type="submit" class="btn btn-info"><i class="fa fa-dollar-sign"></i> Generar Deuda</button>
        </form>
        -->
        <!-- Fin Generar Deuda -->
    </div>




    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Clientes</h3>
        </div>
        <div class="card-body">

            <table class="table table-bordered" id="table-clientes">
                <thead>
                <th>#</th>
                <th>N° Documento</th>
                <th>Nombres y Apellidos</th>
                <th>Razon Social</th>
                <th>Deuda Anterior</th>
                <th>Estado</th>
                <th>Acciones</th>
                </thead>
                <tbody>
                @foreach ($clientes as $cliente)
                    <tr>
                        <td>{{ $cliente->id }}</td>
                        <td>{{ $cliente->documento }}</td>

                        <td>{{ $cliente->nombre_comercial }}</td>
                        <td>{{ $cliente->razon_social }}</td>
                        <td>{{ $cliente->deuda_anterior }}</td>

                        <td>
                            @if ($cliente->estado)
                                <span class="badge badge-success">Activo</span>
                            @else
                                <span class="badge badge-danger">Inactivo</span>
                            @endif
                        </td>
                        <td>

                            <div class="dropdown">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Acciones
                                </button>

                                <div class="dropdown-menu">
                                    <a href="{{ route('clientes.edit', $cliente) }}" class="dropdown-item">Editar</a>
                                    @if ($cliente->estado == 1)
                                        <a href="#!" class="dropdown-item btn-delete" data-url="{{ route('clientes.destroy', $cliente) }}" data-estado="{{ $cliente->estado }}">Eliminar</a>
                                    @else
                                        <a href="#!" class="dropdown-item btn-delete" data-url="{{ route('clientes.destroy', $cliente) }}" data-estado="{{ $cliente->estado }}">Restaurar</a>
                                    @endif
                                </div>
                            </div>


                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>


    <!-- Modal Ajustes-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Ajuste de precios</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editForm">

                        <div class="form-group">
                            <label for="">Seleccionar Tipo de Ajuste</label>
                            <select name="" id="tipo_ajuste" class="form-control">
                                <option value="1">Aumentar</option>
                                <option value="2">Disminuir</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="">Ingrese cantidad (Puntos)</label>
                            <input type="number" class="form-control" id="cantidad" value="0">
                        </div>

                        <button type="submit" class="btn btn-success">Ajustar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@stop


@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {

            $('#table-clientes').DataTable({
                language: {
                    "url": "/js/spanish.json"
                },
                order: [
                    [0, 'desc']
                ],
                pageLength: 10
            });


            $('#saveClientBtn').on('click', function () {
                const formData = new FormData($('#createClientForm')[0]);

                $.ajax({
                    url: "{{ route('clientes.store') }}", // Cambia la URL al endpoint adecuado
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        Swal({
                            title: 'Éxito!',
                            text: 'Cliente creado correctamente.',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $('#createClientModal').modal('hide');
                                $('#createClientForm')[0].reset();
                                // Opcional: Refrescar la página o actualizar la tabla de clientes
                                location
                                    .reload(); // Recargar la página después de que el alert se haya mostrado
                            }
                        });
                    },
                    error: function (xhr) {
                        var errors = xhr.responseJSON.errors;
                        var errorMessage = '';
                        $.each(errors, function (key, value) {
                            errorMessage += value[0] + '\n';
                        });

                        Swal({
                            title: 'Error!',
                            text: errorMessage,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });
            //end store

            $('#searchDocumentBtn').on('click', function () {
                var documento = $('#documento').val();
                var tipoDocumento = $('#tipo_documento').val();

                $.ajax({
                    url: "{{ route('clientes.search') }}",
                    type: 'POST',
                    data: {
                        documento: documento,
                        tipo_documento: tipoDocumento,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (response) {
                        if (response.success) {
                            $('#nombre_comercial').val(response.data.razon_social);
                            $('#razon_social').val(response.data.razon_social);
                            $('#direccion').val(response.data.direccion);
                            $('#departamento').val(response.data.departamento);
                            $('#provincia').val(response.data.provincia);
                            $('#distrito').val(response.data.distrito);

                            Swal({
                                title: 'Información encontrada',
                                text: 'Datos actualizados.',
                                icon: 'info',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            Swal({
                                title: 'Error!',
                                text: response.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function (xhr) {
                        Swal({
                            title: 'Error!',
                            text: 'No se pudo realizar la búsqueda.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });

            //end search
            function validarDocumento() {
                const tipoDocumento = $('#tipo_documento').val();
                const $documentoInput = $('#documento');

                let maxLength = 8; // Valor por defecto para SIN DOCUMENTO y DNI

                if (tipoDocumento === "2") { // RUC
                    maxLength = 11;
                }

                $documentoInput.attr('maxlength', maxLength);

                // Validar si la longitud es correcta
                if ($documentoInput.val().length > maxLength) {
                    alert("El documento debe tener " + maxLength + " dígitos.");
                    $documentoInput.val(''); // Limpiar el campo
                }
            }

            $('#tipo_documento').change(function () {
                validarDocumento();
            });

            $('#documento').on('input', function () {
                validarDocumento();
            });

            // Delegación de eventos para manejar clics en botones de eliminar
            $(document).on('click', '.btn-delete', function () {
                var url = $(this).data('url');
                var estado = $(this).data(
                    'estado'); // Obtener el estado del cliente desde el atributo `data-estado`

                // Determinar el texto y la acción según el estado del cliente
                var actionText = estado == 1 ? 'desactivado' : 'restaurado';
                var confirmText = estado == 1 ? 'Sí, desactivar' : 'Sí, restaurar';
                var title = estado == 1 ? '¿Estás seguro de desactivar este cliente?' :
                    '¿Estás seguro de restaurar este cliente?';
                var successMessage = estado == 1 ? 'Cliente desactivado correctamente.' :
                    'Cliente restaurado correctamente.';
                var methodType = estado == 1 ? 'DELETE' :
                    'PATCH'; // Cambiar el método dependiendo del estado

                Swal.fire({
                    title: title,
                    text: `Este cliente será ${actionText}.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: confirmText,
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                _method: methodType // Usamos DELETE o PATCH dependiendo del estado
                            },
                            success: function (response) {
                                if (response.success) {
                                    Swal.fire(
                                        'Éxito!',
                                        successMessage,
                                        'success'
                                    ).then(() => {
                                        // Recargar la página o actualizar la vista después de la acción
                                        location.reload(); // Recarga la página
                                    });
                                } else {
                                    Swal.fire(
                                        'Error!',
                                        response.message,
                                        'error'
                                    );
                                }
                            },
                            error: function (xhr) {
                                Swal.fire(
                                    'Error!',
                                    'No se pudo cambiar el estado del cliente.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });

            // Manejar clic en el botón de Editar
            $(document).on('click', '.editBtn', function () {
                var id = $(this).data('id');
                var cantidad = $(this).data('cantidad');
                var pesoNeto = $(this).data('peso');

                // Llenar los campos del formulario con la información del registro
                $('#editId').val(id);
                $('#editCantidad').val(cantidad);
                $('#editPesoNeto').val(pesoNeto);

                // Mostrar la modal
                $('#editModal').modal('show');
            });

            $('#editForm').on('submit', function (e) {
                e.preventDefault();

                let tipoAjuste = $('#tipo_ajuste').val();
                let cantidad = $('#cantidad').val();

                $.ajax({
                    url: "{{ route('clientes.update-prices') }}",
                    type: 'POST',
                    data: {
                        tipo_ajuste: tipoAjuste,
                        cantidad: cantidad,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (response) {
                        if (response.success) {
                            Swal.fire({
                                title: 'Éxito!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: response.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function (xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'No se pudo actualizar el precio.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });


            });

            $('#table-clientes').DataTable();


        });
    </script>
@stop