@extends('components.arrival-alerts')

@section('header')

@endsection

@section('brand_name')
    {!! $brandName !!}
@endsection


@section('content')

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

    <div class="container" style="max-width:500px;margin-top:24px;margin-bottom:50px;">
        <div class="row">
            <div class="col-12 text-center pt-3">

                @if(count($success)>=1)
                    <div class="alert alert-success alert-wrapper">
                        @foreach($success as $suc)
                            {!! $suc !!}
                        @endforeach
                    </div>
                @endif

                @if(count($errors)>=1)
                    <div class="alert alert-danger alert-wrapper">
                        @foreach($errors as $error)
                            {!! $error !!}
                        @endforeach
                    </div>
                @endif


                <!--<a href="https://orderupapps.com/apps/joeyzaspizzaandsteaks_39381076">Browser Version</a>-->
                <input type="hidden" value="{{$directory}}" id="directory">
                <input type="hidden" value="{{$locationId}}" id="locationId">

                <!-- Logo -->
                <div class="col-12 mb-4">
                    <img alt="{{ $brandName }} - OrderUp Apps" src="{{ $logo }}" style="width:100%;max-width: 250px;">
                </div>

                <!-- Description -->
                <div class="col-12 mb-4 font-weight-bold text-muted">
                    {!! $subheading !!}
                </div>

                @if(empty($addresses))

                <div class="row p-2">
                    <div class="col-12 text-center alert alert-danger">
                        Arrival Alerts are not enabled<br>Please enable Arrival Alerts for at least one address
                    </div>
                </div>

                @else
                    <!-- Ask for phone number -->
                <div class="col-12 mb-4 alert alert-info">
                    <div class="mb-2 font-italic">Enter your phone number below</div>
                    <input
                        type="text"
                        placeholder="555-555-5555"
                        style="max-width:200px;margin:0 auto;text-align:center;"
                        maxlength="14"
                        @if(!empty($phoneNumber))
                            value="{{ $phoneNumber }}"
                        @endif
                        class="form-control phone-input">
                </div>

                <!-- Arrival locations -->
                <div class="col-12 mb-4">
                    @foreach($addresses as $address)
                        <div class="row text-left arrival-location-row py-2">
                            <div class="col-10" style="text-align: left;">{{ $address['name'] }}</div>
                            <div class="col-2">
                                <label class="switch mb-0">
                                    <input
                                        type="checkbox"
                                        class="arrival-location-checkbox"
                                        @if(in_array($address['id'],$selectedAddresses))
                                            checked="checked"
                                        @endif
                                        value="{{ $address['id'] }}">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Submit Button -->
                <div class="row mb-5">
                    <div class="col-12">
                        <button type="button" id="submitLocations" onclick="submitEnabledArrivalLocations()" class="btn btn-primary w-100 py-3" disabled>Submit</button>
                    </div>
                </div>

                @endif

            </div>
        </div>

        <!-- Loading Pane -->
        <div id="loadingBg" style="display:none;"></div>
        <div id="loadingIcon" style="display:none;max-width:500px;"><i class="fad fa-spinner fa-spin"></i></div>

        <div id="error" style="display:none;position:fixed;bottom:0;width:93%;max-width:468px;margin:0 auto;">
            <div class="text-center">
                <div class="alert alert-danger mx-3">
                    There was an unknown error, please try again
                </div>
            </div>
        </div>

        <div id="verify" style="display:none;position:fixed;bottom:0;width:93%;max-width:468px;margin:0 auto;">
            <div class="text-center">
                <div class="alert alert-success mx-3">
                    We just sent you a text. Click the link in the text message so we can verify your phone number<br><br>
                    Didn't get a text? <a href="#" id="tryAgain" onclick="submitEnabledArrivalLocations()">Try Again</a>
                </div>
            </div>
        </div>

    </div>
@endsection