@extends('adminlte::page')

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

@section('content_header')
    <h1>Editar cliente</h1>
@stop

@section('content')
    <form id="editFormCliente" method="POST">
        @csrf
        @method('PUT')
        <input type="hidden" id="cliente_id" name="cliente_id" value="{{ $cliente->id }}">

        <div class="row">
            {{-- Sección 1: Datos del cliente --}}
            <div class="col-lg-6">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fa fa-user mr-2"></i> Datos del Cliente</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tipo_documento">Tipo de Documento</label>
                                    <select id="tipo_documento" name="tipo_documento" class="form-control" required>
                                        <option value="0" {{ $cliente->tipo_documento == 0 ? 'selected' : '' }}>SIN DOCUMENTO</option>
                                        <option value="1" {{ $cliente->tipo_documento == 1 ? 'selected' : '' }}>DNI</option>
                                        <option value="2" {{ $cliente->tipo_documento == 2 ? 'selected' : '' }}>RUC</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="documento">Documento</label>
                                    <div class="input-group">
                                        <input type="text" id="documento" name="documento" class="form-control" required
                                            value="{{ $cliente->documento }}">
                                        <div class="input-group-append">
                                            <button type="button" id="searchDocumentBtn" class="btn btn-outline-secondary">
                                                <i class="fa fa-search"></i> Buscar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nombre_comercial">Nombre Comercial</label>
                                    <input type="text" id="nombre_comercial" name="nombre_comercial" class="form-control"
                                        required value="{{ $cliente->nombre_comercial }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="razon_social">Razón Social</label>
                                    <input type="text" id="razon_social" name="razon_social" class="form-control"
                                        required value="{{ $cliente->razon_social }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="direccion">Dirección</label>
                            <input type="text" id="direccion" name="direccion" class="form-control"
                                value="{{ $cliente->direccion ?? '' }}">
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="departamento">Departamento</label>
                                    <input type="text" id="departamento" name="departamento" class="form-control"
                                        value="{{ $cliente->departamento ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="provincia">Provincia</label>
                                    <input type="text" id="provincia" name="provincia" class="form-control"
                                        value="{{ $cliente->provincia ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="distrito">Distrito</label>
                                    <input type="text" id="distrito" name="distrito" class="form-control"
                                        value="{{ $cliente->distrito ?? '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" id="email" name="email" class="form-control"
                                        value="{{ $cliente->email ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="celular">Celular</label>
                                    <input type="text" id="celular" name="celular" class="form-control"
                                        value="{{ $cliente->celular ?? '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="tipo_cliente">Tipo de Cliente</label>
                            <select id="tipo_cliente" name="tipo_cliente" class="form-control" required>
                                <option value="despacho" {{ $cliente->tipo_cliente == 'despacho' ? 'selected' : '' }}>Cliente de Despacho</option>
                                <option value="stock" {{ $cliente->tipo_cliente == 'stock' ? 'selected' : '' }}>Cliente STOCK (Almacén)</option>
                                <option value="perdida" {{ $cliente->tipo_cliente == 'perdida' ? 'selected' : '' }}>Cliente Pérdida</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sección 2: Saldo pendiente (actual o histórico) --}}
            <div class="col-lg-6">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-money-bill-wave mr-2"></i> Saldo pendiente Actual ó Histórico</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">
                            Si ingresa un monto y guarda, se generará una orden de despacho y una venta según el tipo elegido. El saldo quedará como pendiente de cobro.
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="deuda_anterior">Deuda anterior / Monto (S/)</label>
                                    <input type="number" id="deuda_anterior" name="deuda_anterior"
                                        class="form-control" step="0.01" min="0" placeholder="0.00"
                                        value="{{ $cliente->deuda_anterior ?? 0 }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tipo_deuda">Tipo de deuda</label>
                                    <select id="tipo_deuda" name="tipo_deuda" class="form-control">
                                        <option value="0" {{ old('tipo_deuda', '0') == '0' ? 'selected' : '' }}>Saldo pendiente histórico</option>
                                        <option value="1" {{ old('tipo_deuda') == '1' ? 'selected' : '' }}>Saldo pendiente actual</option>
                                    </select>
                                    <small class="form-text text-muted">
                                        Histórico: venta con fecha hace 1 mes. Actual: venta con fecha hace 2 días.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sección 3: Lista de precios --}}
                @php
                    $preciosAgrupados = $cliente->precios->groupBy(function ($p) {
                        return $p->presentacion_pollo->descripcion ?? 'Otros';
                    });
                @endphp
                <div class="card card-outline card-success mt-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0"><i class="fas fa-tags mr-2"></i> Lista de precios</h3>
                        <span class="badge badge-success">{{ $cliente->precios->count() }} precios</span>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive tabla-precios-wrap" style="max-height: 420px; overflow-y: auto;">
                            <table class="table table-sm table-bordered table-hover mb-0 tabla-precios">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="width: 36px;" class="text-center">#</th>
                                        <th>Presentación</th>
                                        <th>Tipo</th>
                                        <th style="width: 120px;" class="text-right pr-2">Precio (S/)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $rowNum = 0; @endphp
                                    @forelse ($preciosAgrupados as $presentacionNombre => $precios)
                                        <tr class="table-secondary font-weight-bold">
                                            <td colspan="4" class="py-2">
                                                <i class="fas fa-box-open text-muted mr-1"></i>{{ $presentacionNombre }}
                                            </td>
                                        </tr>
                                        @foreach ($precios as $precio)
                                            @php $rowNum++; @endphp
                                            <tr class="tabla-precios-row">
                                                <td class="text-center align-middle">{{ $rowNum }}</td>
                                                <td class="align-middle">
                                                    <input type="hidden" name="ids[]" value="{{ $precio->id }}">
                                                    {{ $precio->presentacion_pollo->descripcion ?? '-' }}
                                                </td>
                                                <td class="align-middle">{{ $precio->tipo_pollo->descripcion ?? '-' }}</td>
                                                <td class="text-right align-middle py-1">
                                                    <div class="input-group input-group-sm">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text bg-light border-right-0">S/</span>
                                                        </div>
                                                        <input type="number" name="prices[]" class="form-control form-control-sm text-right precio-input" step="0.01" min="0" placeholder="0.00"
                                                            value="{{ number_format((float)($precio->precio ?? 0), 2, '.', '') }}">
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-4">
                                                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                                No hay precios cargados para este cliente.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @if($cliente->precios->isNotEmpty())
                            <div class="px-3 py-2 bg-light border-top small text-muted">
                                <i class="fas fa-info-circle mr-1"></i> Los precios se guardan al hacer clic en <strong>Actualizar cliente</strong>.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-12">
                <div class="card-footer bg-white border-top">
                    <button type="button" id="btnEditCliente" class="btn btn-success mr-2">
                        <i class="fa fa-save"></i> Actualizar Cliente
                    </button>
                    <a href="{{ route('clientes.index') }}" class="btn btn-warning">
                        <i class="fa fa-list"></i> Lista de Clientes
                    </a>
                </div>
            </div>
        </div>
    </form>
@stop

@section('css')
    <style>
        .tabla-precios-wrap thead th { position: sticky; top: 0; z-index: 1; background: #f8f9fa !important; box-shadow: 0 1px 0 #dee2e6; }
        .tabla-precios .tabla-precios-row:hover { background-color: #f1f9f1 !important; }
        .tabla-precios .precio-input { font-weight: 500; }
        .tabla-precios .input-group-text { font-size: 0.875rem; }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $('#btnEditCliente').click(function(e) {
                e.preventDefault();
                const btn = $('#btnEditCliente');
                btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Actualizando...');

                const formData = new FormData($('#editFormCliente')[0]);
                const clienteId = $('#cliente_id').val();
                formData.append('_method', 'PUT');

                $.ajax({
                    type: 'POST',
                    url: "{{ route('clientes.update', ['cliente' => '__CLIENTE_ID__']) }}".replace('__CLIENTE_ID__', clienteId),
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: 'Éxito',
                                text: response.message || 'Cliente actualizado correctamente.',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(function() {
                                window.location.href = "{{ route('clientes.index') }}";
                            });
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: response.message || 'No se pudo actualizar el cliente.',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr) {
                        let msg = 'Ocurrió un error al actualizar.';
                        if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                        Swal.fire({ title: 'Error', text: msg, icon: 'error', confirmButtonText: 'OK' });
                    },
                    complete: function() {
                        btn.prop('disabled', false).html('<i class="fa fa-save"></i> Actualizar cliente');
                    }
                });
            });

            $('#searchDocumentBtn').on('click', function() {
                const documento = $('#documento').val();
                const 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.fire({ title: 'Información encontrada', text: 'Datos actualizados.', icon: 'info', confirmButtonText: 'OK' });
                        } else {
                            Swal.fire({ title: 'Error', text: response.message || 'No encontrado.', icon: 'error', confirmButtonText: 'OK' });
                        }
                    },
                    error: function() {
                        Swal.fire({ title: 'Error', text: 'No se pudo realizar la búsqueda.', icon: 'error', confirmButtonText: 'OK' });
                    }
                });
            });
        });
    </script>
@stop