@extends('layouts.app')

@section('content')
    <section class="content-header">
        <h1>
            {{ $mainContent->title }}
        </h1>
        <h1 class="pull-right">
            <a class="btn btn-primary pull-right" style="margin-top: -30px;margin-bottom: 5px" href="{!! route('create-content-box', ['id' => $mainContent->id]) !!}">Add New</a>
        </h1>
        <div class="pull-right" style="margin-top: -30px; margin-right: 20px;">
            <label for="sortToggle">Sort Boxes </label>
            <input type="checkbox" id="sortToggle" data-toggle="toggle">
        </div>
    </section>
    <div class="col-xs-offset-10 col-xs-2 pull-right">

    </div>
    <div class="clearfix"></div>
    <div class="content">
        <div class="box box-primary">
            <div class="box-body">
                <div class="row" style="padding-left: 20px; padding-right: 20px;">
                    <div class="clearfix"></div>
                    <div class="col-xs-12">
                        @include('flash::message')
                    </div>
                    <div class="clearfix"></div>
                    <table class="table table-responsive table-striped sorted_table" id="mainContents-table">
                        <thead>
                        <th>Title</th>
                        <th>Description</th>
                        <th class="text-center" colspan="3">Action</th>
                        </thead>
                        <tbody class="serialize">
                        @foreach($mainContent->boxes()->get() as $box)
                            <tr data-id="{{ $box->id }}" data-name="{{ $box->title }}">
                                <td class="col-xs-3">
                                    <a href="{!! route('contentBoxes.show', [$box->id]) !!}" >{!! $box->title !!}</a>
                                </td>
                                <td class="col-xs-7">{!! $box->description !!}</td>
                                <td class="col-xs-2 text-center">
                                    <div class="btn-group dropdown keep-open">
                                        <button type="button" class="btn btn-default dropdown-toggle action-buttons-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>

                                        <ul class="dropdown-menu action-buttons-list">
                                            {{--<li>--}}
                                                {{--<div class="show-button">--}}
                                                    {{--<a href="{!! route('contentBoxes.show', [$box->id]) !!}" class='btn btn-default btn-xs'></a>--}}
                                                {{--</div>--}}
                                            {{--</li>--}}
                                            <li>
                                                <div class="edit-button">
                                                    <a href="{!! route('contentBoxes.edit', [$box->id]) !!}" class='btn btn-default btn-xs'></a>
                                                </div>
                                            </li>
                                            <li>
                                                {!! Form::open(['route' => ['contentBoxes.destroy', $box->id], 'method' => 'delete']) !!}
                                                <div class="delete-button">
                                                    {!! Form::button('', ['type' => 'submit', 'class' => 'btn btn-default btn-xs', 'onclick' => "return confirm('Are you sure?')"]) !!}
                                                </div>
                                                {!! Form::close() !!}
                                            </li>

                                        </ul>
                                    </div>

                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
@endsection