@extends('components.view')


@section('themeStylesheet')
    <style>
        {{ $themeStylesheet }}
    </style>
@endsection


@section('brandThemeOverrideSettings')
    <style>
        {{ $brandThemeOverrideSettings }}
    </style>
@endsection


@section('brandBackground')
    @if($brandBackground!=='' && !empty($brandBackground))
        style="background-image:url('{{ $brandBackground }}');"
    @endif
@endsection



@section('header')
    @php echo \App\Http\Controllers\Header::index($themeDirectory,$brandLogoSmall) @endphp
    @php echo \App\Http\Controllers\Navigation::index($themeDirectory) @endphp
@endsection


@section('content')

    <style>
        .timeslotBut {
            width: 100%;
            transition: all ease-in-out 280ms;
        }
        .timeslotBut.half {
            width:50%;
        }
        .timeslotNextBut {
            display:block;
            padding-left:4px;
            position:absolute;
            right:-55%;
            top:0;
            width:50%;
            transition: all ease-in-out 280ms;
        }
        .timeslotNextBut.show {
            right:0;
        }
        .select-timeslot-wrapper {
            /*margin-top: 0px;*/
            opacity: 0;
            transition: all ease-in-out 480ms;
        }
        .select-timeslot-wrapper.show {
            opacity: 1;
            /*margin-top: 0;*/
        }
        .select-timeslot-loader {
            text-align: center;
            width:100%;
            margin:24px 0;
            font-size:45px;
        }
    </style>

    <div class="scrollable-content" style="position:relative;"
         x-data=""
         x-init="resizeForScrollableContent(true),resizeForScrollableContentOnChange(true)">
        <div class="row m-0" id="topOfSelectDate">

            <div class="col-12 text-center font-weight-bold mt-4 mb-2 view-heading">
                {{ $heading }}
            </div>
            @if($subheading)
                <div class="col-12 text-center font-weight-bold mt-2 mb-2 view-subheading">
                    {{ $subheading }}
                </div>
            @endif

        </div>

        <livewire:Scheduler.SelectDate />



        <!--<div class="select-timeslot-loader" style="display:none;">
            <i class="fas fa-spinner fa-spin"></i>
        </div>-->


        <!-- Only show if Date is selected -->
        <div id="selectTimeSlot_wrapper" class="select-timeslot-wrapper" style="padding-bottom: 500px;overflow: hidden;">

            <div class="row m-0">

                <div class="col-12 text-center font-weight-bold mt-4 mb-2 view-heading">
                    <span style="color: green;">
                        <i class="fad fa-check-circle"></i>
                        <span id="selectedScheduledDay">
                            {{ $selectedScheduledDay }}
                        </span>
                    </span>
                    {{ $heading_2 }}
                </div>
                @if($subheading_2)
                    <div class="col-12 text-center font-weight-bold mt-2 mb-2 view-subheading">
                        {{ $subheading_2 }}
                    </div>
                @endif

            </div>

            <livewire:Scheduler.SelectTime />
        </div>


    </div>

    <script type="text/javascript" src="{{ asset('js/touchSwipe.js') }}"></script>

    <script>
        $(function() {
            $('#datepicker').swipe({
                swipeRight: function () {
                    console.log('prev');
                    $('#datepicker').find("[data-handler='prev']").click();
                },
                swipeLeft: function () {
                    console.log('next');
                    $('#datepicker').find(".ui-datepicker-next").click();
                }
            })
        });
    </script>
@endsection