@extends('layouts.popup_window_parent')
@section('content')
    <main role="main">
        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
            <div class="Polaris-Page create ">
                <div class="Polaris-Page__MainContent">
                    <div class="Polaris-Page__Content">
                        <div class="Polaris-Layout">
                            <div class="Polaris-Layout__Section">
                                <div class="Polaris-Card">
                                    <div class="inner-content-fullWidth">
                                        <div class="Polaris-Card card-bg-color">
                                            <div class="Polaris-Card__Header header_design">
                                                <div class="header_img">
                                                    <img src="{{ asset('icons/twilio.png') }}">
                                                </div>
                                                <h4 class="">Allow Connectify to access your Twilio Account</h4>
                                                <div class="error-messages alert alert-danger" role="alert"
                                                     style="display:none;">
                                                </div>

                                            </div>
                                            <div class="channel-presentation-div">
                                                <form id="connect-twilio-form" method="post" onsubmit="return false"
                                                      action="{{ route('store_twilio_account') }}" >
                                                    <input id="account_id" type="hidden" name="account_id" value="{{ $account->id ?? 0 }}">
                                                    <div class="fields-wrapper">
                                                        <div class="Polaris-Labelled__LabelWrapper">
                                                            <div class="Polaris-Label">
                                                                <label id="PolarisTextField2Label"
                                                                       for="PolarisTextField2"
                                                                       class="Polaris-Label__Text">Account SID
                                                                    <span style="font-size: 12px;color: red;">(required)</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="Polaris-Connected">
                                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                                <div class="Polaris-TextField">
                                                                    <input id="sid"
                                                                           class="Polaris-TextField__Input"
                                                                           type="text"
                                                                           value="{{ old('sid')?old('sid'):$account->login_credentials['sid']??'' }}"
                                                                           data-rule-required="true"
                                                                           name="sid">
                                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="Polaris-Labelled__HelpText"
                                                             id="PolarisTextField2HelpText"><span>
                                                                      Please enter ACCOUNT SID..
                                                                </span>
                                                        </div>
                                                    </div>
                                                    <div class="fields-wrapper">
                                                        <div class="Polaris-Labelled__LabelWrapper">
                                                            <div class="Polaris-Label">
                                                                <label id="PolarisTextField2Label"
                                                                       for="PolarisTextField2"
                                                                       class="Polaris-Label__Text">Auth Token
                                                                    <span style="font-size: 12px;color: red;">(required)</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="Polaris-Connected">
                                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                                <div class="Polaris-TextField">
                                                                    <input id="token"
                                                                           class="Polaris-TextField__Input"
                                                                           type="text"
                                                                           value="{{ old('token')?old('token'):$account->login_credentials['token']??'' }}"
                                                                           data-rule-required="true"
                                                                           name="token">
                                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="Polaris-Labelled__HelpText"
                                                             id="PolarisTextField2HelpText"><span>
                                                                    Please enter AUTH TOKEN.
                                                                </span>
                                                        </div>
                                                    </div>
                                                    <div class="fields-wrapper">
                                                        <div class="Polaris-Labelled__LabelWrapper">
                                                            <div class="Polaris-Label">
                                                                <label id="PolarisTextField2Label"
                                                                       for="PolarisTextField2"
                                                                       class="Polaris-Label__Text">Phone No
                                                                    <span style="font-size: 12px;color: red;">(required)</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="Polaris-Connected">
                                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                                <div class="Polaris-TextField">
                                                                    <input id="twilio_phone_no"
                                                                           class="Polaris-TextField__Input"
                                                                           type="text"
                                                                           value="{{ old('twilio_phone_no')?old('twilio_phone_no'):$account->login_credentials['twilio_phone_no']??'' }}"
                                                                           data-rule-required="true"
                                                                           name="twilio_phone_no">
                                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="Polaris-Labelled__HelpText"
                                                             id="PolarisTextField2HelpText"><span>
                                                                Please enter registered twilio phone number.
                                                                </span>
                                                        </div>
                                                    </div>

                                                    <div class="save-btn" style="margin: 19px 0;">
                                                        <button id="form-sybmit-btn" type="submit" class="Polaris-Button login-window-add-btn">
                                                            <span class="Polaris-Button__Content">
                                                                <span class="Polaris-Button__Text">{{ $account?"Update":"Add" }}</span></span>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
@endsection

@section('last_scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            oric_Validation_application("connect-twilio-form",undefined,undefined,true);
            function register_twilio_account() {
                show_loading_img();
                $('#form-sybmit-btn').attr('disabled',true);
                $.ajax({
                    url: "{{ route('store_twilio_account')}}",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': "