@extends('layouts.master')
@section('page_title', 'New Mosaic Category')
@section('content')
    {!! Form::open(['url' => action('SuperAdminSourceDataController@post_mosaic_category_create'), 'files' => true]) !!}
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                {!! Html::image('img/icon_business.png') !!}
                <h4 class="outside-container-header">Add Mosaic Category</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1 grey-bg curve_container mosaic-container">
                <div>
                    {{ Form::row_text_inline('category', 'Category Name', null, 2, 6, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                </div>
                <div>
                    {{ Form::label_ex('Jpg / Png Image', \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                    {!! Form::file('jpg_image', ['class' => 'category-img-upload']) !!}
                </div>
                <div>
                    {{ Form::label_ex('Gif Image', \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                    {!! Form::file('gif_image', ['class' => 'category-img-upload']) !!}
                </div>
                <div>
                    {{ Form::checkbox_styled('b2b_cat', null, 'B2B', 'b2b-checkbox') }}
                </div>
                <div>
                    {{ Form::label_ex('Metro Areas', \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                    <div id="metro-group">
                        {!! Form::checkbox('select_all', 1, null, ['id' => 'select-all-metros']) !!}
                        <label class="in-container-label small">SELECT / DESELECT ALL</label>
                        @foreach($metros as $metro)
                            <div>
                                {!! Form::checkbox('metros[]', $metro->mosaic_metro, null, ['class' => 'metro-checkbox']) !!}
                                <label class="in-container-label small">{{ $metro->metro_name }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="mosaic-btn-row">
                    {{ Form::button_save() }}
                    {{ Form::button_cancel() }}
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
@endsection
@section('page_script')
    <script>
        $(document).ready(function () {
            $('#select-all-metros').on('change', function () {
                if ($(this).is(':checked')) $('.metro-checkbox').prop('checked', true);
                else $('.metro-checkbox').prop('checked', false);
            });
        });
    </script>
@endsection
@section('page_style')
    <style>
        img {
            height: 100px;
        }

        label.bt-label.first-label.bt-label-medium {
            padding-left: 15px;
        }
    </style>
@endsection