{% extends "theme::layouts/default" %}
{% block content %}
    <section id="main" class="clearfix ad-post-page">
        <div class="container">
            <div class="breadcrumb-section">
                <!-- breadcrumb -->
                <ol class="breadcrumb">
                    <li><a href="/">{{ trans('visiosoft.module.advs::field.home') }}</a></li>
                    <li>{{ trans('visiosoft.module.advs::field.ad_post') }}</li>
                </ol><!-- breadcrumb -->
                <h2 class="title">{{ trans('visiosoft.module.advs::field.post_free_ad') }}</h2>
            </div><!-- banner -->

            <div id="ad-cat-section">
                <form action="{{ url_route('visiosoft.module.advs::post_cat') }}" method="post">
                <div class="row category-tab">
                    <div class="col-md-3 col-sm-6 cat-item">
                        <div class="section cat-option select-category post-option">
                            <h4>{{ trans('visiosoft.module.advs::field.select_a_category') }}</h4>
                            <ul role="tablist">
                                <select class="cat-select" name="cat1" id="cat1" multiple id="">
                                    {% for cat in main_cats %}
                                        <option value="{{ cat.id }}"><span style="font-size: 20px">{{ cat.name }}</span></option>
                                    {% endfor %}
                                </select>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 cat-item cat-item-2">
                        <div class="section cat-option select-category post-option">
                            <h4>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h4>
                            <ul role="tablist">
                                <select class="cat-select" name="cat2" id="cat2" multiple id="">

                                </select>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 cat-item cat-item-2">
                        <div class="section cat-option select-category post-option">
                            <h4>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h4>
                            <ul role="tablist">
                                <select class="cat-select" name="cat3" id="cat3" multiple id="">

                                </select>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 cat-item cat-item-2">
                        <div class="section cat-option select-category post-option">
                            <h4>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h4>
                            <ul role="tablist">
                                <select class="cat-select" name="cat4" id="cat4" multiple id="">

                                </select>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 cat-item cat-item-2">
                        <div class="section cat-option select-category post-option">
                            <h4>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h4>
                            <ul role="tablist">
                                <select class="cat-select" name="cat5" id="cat5" multiple id="">

                                </select>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 cat-item cat-item-2">
                        <div class="section cat-option select-category post-option">
                            <h4>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h4>
                            <ul role="tablist">
                                <select class="cat-select" name="cat6" id="cat6" multiple id="">

                                </select>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 cat-item cat-item-2">
                        <div class="section cat-option select-category post-option">
                            <h4>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h4>
                            <ul role="tablist">
                                <select class="cat-select" name="cat7" id="cat7" multiple id="">

                                </select>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6 cat-item cat-item-3">

                    </div><!-- next-stap -->
                </div>
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2 text-center">
                        <div class="ad-section">
                            <a href="#"><img src="{{ img('theme::images/ads/3.jpg').url }}" alt="Image" class="img-responsive"></a>
                        </div>
                    </div>
                </div><!-- row -->
                </form>
            </div>
        </div><!-- container -->
    </section><!-- post-page -->
    <style>
        .cat-select {
            width: 100%;
            border: none;
            overflow-y: auto
        }
        .cat-select option {
            border-top: 1px solid #f2f2f2;
            padding: 15px 0 20px;
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            color: #505050;
        }
        .cat-item-2 {
            display: none;
        }
        .cat-item-3 {
            display: none;
        }
        #main {
            background-image: {{ img('theme::images/bg/main.png').url }} !important;
        }
        .btn-1 {
            background-color: #00a651;
            padding: 5px 50px 7px;
            color: #fff;
            border: 1px solid #dadada;
            margin-right: 5px;
        }
    </style>
    {{ asset_add("scripts.js", "visiosoft.module.advs::js/cats.js") }}


{% endblock %}