@extends('company.layouts.app')

@section('title', 'Companies')

@section('content')
<div class="p-4">
    <style>
        /* Hero Section */
        .hero-section {
            width: 100%;
            height: 400px;
            background-image: url('{{ $company->logo_url }}');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            background-color: #f3f4f6;
            /* Fallback color */
        }

        /* Main Card Container */
        .info-card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-top: 40px;
            font-family: 'Arial', sans-serif;
        }

        .info-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: #333333;
            border-bottom: 2px solid #eeeeee;
            padding-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        .info-card section {
            margin-bottom: 30px;
        }

        .info-card dl {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }

        /* Styling for dt (terms) */
        .info-card dt {
            font-weight: 600;
            color: #444444;
            width: 10%;
            /* Takes 30% of the container */
            text-align: left;
            margin: 0;
            /* Remove margin */
            padding: 8px;
        }

        /* Styling for dd (definitions) */
        .info-card dd {
            width: 90%;
            /* Takes 70% of the container */
            margin: 0;
            color: #555555;
            text-align: left;
            padding: 8px;
        }

        /* Optional: Adjust spacing on smaller screens */
        @media (max-width: 768px) {
            .info-card dl {
                flex-direction: column;
                /* Stack dt and dd vertically on mobile */
            }

            .info-card dt,
            .info-card dd {
                width: 100%;
                /* Take full width on smaller screens */
            }
        }

        /* Links */
        .info-card a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .info-card a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        /* List Styling */
        .info-card ul {
            padding-left: 0;
            list-style: none;
            margin: 0;
            display: flex;
            justify-content: space-around;
        }

        .info-card ul li {
            font-size: 18px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .info-card ul li i {
            margin-right: 8px;
            color: #6c757d;
        }

        .info-card ul li a {
            font-size: 18px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-section {
                height: 250px;
            }

            .info-card {
                padding: 20px;
            }

            .info-card h3 {
                font-size: 20px;
            }

            .info-card ul li {
                font-size: 16px;
            }
        }

        /* Additional Styling for Network Section */
        .info-card .network-section dt {
            font-weight: bold;
            color: #444444;
            margin-top: 8px;
        }

        .info-card .network-section dd {
            margin: 5px 0 15px 20px;
            color: #555555;
            font-style: italic;
        }
    </style> 
  
    <div>
        <!-- Hero Section -->
        <div class="hero-section"></div>

        <!-- Single Card for All Sections -->
        <div class="info-card">
            <!-- About the Company -->
            @if(!empty($company->about))
            <section>
                <h3>About the Company</h3>
                <p>{!! $company->about !!}</p>
            </section>
            @endif

            <!-- Contact Information -->
            @if(!empty($company->phone) || !empty($company->email) || !empty($company->website_url) || !empty($company->address))
            <section>
                <h3>Contact Information</h3>
                <dl>
                    @if(!empty($company->phone))
                    <dt>Phone:</dt>
                    <dd>{{ $company->phone }}</dd>
                    @endif

                    @if(!empty($company->email))
                    <dt>Email:</dt>
                    <dd><a href="mailto:{{ $company->email }}">{{ $company->email }}</a></dd>
                    @endif

                    @if(!empty($company->website_url))
                    <dt>Website:</dt>
                    <dd><a href="{{ $company->website_url }}" target="_blank">{{ $company->website_url }}</a></dd>
                    @endif

                    @if(!empty($company->address))
                    <dt>Address:</dt>
                    <dd>{{ $company->address }}, {{ $company->address2 }}, {{ $company->city }}, {{ $company->county }}, {{ $company->state }} {{ $company->zip }}</dd>
                    @endif
                </dl>
            </section>
            @endif

            <!-- Social Media -->
            @if($company->instagram || $company->facebook || $company->twitter || $company->linkedin)
            <section>
                <h3>Social Media</h3>
                <ul>
                    @if($company->instagram)
                    <li><a href="{{ $company->instagram }}" target="_blank"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
                    @endif
                    @if($company->facebook)
                    <li><a href="{{ $company->facebook }}" target="_blank"><i class="fa-brands fa-facebook"></i> Facebook</a></li>
                    @endif
                    @if($company->twitter)
                    <li><a href="{{ $company->twitter }}" target="_blank"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
                    @endif
                    @if($company->linkedin)
                    <li><a href="{{ $company->linkedin }}" target="_blank"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>
                    @endif
                </ul>
            </section>
            @endif

            <!-- Additional Information -->
            @if(!empty($company->status) || !empty($company->role) || !empty($company->created_at) || !empty($company->updated_at))
            <section>
                <h3>Additional Information</h3>
                <dl>
                    @if(!empty($company->status))
                    <dt>Status:</dt>
                    <dd>{{ ucfirst($company->status) }}</dd>
                    @endif

                    @if(!empty($company->role))
                    <dt>Role:</dt>
                    <dd>{{ ucfirst($company->role) }}</dd>
                    @endif

                    @if(!empty($company->created_at))
                    <dt>Created At:</dt>
                    <dd>{{ \Carbon\Carbon::parse($company->created_at)->format('F j, Y, g:i a') }}</dd>
                    @endif

                    @if(!empty($company->updated_at))
                    <dt>Updated At:</dt>
                    <dd>{{ \Carbon\Carbon::parse($company->updated_at)->format('F j, Y, g:i a') }}</dd>
                    @endif
                </dl>
            </section>
            @endif
        </div>
    </div>
    @endsection