@extends('template.coin.layouts.base')

@section('title', __('Get Started'))

@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
<style>
    .hide{
        display: none !important;
    }
</style>
@endsection

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="content-page">
                <div class="nk-block-head nk-block-head-lg">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title">Get Started</h3>
                    </div>
                </div>
                <div class="nk-block  ">
                    <div class="card-inner card-inner-lg">
                        <div class="card card-bordered card-stretch">
    <div class="card-inner">
        <form action="{{ route('account.setup.save') }}" method="POST" class="gy-2 form-settings">
            @csrf
            <div class="row gy-3">
                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label" for="theme_style">Theme Style</label>
                                        <select name="theme_style" class="form-control select2-selection select2-selection--single" id="theme_style"  data-ui="lg" data-select2-id="theme_style" tabindex="-1" aria-hidden="true">
                                          
                                            <option value="dark" >Dark</option>
                                            <option value="semi-dark" >Semi Dark</option>
                                            <option value="light">Light</option>
                                        </select>
                                       
                                    </div>
                                </div>
                <div class="col-sm-6 col-md-6">
                    <div class="form-group">
                        <label class="form-label">Country</label>
                        <div class="form-control-wrap">
                           
                            <select class="form-control" name="coun" required>
                                                     <option value="">Select Country</option>       {!! get_country_full_select_html() !!}
                                                        </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-6">
                    <div class="form-group">
                        <label class="form-label">Currency</label>
                        <div class="form-control-wrap">
                           
                             <select class="form-control" name="currenc" required>
                                                     <option value="">Select Currency</option>       {!! get_currency_select() !!}
                                                        </select>
                        </div>
                    </div>
                </div>
               
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label">Phone Number</label>
                        <div class="form-control-wrap">
                            <input name="phone" type="text" class="form-control" value="" />
                        </div>
                         <div class="form-note">Enter phone number without dialing code.</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label">Date of Birth</label>
                        <div class="form-control-wrap">
                           <div class="row">
                               <div class="form-group" style="width: 20%; margin-right: 1%;">
    <label class="form-label" for="fw-last-name">Month</label>
    <div class="form-control-wrap"><input type="text"  class="form-control required"  name="bmonth" required="" /></div>
</div> /

<div class="form-group" style="width: 20%; margin-right: 1%;">
    <label class="form-label" for="fw-last-name">Day</label>
    <div class="form-control-wrap"><input type="text" data-msg="Required" class="form-control required" name="bday" required="" /></div>
</div> / 

<div class="form-group" style="width: 40%; margin-right: 1%;">
    <label class="form-label" for="fw-last-name">Year</label>
    <div class="form-control-wrap">
        <select  name="byear" required="" class="form-control required" required="">
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>
    <option value="1969">1969</option>
    <option value="1968">1968</option>
    <option value="1967">1967</option>
    <option value="1966">1966</option>
    <option value="1965">1965</option>
    <option value="1964">1964</option>
    <option value="1963">1963</option>
    <option value="1962">1962</option>
    <option value="1961">1961</option>
    <option value="1960">1960</option>
    <option value="1959">1959</option>
    <option value="1958">1958</option>
    <option value="1957">1957</option>
    <option value="1956">1956</option>
    <option value="1955">1955</option>
    <option value="1954">1954</option>
    <option value="1953">1953</option>
    <option value="1952">1952</option>
    <option value="1951">1951</option>
    <option value="1950">1950</option>
    <option value="1949">1949</option>
    <option value="1948">1948</option>
    <option value="1947">1947</option>
    <option value="1946">1946</option>
    <option value="1945">1945</option>
    <option value="1944">1944</option>
    <option value="1943">1943</option>
    <option value="1942">1942</option>
    <option value="1941">1941</option>
    <option value="1940">1940</option>
    <option value="1939">1939</option>
    <option value="1938">1938</option>
    <option value="1937">1937</option>
    <option value="1936">1936</option>
    <option value="1935">1935</option>
    <option value="1934">1934</option>
    <option value="1933">1933</option>
    <option value="1932">1932</option>
    <option value="1931">1931</option>
    <option value="1930">1930</option>
    <option value="1929">1929</option>
    <option value="1928">1928</option>
    <option value="1927">1927</option>
    <option value="1926">1926</option>
    <option value="1925">1925</option>
    <option value="1924">1924</option>
    <option value="1923">1923</option>
    <option value="1922">1922</option>
    <option value="1921">1921</option>
    <option value="1920">1920</option>
    <option value="1919">1919</option>
    <option value="1918">1918</option>
    <option value="1917">1917</option>
    <option value="1916">1916</option>
    <option value="1915">1915</option>
    <option value="1914">1914</option>
    <option value="1913">1913</option>
    <option value="1912">1912</option>
    <option value="1911">1911</option>
    <option value="1910">1910</option>
    <option value="1909">1909</option>
    <option value="1908">1908</option>
    <option value="1907">1907</option>
    <option value="1906">1906</option>
    <option value="1905">1905</option>
    <option value="1904">1904</option>
    <option value="1903">1903</option>
    <option value="1902">1902</option>
    <option value="1901">1901</option>
    <option value="1900">1900</option>
</select>
</div>
</div>

                               
                           </div>
                        </div>
                       
                    </div>
                </div>
                
                <div class="col-sm-6 col-md-6">
                    <div class="form-group">
                        <label class="form-label">Time Zone</label>
                        <div class="form-control-wrap">
                           
                            <select class="form-control" name="tzone" required>
                                                     @foreach (config('timezones.timezones') as $key => $item)
                                                <option value="{{ $key }}"
                                                    {{ system_settings('time_zone') == $key ? ' selected' : '' }}>
                                                    {{ __($item) }}</option>
                                            @endforeach
                                                        </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-6">
                    <div class="form-group">
                        <label class="form-label">Employment Status</label>
                        <div class="form-control-wrap">
                           
                             <select class="form-control" name="estatus" required>
                                                     
                                                <option value="">Choose</option>
                                                <option value="EMPLOYED">Employed</option>
                                                <option value="SELF_EMPLOYED">Self-employed</option>
                                                <option value="PART_TIME_WORKER">Employed part-time</option>
                                                <option value="RETIRED">Retired</option>
                                                <option value="UNEMPLOYED">Unemployed</option>
                                                <option value="STUDENT">Student</option>
                                     
                                                        </select>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="form-label">Liquid amount that you can invest</label>
                        <div class="form-control-wrap">
                           
                            <select class="form-control" name="lamount" required>
                                                    
                                                <option value="">Choose</option>
                                                <option value="under 2.5">Under 2,500 </option>
                                                <option value="2.5 - 5k">2.5K - 5K </option>
                                                <option value="5k - 10k">5K - 10K </option>
                                                <option value="10K - 20K">10K - 20K </option>
                                                <option value="20K - 50K">20K - 50K </option>
                                                <option value="50K - 100K">50K - 100K </option>
                                                <option value="100K - 250K">100K - 250K </option>
                                                <option value="250K - 500K">250K - 500K </option>
                                                <option value="500K - 1M">500K - 1M </option>
                                                <option value="Over 1M">Over 1M </option>
                                           
                                                        </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="form-label">Your level of experience at trading Forex / CFDs</label>
                        <div class="form-control-wrap">
                           
                            <select class="form-control" name="eforex" required>
                                                      <option value="None">None </option>
                                                     <option value="Beginner">Beginner</option>
                                                     <option value="Intermediate">Intermediate</option>
                                              <option value="Expert">Expert</option>   
                                              <option value="Professional">Professional</option>
                                                        </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="form-label">Your level of experience at trading cryptocurrencies</label>
                        <div class="form-control-wrap">
                           
                            <select class="form-control" name="ecrypto" required>
                                               
                                                     <option value="None">None </option>
                                                     <option value="Beginner">Beginner</option>
                                                     <option value="Intermediate">Intermediate</option>
                                              <option value="Expert">Expert</option>   
                                              <option value="Professional">Professional</option>
                                                        </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="form-label">Do you have an account open or in use at any other broker</label>
                        <div class="form-control-wrap">
                           
                            <select class="form-control" name="open_broker" required>
                                                     <option value="">Select One</option>    
                                                     <option value="yes">Yes</option>    
                                                     <option value="no">No</option>    
                                                        </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row gy-4">
                                <div class="col-12">
                                    <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2 pt-2">
                                        <li>
                                            <button type="submit" class="btn btn-lg btn-primary ua-updp " data-action="address" >Save</button>
                                        </li>
                                       
                                    </ul>
                                </div>
                            </div>
        </form>
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('js')
<script>
   $('#submitx-form').on('click' , function(e){
       e.preventDefault();
       var data = $('#formpublic').serialize();
       var url = $("#formpublic").attr('action');
       $.ajax({
           type: "POST",
           url: url,
           data: data,
           dataType: 'json',
           
           beforeSend: function(){
               $(".spinner-border").removeClass('hide');
           },
           
           success: function(res) {
               if(res.status == true){
                   
               }else{
                  $("#errmessage").text(res.error) 
               }
           },
           
           complete: function() {
               $(".spinner-border").addClass('hide');
           },
       })
   }) 
</script>
@endsection