@extends('layouts.main')
@section('content')
    <div class="body-content">
        <div class="body-content">
            <div class=''>
                <div class='row'>
                    <div class="col-xs-12 col-sm-12 col-md-12 m-t-30">
                    <div class="breadcrumb">
                        <div class="container">
                            <div class="breadcrumb-inner">
                                <ul class="list-inline list-unstyled">
                                    <li><a href="{{url('/')}}">Home</a></li>
                                    <li class='active'>Cinemas</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container" style="margin-bottom: 100px">

                <div class="row">
                                @foreach($cinemas as $index => $category)
                                <div class="col-sm-3 col-xs-6" style="margin-bottom: 25px">
                                    <div class="cinemas_container">
                                    <div class="details">
                                        <h4>{{(strtolower($category->name))}}</h4>
                                        <h5>Location: {{(strtolower($category->location))}}</h5>
                                        <h5>State: {{(strtolower($category->state))}}</h5>
                                    </div>
                                        <a href="{{url('cinemas').'/'.str_slug($category->name, '_')}}-{{$index}}" class="btn btn-sm custom_button_color">View Movies</a>
                                    </div>
                                </div>
                                    @endforeach

                        </div>
            </div>
            </div>
        </div>
    </div>
@endsection
@push('style')
<link rel="stylesheet" type="text/css" href="{{asset('sigma/css/alertui.min.css')}}">
            <style>
                body{
                    background: url("{{asset('sigma/images/bg/cinema_bg.jpg')}}") !important;
                    background-color: #000 !important;
                }
                .yamm.megamenu-horizontal{
                    background: #333;
                }
                .sidebar .side-menu nav .nav > li > a{
                    color: #fff;
                }
                .cinemas_container .details h4{
                text-align: left;
                    font-size: 16px;
                    color: #fff;
                    font-weight: 700;
                    text-transform: capitalize;
                }

                .cinemas_container .details h5{
                text-align: left;
                    font-size: 13px;
                    color: #fff;
                    font-weight: 500;
                    text-transform: capitalize;
                }

                .cinemas_container .details{
                    height: 90px;
                    min-height: 90px;
                    max-height: 90px;
                }
                .cinemas_container{
                    background: rgba(000,000,000,0.6);
                    padding: 13px;
                    height: 170px;
                    min-height: 170px;
                    max-height: 170px;
                }
                .cinemas_container a{
                float: right;
                }

            </style>
@endpush