@php
    $footer = App\Models\Footer::first();
    $headerLogo = App\Models\HeaderLogo::first();
    $pageNames = $footer->pages['names'] ?? [];
    $pageLinks = $footer->pages['links'] ?? [];
@endphp

<footer class="fixed-footer">
    <div class="container_footer">
        <div class="left_side">

            <div class="left_footer">
                @if ($headerLogo)
                    <div class="logo-image">
                        <a href="{{ $headerLogo->url }}"><img src="{{ asset('storage/' . $headerLogo->logo) }}"
                                alt="Logo"></a>
                    </div>
                @endif
            </div>
            <div class="company_info">
                @if ($footer)
                    <div class="company_tittle">{{ $footer->footer_tiittle }},</div>
                    <div class="footer_address">{{ $footer->footer_address }}</div>
                    <div>
                        @if ($footer->footer_phone_num)
                            <div class="phone_number">Phone: {{ $footer->footer_phone_num }}</div>
                        @endif
                        @if ($footer->footer_tele_num)
                            <div class="tel_number">Tel: {{ $footer->footer_tele_num }}</div>
                        @endif
                    </div>
                    @if ($footer->footer_mail_id)
                        <div class="email_address">Email: {{ $footer->footer_mail_id }}</a></div>
                    @endif
                @endif
            </div>
        </div>
        <div class="right_side">
            <div class="right_topside">
                <div class="footer_links">
                    @if (!empty($footer->pages) && is_array($footer->pages))
                        <ul>
                            @foreach ($footer->pages as $page)
                                <li>
                                    <a href="{{ $page['link'] ?? '#' }}">
                                        {{ $page['name'] ?? '' }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
                <div class="footer_social">
                    @if ($footer)
                        <ul>
                            @for ($i = 1; $i <= 4; $i++)
                                @php
                                    $status = $footer['social_status'] ?? 1;
                                    $link = $footer['social_link_' . $i] ?? null;
                                    $heading = $footer['social_heading_' . $i] ?? null;
                                @endphp
                                @if ($status && $link && $heading)
                                    <li><a href="{{ $link }}" target="_blank">{{ $heading }}</a></li>
                                @endif
                            @endfor
                        </ul>
                    @endif
                </div>
            </div>
            <div class="footer_bottom">
                <div>
                    @if ($footer && $footer->copyright_status)
                        <span>{{ $footer->copyright }}</span>
                    @endif
                </div>
                <div>
                    @if ($footer && $footer->privacy_policy_status)
                        <a href="{{ $footer->privacy_policy_link }}">{{ $footer->privacy_policy }}</a>
                    @endif
                    @if ($footer && $footer->term_of_service_status)
                        <a href="{{ $footer->term_of_service_link }}">{{ $footer->term_of_service }}</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="up-arrow" onclick="window.scrollTo({top:0,behavior:'smooth'})">
        <img src="{{ asset('images/arrow_up.svg') }}" alt="Up" />
    </div>
</footer>
<style>
    .fixed-footer {
        position: relative;
        bottom: 0;
        background-color: #111827;
        padding: 60px 40px;
    }

    .container_footer {
        display: flex;
        align-items: flex-start;
        margin: 0 auto;
        gap: 50px;
        justify-content: space-between;
        width: 100%;
    }

    .left_side {
        display: flex;
        gap: 18px;
        width: 40%;
    }

    .logo-image img {
        max-width: 270px;
        height: auto;
    }

    .company_info {
        color: #e0e6ed;
    }

    .company_tittle,
    .footer_address {
        font-family: Mallanna;
        font-weight: 400;
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 0%;

    }

    .phone_number,
    .tel_number,
    .email_address {
        border-bottom: 1px solid #e0e6ed;
        color: #e0e6ed;
        font-family: Mallanna;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0%;
        margin-top: 10%;
        width: max-content;

    }

    .right_side {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .right_topside {
        display: flex;
        /* gap: 60px; */
        justify-content: space-between;
        margin-bottom: 20px;
        width: 100%;
    }

    .footer_links {
        width: 60%;
    }

    .footer_social {
        width: 40%;
    }

    .footer_links ul,
    .footer_social ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer_links ul {
        columns: 2;
        column-gap: 40px;

    }

    .footer_links li,
    .footer_social li {
        margin-bottom: 8px;
    }

    .footer_links a,
    .footer_social a {
        color: #e0e6ed;
        text-decoration: none;
        transition: color 0.2s;
        font-size: 15px;
    }

    .footer_links a:hover,
    .footer_social a:hover {
        color: #ffb347;
        text-decoration: underline;
    }

    .footer_social ul {
        columns: 1;
    }


    /* Up arrow button */
    .fixed-footer .up-arrow {
        position: absolute;
        right: 40px;
        bottom: 40px;
        background: #0082D6;
        border-radius: 50%;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        transition: background 0.2s;
        z-index: 10;
        border: none;
        padding: 0;
    }

    .fixed-footer .up-arrow:hover {
        background: #ffb347;
    }

    .fixed-footer .up-arrow img {
        width: 18px;
        height: 18px;
        display: block;
        filter: brightness(0) invert(1);
    }

    /* Responsive */
    @media (max-width: 900px) {
        .fixed-footer {
            padding: 40px 20px;
        }

        .container_footer {
            flex-direction: column;
            gap: 30px;
        }

        .left_side {
            width: 100%;
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }

        .logo-image img {
            max-width: 200px;
        }

        .company_tittle,
        .footer_address {
            font-size: 20px;
            line-height: 28px;
        }

        .phone_number,
        .tel_number,
        .email_address {
            font-size: 14px;
            line-height: 20px;
            margin-top: 8%;
            width: 100%;
            text-align: center;
        }

        .right_side {
            width: 100%;
        }

        .right_topside {
            flex-direction: column;
            gap: 30px;
        }

        .footer_links,
        .footer_social {
            width: 100%;
        }

        .footer_links ul {
            columns: 1;
            text-align: center;
        }

        .footer_social ul {
            text-align: center;
        }

        .footer_bottom {
            flex-direction: column;
            gap: 15px;
            text-align: center;
            padding: 15px;
        }

        .footer_bottom>div {
            justify-content: center;
        }

        .footer_bottom a {
            margin-left: 10px;
            margin-right: 10px;
        }

        .fixed-footer .up-arrow {
            right: 20px;
            bottom: 20px;
            width: 35px;
            height: 35px;
        }

        .fixed-footer .up-arrow img {
            width: 16px;
            height: 16px;
        }
    }

    @media (max-width: 600px) {
        .fixed-footer {
            padding: 30px 15px;
        }

        .container_footer {
            gap: 25px;
        }

        .left_side {
            gap: 15px;
        }

        .logo-image img {
            max-width: 180px;
        }

        .company_tittle,
        .footer_address {
            font-size: 18px;
            line-height: 24px;
        }

        .phone_number,
        .tel_number,
        .email_address {
            border-bottom: 0px solid #e0e6ed;
            font-size: 13px;
            line-height: 18px;
            margin-top: 6%;
        }

        .footer_links a,
        .footer_social a {
            font-size: 14px;
        }

        .footer_bottom {
            font-size: 12px;
            padding: 10px;
        }

        .footer_bottom a {
            margin-left: 8px;
            margin-right: 8px;
        }

        .fixed-footer .up-arrow {
            right: 15px;
            bottom: 15px;
            width: 32px;
            height: 32px;
        }

        .fixed-footer .up-arrow img {
            width: 14px;
            height: 14px;
        }
    }

    @media (max-width: 480px) {
        .fixed-footer {
            padding: 25px 10px;
        }

        .container_footer {
            gap: 20px;
        }

        .logo-image img {
            max-width: 150px;
        }

        .company_tittle,
        .footer_address {
            font-size: 16px;
            line-height: 22px;
        }

        .phone_number,
        .tel_number,
        .email_address {
            font-size: 12px;
            line-height: 16px;
            margin-top: 5%;
        }

        .footer_links a,
        .footer_social a {
            font-size: 13px;
        }

        .footer_bottom {
            font-size: 11px;
            padding: 8px;
        }

        .footer_bottom a {
            margin-left: 6px;
            margin-right: 6px;
        }

        .fixed-footer .up-arrow {
            right: 10px;
            bottom: 10px;
            width: 30px;
            height: 30px;
        }

        .fixed-footer .up-arrow img {
            width: 12px;
            height: 12px;
        }
    }

    .footer_bottom {
        color: #D0D0D0;
        padding: 20px;
        display: flex;
        gap: 10%;
        align-items: center;
        font-size: 14px;
    }

    .footer_bottom>div {
        display: flex;
        align-items: center;
    }

    .footer_bottom a {
        color: #D0D0D0;
        text-decoration: none;
        margin-left: 15px;
        /* Spacing between links */
    }

    .footer_bottom a:hover {
        color: #F3881B;
        /* Hover color, similar to your navbar */
    }
</style>