@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')
    <div class="scrollable-content"
         x-data="{ vehicleDescriptionPop: false }"
         x-init="resizeForScrollableContent(true),resizeForScrollableContentOnChange(true)">

        <meta name="csrf-token" content="{{ csrf_token() }}">

        <div class="rewards-wrapper" x-show="vehicleDescriptionPop" style="left:0;width:100%;display:none;">
            <div class="rewards-background" x-on:click="vehicleDescriptionPop = !vehicleDescriptionPop" style="left:0;"></div>
            <div class="row m-0 p-3" style="position: fixed;top:90px;width:100%;">
                <div class="col-12">
                    <div class="card with-shadow" style="">
                        <div class="card-header" x-on:click="vehicleDescriptionPop = !vehicleDescriptionPop">
                            Vehicle Description
                            <i class="fas fa-times" style="position:absolute;right:18px;top: 14px;"></i>
                        </div>
                        <div class="card-body" style="max-height:400px;overflow-y:scroll;">
                            <livewire:VehicleDescriptionForm />
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="row m-0">
            <div class="col-12 text-center font-weight-bold mt-4 mb-2 view-heading">
                {!! $icon !!}{{ $heading }}
            </div>
            <div class="col-12 text-center font-weight-bold mt-2 mb-0 view-subheading">
                {{ $subheading }}
            </div>
        </div>




        @if($hasPendingOrder)


        <!-- Check for Curbside service -->
        @if($isCurbsideEnabled && !$includesCateringRequest)
            <div class="row m-0 my-3">
                <div class="col-12 text-center mb-2">
                    Have you arrived?
                </div>
                <div class="col-12 text-center">

                    @if($requireVehicleDescription)
                        <livewire:Button
                            type="button"
                            class="view-button btn-primary"
                            text="Request Curbside service"
                            icon="<i class='fas fa-person-carry mr-2'></i>"
                            xon="vehicleDescriptionPop=!vehicleDescriptionPop;"
                        />
                    @else
                        <livewire:Button
                            type="button"
                            class="view-button btn-primary"
                            text="Request Curbside service"
                            icon="<i class='fas fa-person-carry mr-2'></i>"
                            xon="requestCurbsideService({{ $locationId }},{{ $customerId }},'{{ $curbsidePhoneNumber }}')"
                        />
                    @endif

                </div>
            </div>
        @endif


        <hr class="hr-short w-50 my-4">

        <div class="row m-0 mt-3 w-75" style="margin: 0 auto !important;">
            <div class="col-12 text-center">
                <i class="fas fa-info-circle" style="margin-right:8px;"></i> Items in this order
            </div>

            @foreach($lineItems as $lineItem)
                <div class="row m-0 my-1">
                    <div class="col-12">
                        {!! $lineItem['quantity'] !!} x {!! $lineItem['name'] !!}
                        @if(array_key_exists('modifiers',$lineItem))
                            @foreach($lineItem['modifiers'] as $modifier)
                                <div class="row m-0">
                                    <div class="col-12 pl-5" style="padding-left:24px;font-size:13px;">
                                        {!! $modifier['name'] !!}
                                        @if((int)$modifier['quantity']!==1)
                                            x {!! $modifier['quantity'] !!}
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            @endforeach

            <div class="row m-0 mt-3">
                <div class="col-12" style="text-align: center;">
                    <h5>Order Total: {!! $currencySymbol !!}{!! $orderTotal !!}</h5>
                </div>
            </div>
        </div>

        <hr class="hr-short w-50 my-4">

            @if(!$includesCateringRequest)
                <div class="row m-0 px-3">
                    <div class="col-12 text-center alert alert-info">
                        <h5>Expected to be {!! $fulfillmentType !!} {!! $fulfillmentTime !!}</h5>
                    </div>
                </div>
            @endif

            @if($trackingUrl)
                <div class="row p-2">
                    <div class="col-12 text-center mb-3">
                        <h5>- Track your order -</h5>
                    </div>
                    <div class="col-12">
                        <iframe src="{!! $trackingUrl !!}" style="width:100%;min-height:600px;"></iframe>
                    </div>
                </div>
            @endif

        @endif

</div>
@endsection

<script>
    function requestCurbsideService(locationId,customerId,curbsidePhoneNumber){
        $('.pageLoader-wrapper').show()
        console.log('yo');


        $.ajax({
            url: '{{url("ajax/requestCurbsideService")}}',
            type: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: {
                customerId : customerId,
                locationId : locationId,
                curbsidePhoneNumber : curbsidePhoneNumber
            },
            error: function(data) {
                console.log(data);
                //$(this).children('svg').hide();
                //$(this).prop('disabled',false);
                $('.pageLoader-wrapper').hide();
            },
            success: function(results) {
                console.log(results);
                $('.pageLoader-wrapper').hide();
                if(results.status){
                    $(".rewards-wrapper").attr("x-show","false");
                    swal({
                        text: results.message,
                        icon: 'success',
                        buttons: "Okay",
                    }).then(function(isConfirm) {

                    })
                }
            },
        });
        //setTimeout(function(){

        //}, 2000);

    }
</script>