@extends('layouts.admin')

@section('content')
<div class="container-fluid mb-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="text-uppercase text-dark font-weight-bold mb-0">
                <i class="fas fa-user-tie text-primary"></i> {{ $data->nombre }}
            </h3>
            <span class="text-muted">Gestión de Proveedor y Cuentas por Pagar</span>
        </div>
        <div>
            <a class="btn btn-warning shadow-sm" target="_blank" href="{{route('prove.abonos', ['id' => $data->id])}}">
                <i class="fas fa-hand-holding-usd"></i> Abonar Factura
            </a>
            <a class="btn btn-info shadow-sm text-white" target="_blank" href="{{route('prove.mascomprado', ['id' => $data->id])}}">
                <i class="fas fa-chart-line"></i> Más Comprado
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 px-4">
                    <ul class="nav nav-pills card-header-pills" role="tablist">
                        <li class="nav-item me-1">
                            <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tab-datos" aria-selected="true">
                                <i class="fas fa-id-card me-2"></i> Datos Generales
                            </button>
                        </li>
                        <li class="nav-item me-1">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab-actualizar" aria-selected="false">
                                <i class="fas fa-edit me-2"></i> Editar Info
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tab-facturas" aria-selected="false">
                                <i class="fas fa-file-invoice-dollar me-2"></i> Facturas Pendientes
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card-body p-4">
                    <div class="tab-content">

                        <div class="tab-pane fade show active" id="tab-datos" role="tabpanel">
                            <div class="row">
                                <div class="col-md-5 border-end">
                                    <div class="mb-4">
                                        <h6 class="text-uppercase text-muted small font-weight-bold">Empresa</h6>
                                        <h4 class="text-dark">{{ $data->empresa }}</h4>
                                    </div>

                                    <div class="mb-3">
                                        <i class="fas fa-map-marker-alt text-danger me-2" style="width: 20px;"></i>
                                        <span class="text-secondary">{{ $data->direccion }}</span>
                                    </div>
                                    <div class="mb-3">
                                        <i class="fas fa-phone-alt text-success me-2" style="width: 20px;"></i>
                                        <span class="fw-bold">{{ $data->telefono1 }}</span>
                                        @if($data->telefono2) <span class="text-muted">/ {{ $data->telefono2 }}</span> @endif
                                    </div>
                                    <div class="mb-3">
                                        <i class="fas fa-calendar-check text-primary me-2" style="width: 20px;"></i>
                                        Visita los días: <strong>{{ $data->dias }}</strong>
                                    </div>
                                </div>

                                <div class="col-md-7 ps-md-5">
                                    <h6 class="text-uppercase text-muted small font-weight-bold mb-3">Catálogo de Artículos que Provee</h6>
                                    <div class="p-3 bg-light rounded border">
                                        <p class="mb-0" style="white-space: pre-line;">{{ $data->articulos }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-actualizar" role="tabpanel">
                            <div class="row justify-content-center">
                                <div class="col-lg-10">
                                    <div class="alert alert-light border-start border-warning border-3" role="alert">
                                        <i class="fas fa-info-circle text-warning me-2"></i> Modifique los campos necesarios y guarde los cambios.
                                    </div>
                                    <form action="{{ route('prove.update', ['id' => $data->id])}}" method="post">
                                        @csrf()
                                        @method('PUT')

                                        <div class="bg-white p-3">
                                            @include('admin.proveedores.forms.form')
                                        </div>

                                        <hr>
                                        <div class="text-end">
                                            <button type="submit" class="btn btn-warning px-4">
                                                <i class="fas fa-save me-2"></i> Guardar Cambios
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-facturas" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4 mb-4">
                                    <div class="card bg-light border-0">
                                        <div class="card-header bg-primary text-white font-weight-bold">
                                            <i class="fas fa-plus-circle me-2"></i> Registrar Factura
                                        </div>
                                        <div class="card-body">
                                            <form action="{{ route('prove.facturacreate')}}" method="post">
                                                @csrf()
                                                <input type="hidden" name="proveedor_id" value="{{ $data->id }}">

                                                <div class="mb-3">
                                                    <label class="form-label small font-weight-bold">No. Factura</label>
                                                    <input type="text" class="form-control" name="factura" placeholder="Ej: A-00123" required>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label small font-weight-bold">Valor (Q)</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">Q</span>
                                                        <input type="number" step="0.01" class="form-control" name="valor" placeholder="0.00" required>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label small font-weight-bold">Observaciones</label>
                                                    <textarea class="form-control" name="observaciones" rows="2" placeholder="Detalles adicionales (opcional)"></textarea>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label small font-weight-bold">Fecha Compra</label>
                                                    <input type="date" class="form-control" name="fecha_compra" value="{{ date('Y-m-d') }}" required>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label small font-weight-bold text-danger">Fecha Límite Pago</label>
                                                    <input type="date" class="form-control" name="fecha_de_pago" required>
                                                </div>

                                                <button type="submit" class="btn btn-primary w-100">
                                                    Registrar Deuda
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-8">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h5 class="m-0 font-weight-bold text-secondary">Facturas Pendientes</h5>
                                        <span class="badge bg-danger rounded-pill">{{ $numero }} Pendientes</span>
                                    </div>

                                    <div class="table-responsive border rounded">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Factura</th>
                                                    <th>Valor</th>
                                                    <th>Observaciones</th>
                                                    <th>F. Compra</th>
                                                    <th>F. Vencimiento</th>
                                                    <th class="text-end">Acción</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($facturas as $f)
                                                <tr id="factura-{{ $f->id }}">
                                                    <td class="font-weight-bold text-primary">{{ $f->factura }}</td>
                                                    <td>Q {{ number_format($f->valor, 2) }}</td>
                                                    <td>{{ $f->observaciones }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($f->fecha_compra)->format('d/m/Y') }}</td>
                                                    <td>
                                                        @if(\Carbon\Carbon::parse($f->fecha_de_pago)->isPast())
                                                        <span class="badge bg-danger">Vencida: {{ \Carbon\Carbon::parse($f->fecha_de_pago)->format('d/m/Y') }}</span>
                                                        @else
                                                        <span class="text-info">{{ \Carbon\Carbon::parse($f->fecha_de_pago)->format('d/m/Y') }}</span>
                                                        @endif
                                                    </td>
                                                    <td class="text-end">

                                                        <button type="button" class="btn btn-outline-success btn-sm rounded-circle"
                                                            onclick="updateFactura()">
                                                            <i class="fa fa-check" aria-hidden="true"></i>
                                                        </button>
                                                        <script>
                                                            function updateFactura(id) {
                                                                $.ajax({
                                                                    url: "{{ route('prove.updateFactura', ['id' => ':id']) }}".replace(':id', id),
                                                                    type: 'GET',
                                                                    success: function(response) {
                                                                        if (response.success) {

                                                                            $('#factura-' + id).remove();
                                                                            alert('Factura marcada como PAGADA con éxito.');

                                                                        } else {
                                                                            alert(response.message);
                                                                        }
                                                                    }
                                                                });
                                                            }
                                                        </script>



                                                        <a class="btn btn-outline-danger btn-sm rounded-circle"
                                                            href="{{route('prove.facturadelete', ['id' => $f->id])}}"
                                                            title="Eliminar factura"
                                                            onclick="return confirm('¿Está seguro de eliminar esta factura?');">
                                                            <i class="fa fa-trash"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                @empty
                                                <tr>
                                                    <td colspan="6" class="text-center py-4 text-muted">
                                                        <i class="fas fa-check-circle fa-2x mb-2 text-success"></i><br>
                                                        No hay facturas pendientes de pago.
                                                    </td>
                                                </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection