@extends('layouts.master')
@section('page_title', 'Mosaic Setup')
@section('content')

    <div class="container campaign edit-campaign mosaic-setup-container">
        {{ Form::page_header("Mosaic Setup", "paper_stack") }}

        <div class="row">
            <div class="col-md-5">
                <div class="row above-grid-label text-center">{{ Form::label_title("Mosaic Metros", \App\Helpers\FormComponentHelper::SIZE_SUPER_DUPER) }}</div>

                @include('shared.grids._grid_wrapper', ['columns' => $metro_columns, 'data' => $metro_data,
                    'grid_header_button' => 'ADD / EDIT METROS', 'grid_header_button_action' => action('MosaicController@business_metro_edit', compact('business'))])

            </div>
            <div class="col-md-2 clearfix"></div>

            <div class="col-md-5">
                <div class="row above-grid-label text-center">{{ Form::label_title("Mosaic Categories", \App\Helpers\FormComponentHelper::SIZE_SUPER_DUPER) }}</div>

                @include('shared.grids._grid_wrapper', ['columns' => $cat_columns, 'data' => $cat_data,
                    'grid_header_button' => 'ADD / EDIT CATEGORIES', 'grid_header_button_action' => action('MosaicController@business_mosaic_category_edit', compact('business'))])
            </div>
        </div>
    </div>
@endsection
@section('page_script')
    <script>
        $(document).ready(function(){
            $(".remove-row").click(function(e){
                e.preventDefault();
                if($(this).attr("class") !== "remove-row ") {
                    presentModalAlert('Alert', 'Unable to delete metro. Category related to the metro is currently selected by the business.');
                }
                else {
                    var request = $.ajax({
                        url: (this.href),
                        method: "DELETE"
                    });
                    $(this).parent().parent().remove();
                }
            });

            $(".remove-row-category").click(function(e){
                e.preventDefault();
                var request = $.ajax({
                    url: (this.href),
                    method: "DELETE"
                });
                $(this).parent().parent().remove();
            });
        });
    </script>
@endsection

@section('page_style')
    <style>
        .glyphicon {
            font-size: 20px;
        }
        img.primary {
            margin-left: 15px;
        }
    </style>
@endsection