@extends('layouts.app')

@section('title', $company->name . ' — TI Manager')

@section('content')
<div class="animate-fadeIn">
    {{-- Encabezado --}}
    <div class="page-header">
        <div class="page-header-top">
            <div class="d-flex align-center gap-md">
                <a href="{{ route('companies.index') }}" class="btn btn-ghost btn-icon" title="Volver">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <div>
                    <h1 class="page-title" style="margin-bottom: 2px;">{{ $company->name }}</h1>
                    <span class="badge {{ $company->is_active ? 'badge-success' : 'badge-danger' }}">
                        {{ $company->is_active ? 'Activa' : 'Inactiva' }}
                    </span>
                </div>
            </div>
                <div class="d-flex gap-sm">
                    <a href="{{ route('companies.edit', $company) }}" class="btn btn-outline btn-sm">
                        <i class="ph ph-pencil"></i> Editar
                    </a>
                    @if(Auth::user()->isAdmin())
                        <form method="POST" action="{{ route('companies.destroy', $company) }}"
                              onsubmit="confirmDelete(event, '¿Estás seguro de eliminar esta empresa? Esta acción no se puede deshacer.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">
                                <i class="ph ph-trash"></i> Eliminar
                            </button>
                        </form>
                    @endif
                </div>
        </div>
    </div>

    <style>
        .company-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-lg);
            align-items: stretch;
        }
        @media (min-width: 768px) {
            .company-layout {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 1200px) {
            .company-layout {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        .layout-col {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
        }
        .layout-col > .card {
            margin-bottom: 0 !important;
            height: auto;
        }
        .layout-col > .card:last-child {
            flex-grow: 1;
        }
    </style>
    <div class="company-layout">
        {{-- Columna 1 --}}
        <div class="layout-col">
        {{-- Logo --}}
        @if($company->logo)
            <div class="card" style="text-align: center;">
                <img src="{{ asset('storage/' . $company->logo) }}" alt="{{ $company->name }}"
                     style="max-width: 200px; border-radius: var(--radius-md); margin: 0 auto;">
            </div>
        @endif

        {{-- Info General --}}
        <div class="card">
            <div class="info-group">
                <div class="info-group-title">
                    <i class="ph ph-info"></i> Información General
                </div>
                <div class="info-row">
                    <span class="info-label">Nombre</span>
                    <span class="info-value">{{ $company->name }}</span>
                </div>
                @if($company->nit)
                    <div class="info-row">
                        <span class="info-label">NIT</span>
                        <span class="info-value">{{ $company->nit }}{{ $company->dv ? '-'.$company->dv : '' }}</span>
                    </div>
                @endif
                @if($company->responsabilidad_fiscal)
                    <div class="info-row">
                        <span class="info-label">Resp. Fiscal</span>
                        <span class="info-value">{{ $company->responsabilidad_fiscal }}</span>
                    </div>
                @endif
            </div>
        </div>

        {{-- Estado de Cuenta --}}
        <div class="card" style="background: var(--primary-light);">
            <div class="info-group">
                <div class="info-group-title" style="color: var(--primary);">
                    <i class="ph ph-wallet"></i> Estado de Cuenta
                </div>
                @php
                    $totalInvoiced = $company->invoices->sum('total_amount');
                    $totalPaid = $company->invoices->where('status', 'Pagado')->sum('total_amount');
                    $totalDebt = $company->invoices->where('status', 'Sin Pagar')->sum('total_amount');
                @endphp
                <div class="info-row">
                    <span class="info-label">Total Facturado</span>
                    <span class="info-value" style="font-weight: 600;">${{ number_format($totalInvoiced, 0) }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Total Pagado</span>
                    <span class="info-value" style="font-weight: 600; color: #91c849;">${{ number_format($totalPaid, 0) }}</span>
                </div>
                <div class="info-row" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.1);">
                    <span class="info-label">Deuda Actual</span>
                    <span class="info-value" style="font-weight: 700; color: {{ $totalDebt > 0 ? '#ef4444' : 'var(--text-primary)' }}; font-size: 1.1rem;">
                        ${{ number_format($totalDebt, 0) }}
                    </span>
                </div>
            </div>
        </div>

        </div>

        {{-- Columna 2 --}}
        <div class="layout-col">
        {{-- Ubicación --}}
        <div class="card">
            <div class="info-group">
                <div class="info-group-title">
                    <i class="ph ph-map-pin"></i> Ubicación
                </div>
                @if($company->address)
                    <div class="info-row">
                        <span class="info-label">Dirección</span>
                        <span class="info-value">{{ $company->address }}</span>
                    </div>
                @endif
                @if($company->city)
                    <div class="info-row">
                        <span class="info-label">Ciudad</span>
                        <span class="info-value">{{ $company->city }}</span>
                    </div>
                @endif
                @if($company->department)
                    <div class="info-row">
                        <span class="info-label">Departamento</span>
                        <span class="info-value">{{ $company->department }}</span>
                    </div>
                @endif
                @if(!$company->address && !$company->city && !$company->department)
                    <p class="text-muted text-sm">No se ha registrado ubicación.</p>
                @endif
            </div>
        </div>

        {{-- Contacto --}}
        <div class="card">
            <div class="info-group">
                <div class="info-group-title">
                    <i class="ph ph-phone"></i> Contacto
                </div>
                @if($company->phone)
                    <div class="info-row">
                        <span class="info-label">Teléfono</span>
                        <span class="info-value">
                            <a href="tel:{{ $company->phone }}" style="color: var(--secondary);">{{ $company->phone }}</a>
                        </span>
                    </div>
                @endif
                @if($company->email)
                    <div class="info-row">
                        <span class="info-label">Email</span>
                        <span class="info-value">
                            <a href="mailto:{{ $company->email }}" style="color: var(--secondary);">{{ $company->email }}</a>
                        </span>
                    </div>
                @endif
                @if($company->website)
                    <div class="info-row">
                        <span class="info-label">Web</span>
                        <span class="info-value">
                            <a href="{{ $company->website }}" target="_blank" style="color: var(--secondary);">{{ $company->website }}</a>
                        </span>
                    </div>
                @endif
                @if(!$company->phone && !$company->email && !$company->website)
                    <p class="text-muted text-sm">No se ha registrado información de contacto.</p>
                @endif
            </div>
        </div>

        {{-- Notas --}}
        @if($company->notes)
            <div class="card">
                <div class="info-group">
                    <div class="info-group-title">
                        <i class="ph ph-note"></i> Notas
                    </div>
                    <p style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6;">{{ $company->notes }}</p>
                </div>
            </div>
        @endif
        </div>

        {{-- Columna 3 --}}
        <div class="layout-col">
        {{-- Sedes / Sucursales --}}
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-map-trifold" style="color: var(--primary);"></i>
                    Sedes
                    @if($company->branches->count() > 0)
                        <span class="count">({{ $company->branches->count() }})</span>
                    @endif
                </h3>
                @if(Auth::user()->isAdmin())
                    <a href="{{ route('companies.branches.create', $company) }}" class="btn btn-primary btn-sm">
                        <i class="ph ph-plus"></i> Nueva Sede
                    </a>
                @endif
            </div>

            @if($company->branches->count() > 0)
                @foreach($company->branches as $branch)
                    <div class="list-item" style="align-items: flex-start;">
                        <div class="avatar-sm avatar" style="background: {{ $branch->is_main ? 'var(--primary)' : 'var(--card-bg)' }};">
                            <i class="ph ph-map-pin" style="font-size: 1rem;"></i>
                        </div>
                        <div class="list-item-content" style="flex: 1;">
                            <div class="list-item-title">
                                {{ $branch->name }}
                                @if($branch->is_main)
                                    <span class="badge badge-primary" style="margin-left: 4px;">Principal</span>
                                @endif
                                <span class="badge {{ $branch->is_active ? 'badge-success' : 'badge-danger' }}">
                                    {{ $branch->is_active ? 'Activa' : 'Inactiva' }}
                                </span>
                            </div>
                            <div class="list-item-subtitle">
                                {{ $branch->full_address }}
                                @if($branch->contact_person)
                                    · <i class="ph ph-user"></i> {{ $branch->contact_person }}
                                @endif
                            </div>
                            <div class="d-flex gap-sm" style="margin-top: 6px; flex-wrap: wrap;">
                                <a href="{{ route('companies.branches.show', [$company, $branch]) }}" class="btn btn-outline" style="font-size: 0.75rem; padding: 4px 10px;">
                                    <i class="ph ph-package"></i> {{ $branch->inventoryItems->count() }} equipos
                                </a>
                                @if($branch->google_maps_url)
                                    <a href="{{ $branch->google_maps_url }}" target="_blank" class="btn btn-outline" style="font-size: 0.75rem; padding: 4px 10px; color: var(--primary);">
                                        <i class="ph ph-navigation-arrow"></i> GPS
                                    </a>
                                @endif
                                <a href="{{ route('companies.branches.edit', [$company, $branch]) }}" class="btn btn-ghost" style="font-size: 0.75rem; padding: 4px 10px;">
                                        <i class="ph ph-pencil"></i>
                                    </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="empty-state" style="padding: var(--space-lg);">
                    <i class="ph ph-map-trifold" style="font-size: 2rem;"></i>
                    <p style="margin: var(--space-sm) 0 0;">No hay sedes registradas.</p>
                    @if(Auth::user()->isAdmin())
                        <a href="{{ route('companies.branches.create', $company) }}" class="btn btn-primary btn-sm" style="margin-top: var(--space-sm);">
                            <i class="ph ph-plus"></i> Crear primera sede
                        </a>
                    @endif
                </div>
            @endif
        </div>

        {{-- Contactos de las Sedes --}}
        @php
            $branchesWithContacts = $company->branches->filter(function($branch) {
                return !empty($branch->contact_person);
            });
        @endphp
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-address-book" style="color: var(--primary);"></i>
                    Contactos de Sedes
                    @if($branchesWithContacts->count() > 0)
                        <span class="count">({{ $branchesWithContacts->count() }})</span>
                    @endif
                </h3>
            </div>

            @if($branchesWithContacts->count() > 0)
                @foreach($branchesWithContacts as $branch)
                    <div class="list-item">
                        <div class="avatar-sm avatar" style="background: var(--primary-light); color: var(--primary);">
                            {{ strtoupper(substr($branch->contact_person, 0, 2)) }}
                        </div>
                        <div class="list-item-content">
                            <div class="list-item-title">
                                {{ $branch->contact_person }}
                            </div>
                            <div class="list-item-subtitle" style="margin-top: 2px;">
                                <div style="display: flex; align-items: center; gap: 4px; margin-bottom: 2px;">
                                    <i class="ph ph-map-pin"></i> {{ $branch->name }}
                                </div>
                                @if($branch->phone)
                                    <div style="display: flex; align-items: center; gap: 4px;">
                                        <i class="ph ph-phone"></i> 
                                        <a href="tel:{{ $branch->phone }}" style="color: var(--secondary); font-weight: 500; text-decoration: none;">
                                            {{ $branch->phone }}
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="empty-state" style="padding: var(--space-lg);">
                    <i class="ph ph-user-circle" style="font-size: 2rem;"></i>
                    <p style="margin: var(--space-sm) 0 0;">No hay encargados registrados en las sedes.</p>
                </div>
            @endif
        </div>
        </div>
    </div>

    {{-- Facturas DIAN --}}
    <div class="card" style="margin-top: var(--space-lg);">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h3 class="card-title">
                <i class="ph ph-receipt" style="color: var(--primary);"></i>
                Facturas DIAN
                @if($company->invoices->count() > 0)
                    <span class="count">({{ $company->invoices->count() }})</span>
                @endif
            </h3>
            @if(!auth()->user()->isClient())
                <a href="{{ route('invoices.create') }}" class="btn btn-primary btn-sm">
                    <i class="ph ph-upload-simple"></i> Subir Factura
                </a>
            @endif
        </div>

        @if($company->invoices->count() > 0)
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; text-align: left;">
                    <thead>
                        <tr style="border-bottom: 2px solid rgba(0,0,0,0.05); background: rgba(0,0,0,0.02);">
                            <th style="padding: 12px 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Número</th>
                            <th style="padding: 12px 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Emisión</th>
                            <th style="padding: 12px 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Total</th>
                            <th style="padding: 12px 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase;">Estado</th>
                            <th style="padding: 12px 16px; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; text-align: right;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($company->invoices as $invoice)
                        <tr style="border-bottom: 1px solid rgba(0,0,0,0.05);">
                            <td style="padding: 12px 16px; font-weight: 600; color: var(--primary);">
                                {{ $invoice->document_number }}
                            </td>
                            <td style="padding: 12px 16px; color: var(--text-muted); font-size: 0.95rem;">
                                {{ $invoice->issue_date ? $invoice->issue_date->format('d/m/Y') : 'N/A' }}
                            </td>
                            <td style="padding: 12px 16px; font-weight: 600;">
                                ${{ number_format($invoice->total_amount, 0) }}
                            </td>
                            <td style="padding: 12px 16px;">
                                @php
                                    $color = $invoice->status === 'Pagado' ? ['bg' => 'rgba(145, 200, 73, 0.1)', 'color' => '#91c849'] : ['bg' => 'rgba(239, 68, 68, 0.1)', 'color' => '#ef4444'];
                                @endphp
                                <span style="display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: {{ $color['bg'] }}; color: {{ $color['color'] }};">
                                    {{ $invoice->status }}
                                </span>
                            </td>
                            <td style="padding: 12px 16px; text-align: right;">
                                <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                    <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-sm btn-ghost text-primary" title="Ver Detalle" style="padding: 4px 8px;">
                                        <i class="ph ph-eye" style="font-size: 1.1rem;"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="empty-state" style="padding: var(--space-lg); text-align: center;">
                <i class="ph ph-receipt" style="font-size: 2.5rem; opacity: 0.5; margin-bottom: 10px;"></i>
                <p style="margin: 0; color: var(--text-muted);">Esta empresa no tiene facturas registradas.</p>
            </div>
        @endif
    </div>
</div>
@endsection