@extends('layouts.app')
@section('scripts')
    @parent
    <script type="text/javascript" src="{{asset('public/js/moment.min.js')}}"></script>

    <!-- Include Date Range Picker -->
    <script type="text/javascript" src="{{asset('public/js/daterangepicker.js')}}"></script>
    <link rel="stylesheet" type="text/css" href="{{asset('combodate.css')}}"/>
    <script type="text/javascript">
        $(function () {
            $('#dem').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    timePicker: true,
                    locale: {
                        format: 'MM/DD/YYYY h:mm A'
                    }
                },
                function (start, end, label) {
                    var years = moment().diff(start, 'years');
                });
            $('#artist_select').change(function () {
                var id = $(this).val();
                if(id == ""){
                    id = 0;
                }
                var saloon = $('#artist_select [value=' + id + ']').attr('data-saloon');

                if (saloon) {
                    $('#saloon_hide').text(saloon);
                    $('#saloon_select').hide();
                } else {
                    $('#saloon_hide').text('');
                    $('#saloon_select').show();
                }
            });

            $('#saloon_select').change(function () {
                if (id > 0) {
                    var arts = $('#saloon_select [value=' + id + ']').attr('data-artists');
                    var arr = arts.split(',');
                    //alert(arr[0]);
                    var html = "<select name='artist_name' class='form-control'>";
                    arr.forEach(function (e) {
                        html += "<option value='" + e + "'>" + e + "</option>";
                    });
                    html += "</select>";
                    $('#artist_hide').html(html).show();
                    $('#artist_select').hide();
                } else {
                    $('#artist_select').show();
                    $('#artist_hide').hide();
                }
            });
        });
    </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">
                        <ul role="tablist" class="nav nav-tabs">
                            <li role="presentation" class="active">
                                <a href="#">Tattoo calculator</a>
                            </li>
                        </ul>
                        <form class="tab-content index" action="{{asset('calculate/order')}}" method="post">
                            @if(!Auth::guest())
                                <div class="col-md-12">
                                    <div class="mam_name">
                                                                            </div>

                                </div>
                                <div class="col-md-12">
                                    <div class="int">Width: <b>{{$width}}</b> cm <br/>
                                        Height: <b>{{$height}}</b> cm <br/>
                                        Size: <b>{{$size_tattoo}}</b> cm<sup>2</sup> <br/>
                                        Tattoo
                                        <a href="{{asset('tattooprint')}}" target="_blank" class="btn btn-primary">Print
                                        </a>
                                        <a href="{{asset('/')}}" class="btn btn-primary">Change</a>

                                        <a href="{{asset('/cookieclear')}}" class="btn btn-primary">Clear</a>
                                        <br/>

                                        <p align="center">
                                        </p>
                                    </div>
                                </div>
                        @endif
                            <div class="col-md-12">
                                @if (Auth::guest())
                                    <div class="col-md-6">
                                        <a href="{{ route('login') }}" class="btn btn-danger btn-block">Login with
                                            E-mail</a>
                                    </div>
                                    <div class="col-md-6">
                                        <a href="{{ asset('auth/google') }}" class="btn btn-primary btn-block">Login
                                            with Google</a>
                                    </div>
                                @else

                                    {!! csrf_field() !!}
                                    <input type="hidden"
                                           value="{{(isset($_COOKIE['height']))?$_COOKIE['height']:'3'}} "
                                           name="width"/>
                                    <input type="hidden"
                                           value="{{(isset($_COOKIE['height']))?$_COOKIE['height']:'3'}} "
                                           name="height"/>
                                    <input type="hidden"
                                           value="{{(isset($_COOKIE['catalogs_id']))?$_COOKIE['catalogs_id']:0}}"
                                           name="catalogs_id"/>
                                    <div class="mam_name">
                                        -                                        &euro;
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Artist</label>
                                            <div id="artist_hide"></div>
                                            <select class="form-control" name="artist_id" id="artist_select" required>
                                                <option value="">Select artist</option>
                                                @foreach($artists as $one)
                                                                                                        <option data-saloon="{{$one->saloon->name}}"
                                                            {{(isset($selected))?$selected:''}}
                                                            value="{{$one->id}}">{{$one->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Salon</label>
                                            <div id="saloon_hide"></div>
                                            <select class="form-control" name="saloon_id" id="saloon_select" required>
                                                <option value="">Select salon</option>
                                                @foreach($saloons as $one)
                                                                                                        <option data-artists="{{$arts}}"
                                                            {{(isset($selected))?$selected:''}}
                                                            value="{{$one->id}}">{{$one->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Date</label>
                                            <input type="text" name="putdate" class="form-control" value=""
                                                   id="dem"/>
                                            <p class="help-block">toutes les dates</p>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <input type="submit" name="send" value="Order"
                                               class="btn btn-block btn-danger">
                                    </div>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection