@section('css')
    @parent

    <style type="text/css">
        .ButtonsContainer {
            margin-bottom: 30px;
        }

        .Button {
            border-color: #ccc;

            -webkit-transition: 0.25s ease;
            -moz-transition: 0.25s ease;
            -ms-transition: 0.25s ease;
            -o-transition: 0.25s ease;
        }

        .Button:hover {
            border-color: #adadad;

            margin-top: -5px;

            webkit-box-shadow: inset 0 5px 10px 0px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: inset 0 5px 10px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.5);
        }

        .Button--active {
            margin-top: -5px;

            webkit-box-shadow: inset 0 5px 10px 0px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: inset 0 5px 10px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.5);
        }

        .Button--KeyIssues {
            background: lightgoldenrodyellow;
        }

        .Button--Football {
            background: palegreen;
        }

        .Button--AGP {
            background: aliceblue;
        }

        .Button--Cricket {
            background: burlywood;
        }

        .Button--Rugby {
            background: indianred;
        }

        .Button--Other {
            background: darkseagreen;
        }

        .Button--Ancillary {
            background: lightblue;
        }

        .Button_Image {
            width: 40px;

            position: absolute;
            left: 50%;
            margin-left: -20px;

            -webkit-transition: opacity 0.5s ease;
            -moz-transition: opacity 0.5s ease;
            -ms-transition: opacity 0.5s ease;
            -o-transition: opacity 0.5s ease;
            opacity: 1;
        }

        .Button:hover .Button_Image {
            opacity: 0;
        }

        .Button_Name {
            font-size: 18px; 
            color: black;
            line-height: 40px;

            -webkit-transition: opacity 0.5s ease;
            -moz-transition: opacity 0.5s ease;
            -ms-transition: opacity 0.5s ease;
            -o-transition: opacity 0.5s ease;
            opacity: 0;
        }

        .Button:hover .Button_Name {
            opacity: 1;
        }
    </style>
@stop

<div class="row">
    <div class="col-xs-12">
        <div class="row ButtonsContainer">
            <div class="col-sm-2">
                <a href="#" class="Button Button--KeyIssues btn btn-block" data-toggle="modal" data-target="#keyIssuesModal">
                    <img class="Button_Image" src="{{ asset('images/key.png') }}">
                    <span class="Button_Name">Key Issues</span>
                </a>
            </div>
            <div class="col-sm-10">
                <div class="row">
                    @foreach ($sports as $sport)
                        <div class="col-sm-2">
                            <a href="{{ route('sites.pitches.index', [$site->id, $sport->name]) }}" 
                                class="Button Button--{{ $sport->name }} btn btn-block {{ $selectedSport != $sport ?: 'Button--active'}}"
                                {{ $site->hasSport($sport) ?: 'disabled' }}
                            >
                                <img class="Button_Image" src="{{ $sport->imageUrl() }}">
                                <span class="Button_Name">{{ $sport->name }}</span>
                            </a>
                        </div>
                    @endforeach

                    <div class="col-sm-2">
                        <a href="#" class="Button Button--Other btn btn-block"
                            {{ array_key_exists(5, $site->available_sports) ?: 'disabled' }}
                        >
                            <img class="Button_Image" src="{{ asset('images/other.png') }}">
                            <span class="Button_Name">Other</span>
                        </a>
                    </div>

                    <div class="col-sm-2">
                        <a href="{{ route('sites.ancillaries.index', $site->id) }}" 
                            class="Button Button--Ancillary btn btn-block 
                            {{ !request()->isRoute('sites.ancillaries.index') ?: 'Button--active'}}"
                            {{ $site->hasAncillaries() ?: 'disabled' }}
                        >
                            <img class="Button_Image" src="{{ asset('images/building.png') }}">
                            <span class="Button_Name">Ancillary</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div id="keyIssuesModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Key Issues</h4>
            </div>
            <div class="modal-body">
                {!! Form::open([
                    'id' => 'siteOverviewKeyIssuesForm',
                    'method' => 'PATCH',
                    'route' => ['sites.overview', $site->id],
                ]) !!}
                    <fieldset>
                        <div class="form-group">
                            {!! Form::textarea('key_issues', $site->key_issues, [
                                'placeholder' => 'Key Issues',
                                'rows' => '6',
                                'style' => 'resize: vertical;',
                            ]) !!}
                        </div>
                    </fieldset>
                {!! Form::close() !!}
            </div>
            <div class="modal-footer">
                <button type="button" id="updateKeyIssues" class="btn btn-success">Save &amp; Close</button>
                {{-- <button type="button" class="btn btn-default" data-dismiss="modal">Save &amp; Close</button> --}}
            </div>
        </div>

    </div>
</div>

@section('scripts')
	@parent

	<script type="text/javascript">

	    $('.Button').on('click', function(event) {
	        event.preventDefault();
	        /* Act on the event */

	        if ($(this).attr('disabled') != 'disabled') {
	            window.location = $(this).attr('href');
	        } 
	    });

	    $('#updateKeyIssues').on('click', function(event) {
	        event.preventDefault();
	        /* Act on the event */

	        var form = $('#siteOverviewKeyIssuesForm');
	        var url = form.attr('action');

	        $.ajax({
	            url: url,
	            type: 'PATCH',
	            data: form.serialize(),
	            complete: function(jqXHR) {
	                actOnResponse(jqXHR);

	                $('#keyIssuesModal').modal('hide');
	            }
	        });
	        
	    });
	</script>
@stop