@extends('adminlte::page')

@section('title', 'Registrar Cliente')

@section('content_header')
    <h1>Registrar Nuevo Cliente</h1>
@stop

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">

            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="documento">Seleccione el tipo de documento</label>
                        <select class="form-control" id="tipo_documento" name="tipo_documento">
                            <option value="1">DNI</option>
                            <option value="2">RUC</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="documento">Ingrese el número de documento</label>
                        <input type="text" class="form-control" id="documento" name="documento" value="{{ old('documento') }}" required autofocus>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <button type="button" class="btn btn-primary" id="btn-buscar-cliente"> <i class="fas fa-search"></i> Buscar Cliente</button>
                    </div>
                </div>
            </div>
            <hr>
            <form action="{{ route('admin.clientes.store') }}" method="POST">
                @csrf

                <!-- Campos ocultos para tipo_documento y documento -->
                <input type="hidden" id="tipo_documento_form" name="tipo_documento" value="{{ old('tipo_documento', '1') }}">
                <input type="hidden" id="documento_form" name="documento" value="{{ old('documento') }}">

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="name">Nombre Completo (Representante Legal) <span class="text-danger">*</span></label>
                            <input type="text"
                                   class="form-control @error('name') is-invalid @enderror"
                                   id="name"
                                   name="name"
                                   value="{{ old('name') }}"
                                   required
                                   >
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="empresa">Empresa</label>
                            <input type="text"
                                   class="form-control @error('empresa') is-invalid @enderror"
                                   id="empresa"
                                   name="empresa"
                                   value="{{ old('empresa') }}">
                            @error('empresa')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="empresa">Razón Social</label>
                            <input type="text"
                                   class="form-control @error('razon_social') is-invalid @enderror"
                                   id="razon_social"
                                   name="razon_social"
                                   value="{{ old('razon_social') }}">
                            @error('razon_social')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>



                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="direccion">Dirección</label>
                            <input type="text"
                                   class="form-control @error('direccion') is-invalid @enderror"
                                   id="direccion"
                                   name="direccion"
                                   value="{{ old('direccion') }}"
                                   maxlength="20">
                            @error('direccion')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="celular">Celular</label>
                            <input type="text"
                                   class="form-control @error('celular') is-invalid @enderror"
                                   id="celular"
                                   name="celular"
                                   value="{{ old('celular') }}"
                                   maxlength="20">
                            @error('celular')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                </div>

                <hr>

                <div class="row">

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="email">Email <span class="text-danger">*</span></label>
                            <input type="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   id="email"
                                   name="email"
                                   value="{{ old('email') }}"
                                   required>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="password">Contraseña <span class="text-danger">*</span></label>
                            <input type="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   id="password"
                                   name="password"
                                   required>
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <small class="form-text text-muted">Mínimo 8 caracteres</small>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="password_confirmation">Confirmar Contraseña <span class="text-danger">*</span></label>
                            <input type="password"
                                   class="form-control"
                                   id="password_confirmation"
                                   name="password_confirmation"
                                   required>
                        </div>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="limite_credito">Línea de Crédito</label>
                            <input type="number"
                                   class="form-control @error('limite_credito') is-invalid @enderror"
                                   id="limite_credito"
                                   name="limite_credito"
                                   value="{{ old('limite_credito', 0) }}"
                                   step="0.01"
                                   min="0">
                            @error('limite_credito')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <small class="form-text text-muted">Monto máximo de crédito disponible para el cliente (por defecto: 0)</small>
                        </div>
                    </div>
                </div>

                <hr>

                <div class="form-group">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save"></i> Registrar Cliente
                    </button>
                    <a href="{{ route('admin.clientes.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
    <style>
        #btn-buscar-cliente {
            margin-top: 30px;
        }
    </style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        function updateDocumentoMaxLength() {
            var tipoDocumento = $('#tipo_documento').val();
            if (tipoDocumento == '1') { // DNI
                $('#documento').attr('maxlength', 8);
            } else if (tipoDocumento == '2') { // RUC
                $('#documento').attr('maxlength', 11);
            } else {
                $('#documento').removeAttr('maxlength');
            }
        }

        // Initial set on page load
        updateDocumentoMaxLength();
        // Sincronizar campos ocultos al cargar
        $('#tipo_documento_form').val($('#tipo_documento').val());
        $('#documento_form').val($('#documento').val());

        // Change maxlength when tipo_documento changes
        $('#tipo_documento').on('change', function () {
            updateDocumentoMaxLength();
            // Sincronizar con campo oculto del formulario
            $('#tipo_documento_form').val($(this).val());
            // Optionally clear value when you change tipo de documento
            $('#documento').val('');
            $('#documento_form').val('');
            $('#name').val('');
            $('#empresa').val('');
            $('#razon_social').val('');
            $('#direccion').val('');
            $('#celular').val('');
        });

        // Sincronizar el campo documento con el campo oculto del formulario
        $('#documento').on('input change', function () {
            $('#documento_form').val($(this).val());
        });

        // Allow only numbers on #documento input
        $('#documento').on('input', function () {
            this.value = this.value.replace(/[^0-9]/g, '');

            var tipoDocumento = $('#tipo_documento').val();
            var maxLength = tipoDocumento == '1' ? 8 : (tipoDocumento == '2' ? 11 : null);
            if (maxLength && this.value.length > maxLength) {
                this.value = this.value.substring(0, maxLength);
            }
        });

        // Buscar cliente
        $('#btn-buscar-cliente').on('click', function () {
            var documento = $('#documento').val().trim();
            var tipo_documento = $('#tipo_documento').val();

            if (!documento) {
                swal.fire({
                    icon: 'warning',
                    title: 'Ingrese un número de documento.',
                });
                return;
            }

            // Opcional: Validaciones básicas según tipo de documento
            if (tipo_documento == '1' && documento.length != 8) {
                swal.fire({
                    icon: 'warning',
                    title: 'El DNI debe tener 8 dígitos.',
                });
                return;
            }
            if (tipo_documento == '2' && documento.length != 11) {
                swal.fire({
                    icon: 'warning',
                    title: 'El RUC debe tener 11 dígitos.',
                });
                return;
            }

            $('#btn-buscar-cliente').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Buscando...');

            $.ajax({
                url: "{{ route('admin.clientes.search-document') }}",
                data: {
                    documento: documento,
                    tipo_documento: tipo_documento
                },
                method: 'GET',
                dataType: 'json',
                success: function (resp) {
                    if (resp.success) {
                        if (resp.data) {
                            // Autocompletar campos si existen en el formulario, ajuste segun tus campos
                            if (tipo_documento == '1') {
                                $('#name').val(resp.data.nombre_comercial || '');
                            } else if (tipo_documento == '2') {
                                $('#empresa').val(resp.data.razon_social || '');
                                $('#razon_social').val(resp.data.razon_social || '');
                                $('#direccion').val(resp.data.direccion || '');
                                $('#celular').val(resp.data.celular || '');
                            }
                            // Si tienes otros campos (dirección, provincia, etc) puedes autocompletar aquí.
                        }
                        swal.fire({
                            icon: 'success',
                            title: '¡Cliente encontrado!',
                            text: 'Datos consultados correctamente.',
                        });
                        $('#btn-buscar-cliente').prop('disabled', false).html('<i class="fas fa-search"></i> Buscar Cliente');
                    } else {
                        swal.fire({
                            icon: 'warning',
                            title: 'No se encontraron datos',
                            text: resp.message || 'No se encontraron datos.',
                        });
                        $('#btn-buscar-cliente').prop('disabled', false).html('<i class="fas fa-search"></i> Buscar Cliente');
                    }
                },
                error: function () {
                    swal.fire({
                        icon: 'error',
                        title: 'Ocurrió un error',
                        text: 'Ocurrió un error de conexión.',
                    });
                    $('#btn-buscar-cliente').prop('disabled', false).html('<i class="fas fa-search"></i> Buscar Cliente');
                }
            });
        });
    });
</script>
@stop