@extends('layouts.base')
@section('content')
@if(isset($header_type))
@elseif(View::hasSection('header_type'))
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent pr-0">
        @else
        <nav class="navbar  navbar-expand-lg navbar-light bg-transparent ">
            @endif
            <a href="{{url('/')}}" class="pt-2 ml-auto d-block d-lg-none"><img src="{{asset('/images/logo/logo.svg')}}" width="130px" alt="apibeats icon"></a>

            <button class="navbar-toggler mt-2 ml-3 mr-0 text-dark " type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            @if(isset($header_type))
            @elseif(View::hasSection('header_type'))
            @else
            <a href="{{url('/')}}"><img id="app-icon" src="{{asset('/images/app-badge.svg')}}" alt="apibeats icon"></a>
            @endif
            <div class="collapse  navbar-collapse" id="navbarTogglerDemo03">
                <a href="{{url('/')}}" class="pt-4 ml-auto d-none pr-3 d-lg-block" style="z-index:100"> <img src="{{asset('/images/logo/logo.svg')}}" class="" width="120px" style="margin-top: 3px;" alt="apibeats icon"></a>

                <ul class="navbar-nav nav-font pt-4 ml-2 mt-2 mt-lg-0">

                    <li class="nav-item text-right pr-3 pl-3">
                        <a class="nav-link text-decoration-none text-dark" rel="noreferrer" target="_blank" href="https://www.notion.so/geekyants/apibeats-Learning-Center-e2025f04653b4c96b7cd67b7a0aec53c">Docs</a>
                    </li>
                    <li class="nav-item text-right pr-3 pl-3">
                        <a class="nav-link text-decoration-none text-dark" href="https://trello.com/b/P3Ene5wG/apibeats-public">Roadmap</a>
                    </li>
                    <li class="nav-item text-right pr-3 pl-3">
                        <a class="nav-link text-decoration-none text-dark" href="{{url('/pricing')}}">Pricing</a>
                    </li>
                    <li class="nav-item text-right pr-3 pl-3">
                        <a class="nav-link text-decoration-none text-dark" href="https://calendly.com/apibeats">Request
                            a Demo</a>
                    </li>
                    <li class="nav-item text-right pr-3 pl-3">
                        <a class="nav-link text-decoration-none text-dark" href="{{config('app.main_app_url').'/login'}}">Login</a>
                    </li>
                    <li class="nav-item text-right pl-3">
                        <a class="btn btn-sm pl-4 pr-4 pt-2 pb-2 nav-font btn-primary" href="{{config('app.main_app_url').'/register'}}">TRY FOR FREE</a>
                    </li>
                </ul>
            </div>
        </nav>
        @if(isset($header_type))
        @elseif(View::hasSection('header_type'))
</div>
@endif

@yield('container')
<!-- Fifth Fold -->
<!-- Desktop View -->
<div class="container d-none d-md-block p-0" style="min-height: 50vh;">
    <div class="container">
        <div class="row pt-5">
            <div class="col-md">
                <div class="row p-4 pt-5">
                    <div class="col">
                        <h2 class="footer-title">Useful Links</h2>
                        <ul class="footer-links pt-1">
                            <li><a class="text-footer" href="https://trello.com/b/P3Ene5wG/apibeats-public">Roadmap</a>
                            </li>
                            <li><a class="text-footer" href="{{url('/changelog')}}">Changelog <span id="changelog-counts" class="badge badge-danger">3</span></a></li>
                        </ul>
                    </div>
                    <div class="col">
                        <h2 class="footer-title">Support</h2>
                        <ul class="footer-links pt-1 pr-4">
                            <li>
                                <a class="text-footer" href="mailto:strapui-support@sahusoft.com">strapui-support@sahusoft.com</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <h2 class="footer-title">Others</h2>
                        <ul class="footer-links pt-1">
                            <li><a class="text-footer" href="{{url('/privacy-policy')}}">Privacy Policy</a></li>
                            <li><a class="text-footer" href="{{url('/cookie-policy')}}">Cookie Policy</a></li>
                            <li><a class="text-footer" href="{{url('/end-user-license-agreement')}}">EULA</a></li>
                        </ul>
                    </div>
                    <div class="col">
                        <div class="footer-logo">
                            <img id="footer-apibeats-logo" src="{{asset('/images/logo/logo.svg')}}" alt="apibeats logo">
                        </div>
                        <ul class="pt-4 footer-links">
                            <li>
                                <a class="pr-1 pl-1" href="https://www.facebook.com/apibeats?view_public_for=106662114460378">
                                    <x-icons.facebook-icon /></a>
                                <a class="pr-1 pl-1" href="https://twitter.com/apibeats">
                                    <x-icons.twitter-icon /></a>
                                <a class="pr-1 pl-1" href="https://www.linkedin.com/company/apibeats/?viewAsMember=true">
                                    <x-icons.linkedin-icon /></a>
                            </li>

                        </ul>
                        <ul class="footer-links">
                            <li>
                                <a target="_blank" class="pr-1 pl-1 text-footer" href="https://geekyants.com">Built with ❤️&nbsp at GeekyAnts.</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Mobile View -->
<div class=" d-block d-md-none">
    <div class="accordion" id="footerColumns">
        <div class="card border-0">
            <div class="card-header border-0" id="usefulLinks">
                <h2 class="mb-0">
                    <button class="btn btn-link shadow-none accordian-btn collapsed" type="button" data-toggle="collapse" data-target="#links" aria-expanded="false" aria-controls="links">
                        <div class="row">
                            <div class="col ml-2 pl-4">
                                Useful Links
                            </div>
                            <div class="col text-right">
                                <x-icons.down-chevron />
                            </div>
                        </div>
                    </button>
                </h2>
            </div>
            <div id="links" class="collapse" aria-labelledby="usefulLinks" data-parent="#footerColumns">
                <div class="card-body">
                    <ul class="footer-links pl-4 ml-2">
                        <li><a class="text-footer" href="https://trello.com/b/P3Ene5wG/apibeats-public">Roadmap</a></li>
                        <li><a class="text-footer" href="{{url('/changelog')}}">Changelog <span id="changelog-counts" class="badge badge-danger">3</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-header border-0" id="support">
                <h2 class="mb-0">
                    <button class="btn btn-link shadow-none accordian-btn collapsed" type="button" data-toggle="collapse" data-target="#supportlinks" aria-expanded="false" aria-controls="supportlinks">
                        <div class="row">
                            <div class="col ml-2 pl-4">
                                Support
                            </div>
                            <div class="col text-right">
                                <x-icons.down-chevron />
                            </div>
                        </div>
                    </button>
                </h2>
            </div>
            <div id="supportlinks" class="collapse" aria-labelledby="support" data-parent="#footerColumns">
                <div class="card-body">
                    <ul class="footer-links pl-4 ml-2">
                        <li>
                            <a class="text-footer" href="mailto:strapui-support@sahusoft.com">strapui-support@sahusoft.com</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card border-0">
            <div class="card-header border-0" id="others">
                <h2 class="mb-0">
                    <button class="btn btn-link shadow-none accordian-btn collapsed" type="button" data-toggle="collapse" data-target="#otherlinks" aria-expanded="false" aria-controls="otherlinks">
                        <div class="row">
                            <div class="col ml-2 pl-4">
                                Others
                            </div>
                            <div class="col text-right">
                                <x-icons.down-chevron />
                            </div>
                        </div>
                    </button>
                </h2>
            </div>
            <div id="otherlinks" class="collapse" aria-labelledby="others" data-parent="#footerColumns">
                <div class="card-body">
                    <ul class="footer-links pl-4 ml-2">
                        <li><a class="text-footer" href="{{url('/privacy-policy')}}">Privacy Policy</a></li>
                        <li><a class="text-footer" href="{{url('/cookie-policy')}}">Cookie Policy</a></li>
                        <li><a class="text-footer" href="{{url('/end-user-license-agreement')}}">EULA</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row p-5 pl-0">
            <div class="col text-left pl-0">

                <div class="footer-logo">
                    <img src="{{asset('/images/logo/logo.svg')}}" alt="apibeats logo">
                </div>
                <ul class="pt-3 footer-links">
                    <li>
                        <a class="pr-1 pl-1" href="https://www.facebook.com/apibeats?view_public_for=106662114460378">
                            <x-icons.facebook-icon /></a>
                        <a class="pr-1 pl-1" href="https://twitter.com/apibeats">
                            <x-icons.twitter-icon /></a>
                        <a class="pr-1 pl-1" href="https://www.linkedin.com/company/apibeats/?viewAsMember=true">
                            <x-icons.linkedin-icon /></a>
                    </li>
                </ul>
                <ul class=" footer-links">
                    <li>
                        <a class="pr-1 pl-1 text-footer" target="_blank" href="https://geekyants.com">Built with ❤️&nbsp at GeekyAnts.</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection