@extends('app')

@section('title', $page_data->meta_title)

@section('meta_keywords', $page_data->meta_keywords?? '')
@section('meta_description', $page_data->meta_description?? '')

<!--@section('title', 'About Us')-->

@section('head')
<style>
    .list-about{
        background: none;
        border: 0;
        color: #FFF;
        border-top: 1px solid #FFF;
        cursor: pointer;
    }
    .list-about h4{
        font-family: lato;
        font-size: 24px;
        width: 100%;
        padding: 11px;
    }
    .list-about h4:hover{
        font-family: lato;
        font-size: 24px;
        width: 100%;
        padding: 11px;
        background: #0f6db6;
    }
    .list-about .active{
        font-family: lato;
        font-size: 24px;
        width: 100%;
        padding: 10px;
        background: #0f6db6;
        border-top:1px solid #ffffff;
    }
    .about1{
        position: absolute;
        bottom: 50px;
        width: 303px;
        padding: 0px;    border-top: 0px;

    }
    .about2{
        position: absolute;
        bottom: 0px;
        width: 303px;
        padding: 0px;
    }

    .list-group-item.active {
        border-color: #ffffff;
    }
    
    @media (max-width: 930px ) {
        .name-title{
            display:none;
        }
    }

</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 no-padding">
            <div class="about-banner" style="padding-top:110px;background-image:url('{{ url('resources/assets') }}/images/123_1.jpeg');background-position: center;">
                <h1>
                    <!--Get to know TABCFAST.com and Texas Best Comics.<br>
                    KNOW  <b>WHO WE ARE</b><br>WHAT <b>WE DO</b> -->
                    <a href="{{ url('/') }}">
                        <img src="{{ url('resources/assets') }}/images/logo.png" class="img-responsive" style="display:inline;width:600px;">
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid about-us">
    <div class="row">
        <div class="col-md-1 col-sm-1 col-xs-1">
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12">
            <div class="about-inner">
                <ul class="list-group">
                    <li class="list-group-item text-center list-about about1" onclick="show1();" ><h4>@if(app()->getLocale()!='es'){{ucfirst(__('about'))}}@endif MATT GOLIGHTLY</h4></li>
                    <li class="list-group-item text-center list-about about2" onclick="show2();" ><h4>{{ucfirst(__('about'))}} KEVIN BOYER</h4></li>
                </ul>

            </div>
        </div>
        <div class="col-md-8 col-sm-12 col-xs-12 mat">
            <!--<img src="{{ url('resources/assets') }}/images/Matt-Golightly.png" class="img-responsive" style="width:300px;height:400px">-->
            <div class="name-title" style="top:160px;">
                MATT GOLIGHTLY
            </div>
        </div>
        <div class="col-md-8 col-sm-12 col-xs-12 kev">
            <!--<img src="{{ url('resources/assets') }}/images/Kevin-Boyer.png" class="img-responsive" style="width:400px;height:400px">-->
            <div class="name-title" style="top:160px;">
                KEVIN BOYER
            </div>
        </div>
    </div>
</div>

<div class="container-fluid about-us-cnt mat">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="about-intro"> 
                    <p>{!!  unescape($page_information['tpl_txt_2']) !!}</p>


                    <div class="row">
                        <div class="col-md-4">  <img src="{{ url('resources/assets') }}/images/ftr-logo.png" class="img-responsive" style="float:right; margin-top:30px; margin-bottom:30px;"></div>
                        <div class="col-md-4"> <img src="{{ url('resources/assets') }}/images/bestcomic.png" class="img-responsive" style="float:right; margin-top:30px; margin-bottom:30px;"></div>
                        <div class="col-md-4"><img src="{{ url('resources/assets') }}/images/sign.png" class="img-responsive" style="float:right; margin-top:30px; margin-bottom:30px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid about-us-cnt kev">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="about-intro">
                    <p class="column-padding">{!!  unescape($page_information['tpl_txt_3']) !!}</p>
                    <div class="row">
                        <div class="col-md-4">  <img src="{{ url('resources/assets') }}/images/ftr-logo.png" class="img-responsive" style="float:right; margin-top:30px; margin-bottom:30px;"></div>
                        <div class="col-md-4"> <img src="{{ url('resources/assets') }}/images/bestcomic.png" class="img-responsive" style="float:right; margin-top:30px; margin-bottom:30px;"></div>
                        <div class="col-md-4"><img src="{{ url('resources/assets') }}/images/Signature.png" class="img-responsive" style="float:right; margin-top:30px; margin-bottom:30px;"></div>
                    </div>



                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="about-lower">

        </div>
    </div>
</div>

@endsection


@section('foot')
<!-- JavaScript Area -->
<script type="text/javascript" src="{{ url('resources/assets') }}/js/bootstrap.min.js"></script>
<script>
                        $(document).ready(function () {
                            $('.kev').hide();
                            $('.about1').addClass('active');
                            $('.about2').removeClass('active');
                            $('.mat').show();
                        });

                        function show1() {
                            $('.kev').hide();
                            $('.about1').addClass('active');
                            $('.about2').removeClass('active');
                            $('.mat').show();
                        }
                        function show2() {
                            $('.mat').hide();
                            $('.about2').addClass('active');
                            $('.about1').removeClass('active');
                            $('.kev').show();
                        }
</script>
@endsection