@php
    $countries = App\Models\Country::select('id','iso_alpha2','phonecode')->where('is_supported',1)->where('phonecode','!=',null)->where('id','!=',147)->get();
    $nepal = App\Models\Country::select('id','iso_alpha2','phonecode')->find(147);
@endphp
<div class="row registerRow1 no-pad">
    <div class="col-sm-2 p-0 ">
        <div class="form-group signUp-form-group">
            <select name="country_id" id="country_dd" class="form-control" required>
                <option value="{{$nepal->id}}" selected>{{$nepal->iso_alpha2}} ({{$nepal->phonecode}})</option>
                @foreach ($countries as $country)
                    <option value="{{$country->id}}" >{{$country->iso_alpha2}} ({{$country->phonecode}})</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-sm-8 p-0">
        <div class="form-group signUp-form-group">
            <input type="number" name="phone" placeholder="Phone..." class="form-control" id="phone" value="{{ old('phone') }}" min="0" required>
        </div>
    </div>
    <div class="col-sm-2 p-0 btnCol">
        <div class="form-group signUp-form-group">
            <button type="submit" class="btn btn-default pull-right ink-reaction sendOtpBtn" id="submit">
                <i class="fa fa-arrow-right"></i>
            </button>
        </div>
    </div>

</div>

<section id="loading">
    <div id="loading-content"></div>
</section>
<style>
    .registerRow1{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .loading {
            z-index: 20;
            position: absolute;
            top: 0;
            left:-5px;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .loading-content {
            position: absolute;
            border: 16px solid #f3f3f3;
            border-top: 16px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            top: 40%;
            left:50%;
            animation: spin 2s linear infinite;
            }
              
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
</style>