@extends('layouts.app')

@section('title', $company->name)

@section('content')
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h4 class="mb-0">{{ $company->name }}</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('companies.index') }}">Companies</a></li>
                    <li class="breadcrumb-item active">Profile</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('companies.edit', $company->id) }}" class="btn btn-light">
                <i class="bi bi-pencil me-2"></i> Edit
            </a>
            <button class="btn btn-primary">
                <i class="bi bi-plus-lg me-2"></i> New Factory
            </button>
        </div>
    </div>

    <div class="row g-4">
        <!-- Company Sidebar Info -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4 text-center">
                    <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3"
                        style="width: 80px; height: 80px; font-size: 2.5rem;">
                        {{ substr($company->name, 0, 1) }}
                    </div>
                    <h5 class="mb-1 fw-bold">{{ $company->name }}</h5>
                    <span class="badge bg-success-subtle text-success px-3 py-2 mb-3">Active Enterprise</span>
                    
                    <hr class="my-4 opacity-50">
                    
                    <div class="text-start">
                        <div class="mb-3">
                            <label class="text-muted small d-block mb-1">VAT Number</label>
                            <span class="fw-semibold">{{ $company->vat_number ?? 'Not assigned' }}</span>
                        </div>
                        <div class="mb-3">
                            <label class="text-muted small d-block mb-1">Headquarters</label>
                            <span class="fw-semibold text-wrap">{{ $company->address ?? 'No address provided' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stats -->
            <div class="card border-0 shadow-sm bg-primary text-white">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="small opacity-75 text-uppercase fw-bold">Company Reach</span>
                        <i class="bi bi-globe2 opacity-50 fs-4"></i>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="p-3 bg-white bg-opacity-10 rounded text-center">
                                <h4 class="mb-0 fw-bold">{{ $company->factories->count() }}</h4>
                                <span class="small opacity-75">Factories</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-white bg-opacity-10 rounded text-center">
                                <h4 class="mb-0 fw-bold">{{ $company->branches->count() }}</h4>
                                <span class="small opacity-75">Branches</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content Area -->
        <div class="col-lg-8">
            <!-- Factories List -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3 px-4 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">Associated Factories</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4">Factory Name</th>
                                    <th>Manager</th>
                                    <th>Status</th>
                                    <th class="text-end pe-4">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($company->factories as $factory)
                                    <tr>
                                        <td class="ps-4">
                                            <div class="fw-semibold">{{ $factory->name }}</div>
                                            <span class="text-muted small">{{ $factory->address }}</span>
                                        </td>
                                        <td>{{ $factory->manager ? $factory->manager->name : 'Unassigned' }}</td>
                                        <td>
                                            <span class="badge bg-success-subtle text-success">Operational</span>
                                        </td>
                                        <td class="text-end pe-4">
                                            <a href="{{ route('factories.show', $factory->id) }}" class="btn btn-light btn-sm px-3">View</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5 text-muted">No factories linked to this company.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection