@extends('layouts.main')

@section('styles')
button{
    background: transparent;
    border: transparent;
}

div.dates{
    display: inline-flex;
}


#addDate,#subDate
{
    height: 100px;
}

h4{
    margin: auto;
}

@endsection

@section('content')
    <div class="row" style="margin-top: 20px;">
        <div class="container">
            <div class="col-md-2 col-sm-8">
                {{ $futsal->name}}
            </div>
            <div class="col-md-6 col-sm-offset-3 col-md-offset-3">
                <div class="row dates">
                    <button id="subDate">   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
                    <h4 id="date"></h4>
                    <button id="addDate">   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
                <div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#addDate').click(function(){
                console.log('Add Date');
            });
            $('#subDate').click(function(){
                console.log('Sub Date');
            });
            console.log('adjh');
        });
    </script>

@endsection