@extends('layouts.app')
@section('title', 'Editar Proveedor')
@section('page-title', 'Editar Proveedor')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('logistica.dashboard') }}">Logística</a></li>
    <li class="breadcrumb-item"><a href="{{ route('logistica.proveedores.index') }}">Proveedores</a></li>
    <li class="breadcrumb-item active">Editar</li>
@endsection
@section('content')

@php $tipoDocActual = old('tipo_documento', strlen($proveedor->ruc) === 8 ? 'dni' : 'ruc'); @endphp

<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-edit mr-2"></i>Editar: {{ $proveedor->razon_social }}</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('logistica.proveedores.update', $proveedor) }}">
            @csrf @method('PATCH')

            <h5 class="text-success mb-3"><i class="fas fa-id-card mr-2"></i>Datos de Identificación</h5>
            <div class="row">

                <div class="col-md-2">
                    <div class="form-group">
                        <label>Tipo Doc. <span class="text-danger">*</span></label>
                        <select id="tipo_doc_sel" name="tipo_documento"
                            class="form-control @error('tipo_documento') is-invalid @enderror" required>
                            <option value="ruc" {{ $tipoDocActual === 'ruc' ? 'selected' : '' }}>RUC</option>
                            <option value="dni" {{ $tipoDocActual === 'dni' ? 'selected' : '' }}>DNI</option>
                        </select>
                        @error('tipo_documento')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label id="lbl-nro-doc">{{ $tipoDocActual === 'dni' ? 'N° DNI' : 'N° RUC' }} <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" name="ruc" id="ruc_input"
                                class="form-control @error('ruc') is-invalid @enderror"
                                value="{{ old('ruc', $proveedor->ruc) }}"
                                maxlength="{{ $tipoDocActual === 'dni' ? 8 : 11 }}"
                                placeholder="{{ $tipoDocActual === 'dni' ? '8 dígitos' : '11 dígitos' }}"
                                required>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-info" id="btn-buscar-doc"
                                    title="Autocompletar SUNAT / RENIEC">
                                    <i class="fas fa-search" id="ico-doc"></i>
                                </button>
                            </div>
                        </div>
                        @error('ruc')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        <small id="doc-msg" class="text-muted"></small>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label id="lbl-razon">{{ $tipoDocActual === 'dni' ? 'Nombre Completo' : 'Razón Social' }} <span class="text-danger">*</span></label>
                        <input type="text" name="razon_social" id="razon_social"
                            class="form-control @error('razon_social') is-invalid @enderror"
                            value="{{ old('razon_social', $proveedor->razon_social) }}" required>
                        @error('razon_social')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="form-group">
                        <label>Tipo Persona <span class="text-danger">*</span></label>
                        <select name="tipo" id="tipo_persona"
                            class="form-control @error('tipo') is-invalid @enderror" required>
                            <option value="juridica" {{ old('tipo', $proveedor->tipo) === 'juridica' ? 'selected' : '' }}>Persona Jurídica</option>
                            <option value="natural"  {{ old('tipo', $proveedor->tipo) === 'natural'  ? 'selected' : '' }}>Persona Natural</option>
                        </select>
                        @error('tipo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                {{-- Categoría de proveedor --}}
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Categoría Proveedor <span class="text-danger">*</span></label>
                        <select name="tipo_proveedor" id="tipo_proveedor_sel"
                            class="form-control @error('tipo_proveedor') is-invalid @enderror" required>
                            <option value="">Seleccionar...</option>
                            @foreach($tiposProveedor as $val => $label)
                                <option value="{{ $val }}" {{ old('tipo_proveedor', $proveedor->tipo_proveedor) === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('tipo_proveedor')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                @php $esOtros = old('tipo_proveedor', $proveedor->tipo_proveedor) === 'otros_gastos'; @endphp
                <div class="col-md-9" id="div_justificacion" style="{{ $esOtros ? '' : 'display:none' }}">
                    <div class="form-group">
                        <label>Justificación del gasto <span class="text-danger">*</span></label>
                        <input type="text" name="justificacion_gasto" id="justificacion_gasto"
                            class="form-control @error('justificacion_gasto') is-invalid @enderror"
                            value="{{ old('justificacion_gasto', $proveedor->justificacion_gasto) }}"
                            placeholder="Describa el tipo de gasto o servicio que provee..."
                            maxlength="300">
                        @error('justificacion_gasto')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-group">
                        <label>Dirección</label>
                        <input type="text" name="direccion" id="direccion" class="form-control"
                            value="{{ old('direccion', $proveedor->direccion) }}"
                            placeholder="Se autocompleta con SUNAT">
                    </div>
                </div>
            </div>

            <h5 class="text-success mb-3 mt-2"><i class="fas fa-phone mr-2"></i>Contacto</h5>
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Teléfono</label>
                        <input type="text" name="telefono" class="form-control"
                            value="{{ old('telefono', $proveedor->telefono) }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" name="email"
                            class="form-control @error('email') is-invalid @enderror"
                            value="{{ old('email', $proveedor->email) }}">
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group">
                        <label>Nombre de Contacto</label>
                        <input type="text" name="contacto_nombre" class="form-control"
                            value="{{ old('contacto_nombre', $proveedor->contacto_nombre) }}">
                    </div>
                </div>
            </div>

            <h5 class="text-success mb-3 mt-2"><i class="fas fa-university mr-2"></i>Datos Bancarios</h5>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Banco</label>
                        <input type="text" name="banco" class="form-control"
                            value="{{ old('banco', $proveedor->banco) }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Número de Cuenta</label>
                        <input type="text" name="cuenta_bancaria" class="form-control"
                            value="{{ old('cuenta_bancaria', $proveedor->cuenta_bancaria) }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>CCI</label>
                        <input type="text" name="cci" class="form-control"
                            value="{{ old('cci', $proveedor->cci) }}">
                    </div>
                </div>
            </div>

            <hr>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i>Actualizar Proveedor
            </button>
            <a href="{{ route('logistica.proveedores.show', $proveedor) }}" class="btn btn-secondary ml-2">
                <i class="fas fa-times mr-1"></i>Cancelar
            </a>
        </form>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var tipoSel  = document.getElementById('tipo_doc_sel');
    var input    = document.getElementById('ruc_input');
    var lbl      = document.getElementById('lbl-nro-doc');
    var lblRazon = document.getElementById('lbl-razon');
    var ico      = document.getElementById('ico-doc');
    var msg      = document.getElementById('doc-msg');

    function adaptarCampo() {
        var tipo = tipoSel.value;
        if (tipo === 'dni') {
            lbl.innerHTML      = 'N° DNI <span class="text-danger">*</span>';
            lblRazon.innerHTML = 'Nombre Completo <span class="text-danger">*</span>';
            input.maxLength    = 8;
            input.placeholder  = '8 dígitos';
        } else {
            lbl.innerHTML      = 'N° RUC <span class="text-danger">*</span>';
            lblRazon.innerHTML = 'Razón Social <span class="text-danger">*</span>';
            input.maxLength    = 11;
            input.placeholder  = '11 dígitos';
        }
    }

    tipoSel.addEventListener('change', adaptarCampo);

    document.getElementById('tipo_persona').addEventListener('change', function () {
        if (this.value === 'juridica') { tipoSel.value = 'ruc'; adaptarCampo(); }
    });

    document.getElementById('btn-buscar-doc').addEventListener('click', buscar);
    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); buscar(); }
    });

    var urlRucBase = '{{ route("api.sunat.ruc",  "__NRO__") }}';
    var urlDniBase = '{{ route("api.reniec.dni", "__NRO__") }}';

    async function buscar() {
        var tipo = tipoSel.value;
        var nro  = input.value.replace(/\D/g, '');
        msg.textContent = '';

        if (tipo === 'ruc' && nro.length !== 11) { alert('El RUC debe tener 11 dígitos.'); return; }
        if (tipo === 'dni' && nro.length !== 8)  { alert('El DNI debe tener 8 dígitos.');  return; }

        ico.className   = 'fas fa-spinner fa-spin';
        msg.textContent = tipo === 'ruc' ? 'Consultando SUNAT...' : 'Consultando RENIEC...';

        var url = tipo === 'ruc'
            ? urlRucBase.replace('__NRO__', nro)
            : urlDniBase.replace('__NRO__', nro);

        try {
            var resp = await fetch(url);
            var data = await resp.json();
            if (data.error) { msg.textContent = data.error; return; }

            if (tipo === 'ruc') {
                document.querySelector('[name=razon_social]').value = data.razonSocial || '';
                document.getElementById('direccion').value          = data.direccion   || '';
            } else {
                document.querySelector('[name=razon_social]').value = [data.nombres, data.apellidoPaterno, data.apellidoMaterno].filter(Boolean).join(' ');
                document.getElementById('tipo_persona').value       = 'natural';
            }
            msg.innerHTML = '<span class="text-success"><i class="fas fa-check mr-1"></i>Datos cargados.</span>';
        } catch (e) {
            msg.textContent = 'Error al consultar el servicio.';
        } finally {
            ico.className = 'fas fa-search';
        }
    }
})();

(function () {
    var sel  = document.getElementById('tipo_proveedor_sel');
    var div  = document.getElementById('div_justificacion');
    var inp  = document.getElementById('justificacion_gasto');
    function toggle() {
        var es = sel.value === 'otros_gastos';
        div.style.display = es ? '' : 'none';
        inp.required = es;
    }
    sel.addEventListener('change', toggle);
    toggle();
})();
</script>
@endpush

@endsection