@extends('layouts.app')
@section('styles')
    @parent
    <link href="/public/plugins/cropper/font/css/font-awesome.min.css" rel="stylesheet">
    <link href="/public/plugins/cropper/css/cropper.css" rel="stylesheet">
    <style>
        img {
            max-width: 100%;
        }

        .cropper-view-box,
        .cropper-face {
            background-color: black;
            opacity: 1;
        }

        .cropper-container {
            height: auto;
        }

        .toolbar {
            top: -12px;
        }

        .cropper-container {
            background-attachment: scroll;
            background-clip: border-box;
            background-color: #333333;
            background-image: url("../img/cel.jpg");
            background-origin: padding-box;
            background-position-x: 0;
            background-position-y: 0;
            background-repeat: repeat;
            background-size: auto auto;
            color: #0f0f0f;
            font-weight: bold;
            margin-top: 40px;
            padding-bottom: 38px;
        }

        .cropper-container img {
            text-align: left;
        }

        .loader {
            height: auto !important;
        }

        .tab-content {
            height: 900px;
        }

        .tab-content {
            position: relative;
        }

        .header {
            background-color: #262626;
        }

        .editor {
            display: block;
        }

        #price {
            margin-top: 50px;
        }

        .loader {
            font-size: 24px;
        }
    </style>
@endsection
@section('scripts')
    @parent
    <script type="text/javascript" src="{{asset('public/js/moment.min.js')}}"></script>

    <!-- Include Date Range Picker -->
    <script src="{{asset('public/js/combodate.js')}}"></script>

    <script src="{{asset('public/js/main.js')}}"></script>
    <script src="{{asset('public/js/price.js')}}"></script>
    <script>
        $(function () {
            $('[title="View on GitHub"]').hide();
            var control = document.getElementById("file");
            control.addEventListener("change", function(event) {

            }, false);
        })
    </script>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12 bodycon">

                <div class="panel-body main_body">
                    <div class="main_page">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs nav-mama" role="tablist">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                                      data-toggle="tab">Tattoo calculator</a></li>
                            <li role="presentation"><a href="#services" aria-controls="calculate" role="tab"
                                                       data-toggle="tab">Services</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                                       data-toggle="tab">Salons</a></li>
                            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                                       data-toggle="tab">Artists</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="home">
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                    <div class="modal-dialog_my" role="document">
                                        <div class="modal-content">
                                            <div class="modal-body" id="modal_text">
                                                <img src="/img/loader.gif" class="loader">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @include('templates.calculator')
                            </div>
                            <div role="tabpanel" class="tab-pane" id="services">
                                @include('templates.services')
                                <br style="clear: both;">
                                <div class="text">
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane" id="profile">
                                @include('templates.saloons')
                            </div>
                            <div role="tabpanel" class="tab-pane" id="messages">
                                @include('templates.artists')
                            </div>
                        </div>
                    </div>
                </div>
                <br style="clear:both"/>
                <h2 class="hdtext">Nos adresses de salons Tatouage & Piercing à Paris</h2>
                <div class="picblock">
                    @foreach($saloons as $one)
                        <div class="col-md-4">
                            <div class="pica"
                                 style="background: url('{{isset($one->picture)?asset('uploads/'.$one->picture):asset('img/test.jpg')}}')">
                                <a class="pic_name" href="{{asset('saloon/'.$one->id)}}">{{$one->name}}</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

@endsection