@extends('layouts.app')

@section('content')
    <section class="indSec">
        <div class="container">
            @include('admin.alerts')
            <div class="row">
                <div class="col-md-12">
                    <div class="signModal">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="sgnMd-1">
                                    <h2 class="mdHead text-center">Sign in</h2>
                                    <form method="POST" action="{{ route('login') }}">
                                        @csrf()
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Username or email
                                                address*</label>
                                            <input type="email" class="form-control" id="exampleInputEmail1"
                                                   aria-describedby="emailHelp" name="email" value="{{old('email')}}">
                                            @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Password*</label>
                                            <input type="password" class="form-control" id="exampleInputPassword1"
                                                   name="password">
                                            @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-group d-flex align-items-center justify-content-between">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="exampleCheck1"
                                                       name="remember" {{ old('remember') ? 'checked' : '' }}>
                                                <label class="form-check-label" for="exampleCheck1">Remember me</label>
                                            </div>
                                            <a class="btn btn-link" href="{{ route('password.request') }}">
                                                {{ __('Forgot Your Password?') }}
                                            </a>
                                        </div>

                                        <button type="submit" class="btn mdBtn-1">Sign in</button>
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="sgnMd-2">
                                    <h2 class="mdHead">Create an account</h2>
                                    <ul>
                                        <li><span>Save your info for faster checkout</span></li>
                                        <li><span>Track orders and access your history</span></li>
                                        <li><span>Easily reorder from past purchases</span></li>
                                    </ul>
                                    @if($errors->any())
                                        <div
                                            class="alert alert-danger">{{ implode('', $errors->all(':message')) }}</div>
                                    @endif
                                    <form method="POST" action="{{ route('register') }}">
                                        @csrf
                                        <div class="form-group">
                                            <label for="rCode">Referral Code:</label>
                                            <input type="text" class="form-control" id="rCode" name="referral_code"
                                                   value="{{ old('referral_code') }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="lname">First Name:</label>
                                            <input type="text" class="form-control" id="lname" name="first_name"
                                                   value="{{old('first_name')}}">
                                        </div>
                                        <div class="form-group">
                                            <label for="lname">Last Name:</label>
                                            <input type="text" class="form-control" id="lname" name="last_name"
                                                   value="{{old('last_name')}}">
                                        </div>
                                        <div class="form-group">
                                            <label for="sAddrees">Street Address:</label>
                                            <input type="text" class="form-control" id="sAddrees" name="street_address"
                                                   value="{{old('street_address')}}">
                                        </div>
                                        <div class="form-group">
                                            <label for="sAddrees_2">Street Address 2:</label>
                                            <input type="text" class="form-control" id="sAddrees_2"
                                                   name="street_address2" value="{{old('street_address2')}}">
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <label for="country">Country:</label>
                                                <select id="state" class="form-control" name="country">
                                                    <option selected>Choose...</option>
                                                    @foreach($countries as $country)
                                                        <option value="{{$country->id}}">{{$country->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="state">State:</label>
                                                    <select id="state" class="form-control" name="state">
                                                        <option selected>Choose...</option>
                                                        <option>...</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="city">City:</label>
                                                    <select id="city" class="form-control" name="city">
                                                        <option selected>Choose...</option>
                                                        <option>...</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="inputZip">Post/Zip Code:</label>
                                                    <input type="text" class="form-control" id="inputZip" name="zip"
                                                           value="{{old('zip')}}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="phone">Telephone:</label>
                                                    <input type="text" class="form-control" id="phone"
                                                           placeholder="Number" name="phone" value="{{old('phone')}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Email address:</label>
                                            <input type="email" class="form-control" id="exampleInputEmail1"
                                                   aria-describedby="emailHelp" name="email" value="{{old('email')}}">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Password:</label>
                                            <input type="password" class="form-control" id="exampleInputPassword1"
                                                   placeholder="Must be atleast 5 characters" name="password">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Confirm Password:</label>
                                            <input type="password" class="form-control" id="exampleInputPassword1"
                                                   placeholder="Confirm Password" name="password_confirmation">
                                        </div>
                                        <div class="form-group d-flex align-items-center justify-content-between">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="exampleCheck1"
                                                       name="terms" required>
                                                <label class="form-check-label" for="exampleCheck1">I agree to all the
                                                    terms and policies of the platform</label>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn mdBtn-1">Sign up</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="mainSection">
        <section class="mainBanner">
            <img src="{{asset('assets/images/banElm.png')}}" class="img-fluid banElm" alt="">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="banCont">
                            <h5>Local Time: 14:30</h5>
                            <h5>Last  Visit: 03/28/2022 at 02:14 EST</h5>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class=" tRight">
                            <h5>Updated every several minutes</h5>
                        </div>
                    </div>
                </div>
                <div class="row bWhite align-items-center">
                    <div class="col-md-3 text-center">
                        <div class="mbCont">
                            <figure>
                                <img src="{{asset('assets/images/jhnImg.png')}}" class="img-fluid" alt="">
                            </figure>
                            <h3>John Musk</h3>
                            <p>Investor</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mbCont">
                            <div class="bal">
                                <h2>Balances</h2>
                                <h4>$ 4999.76</h4>
                            </div>
                            <div class="amm">
                                <p>Customer id: 987654321</p>
                            </div>
                            <div>
                            </div>
                            <ul>
                                <li>
                                    <a href="javascript:;">withdraw</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mbCont">
                            <div class="bal">
                                <h2>Profit</h2>
                                <h4>$ 2999.02</h4>
                            </div>
                            <div class="amm">
                                <p></p>
                            </div>
                            <ul>
                                <li>
                                    <a href="javascript:;">withdraw</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mbCont">
                            <h2>Transaction</h2>
                            <ul class="trans">
                                <li>
                                    <a href="javascript:;">Latest</a>
                                </li>
                                <li>
                                    <a href="javascript:;">Upcoming</a>
                                </li>
                                <li>
                                    <a href="javascript:;">View all</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="banForm">
                            <form class="form">
                                <div class="row m-0">
                                    <div class="col-md-5 pl-0">
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="Categories search"
                                                   aria-describedby="basic-addon2">
                                            <div class="input-group-append">
                                                <span class="input-group-text" id="basic-addon2"><i
                                                        class="fal fa-search"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="Enter Address"
                                                   aria-describedby="basic-addon2">
                                            <div class="input-group-append">
                                                <span class="input-group-text" id="basic-addon2"><i
                                                        class="fal fa-map-marker-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn">Search</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="banTabs">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="personal-tab" data-toggle="tab" href="#personal"
                                       role="tab" aria-controls="personal" aria-selected="true">Personal</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="global-tab" data-toggle="tab" href="#global" role="tab"
                                       aria-controls="global" aria-selected="false">Global</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="personal" role="tabpanel"
                                     aria-labelledby="personal-tab">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="transaction">
                                                <div class="trans-1">
                                                    <div class="cardM">
                                                        <img src="{{asset('assets/images/money.png')}}"
                                                             class="img-fluid" alt="">
                                                        <h3>Transaction</h3>
                                                    </div>
                                                    <img src="{{asset('assets/images/cardMch.png')}}"
                                                         class="img-fluid cardMch"
                                                         alt="">
                                                </div>
                                                <div class="transForm">
                                                    <p>*** Insufficient Funds in Debit Account ***</p>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"
                                                                  id="basic-addon1">Total</span>
                                                        </div>
                                                        <input type="text" class="form-control" placeholder="00.00"
                                                               aria-label="Username" aria-describedby="basic-addon1">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="transaction">
                                                <div class="trans-1">
                                                    <div class="cardM">
                                                        <img src="{{asset('assets/images/bank.png')}}" class="img-fluid"
                                                             alt="">
                                                        <h3>Banking</h3>
                                                    </div>
                                                </div>
                                                <div class="transForm bnForm">
                                                    <p>Make a Deposit</p>

                                                    <form>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Deposit Funds</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Debit</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Amount
                                                                            to<br>Transfer</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Savings</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>

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

                                </div>
                                <div class="tab-pane fade" id="global" role="tabpanel" aria-labelledby="global-tab">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="transaction">
                                                <div class="trans-1">
                                                    <div class="cardM">
                                                        <img src="{{asset('assets/images/money.png')}}"
                                                             class="img-fluid" alt="">
                                                        <h3>Transaction</h3>
                                                    </div>
                                                    <img src="{{asset('assets/images/cardMch.png')}}"
                                                         class="img-fluid cardMch"
                                                         alt="">
                                                </div>
                                                <div class="transForm">
                                                    <p>*** Insufficient Funds in Debit Account ***</p>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"
                                                                  id="basic-addon1">Total</span>
                                                        </div>
                                                        <input type="text" class="form-control" placeholder="00.00"
                                                               aria-label="Username" aria-describedby="basic-addon1">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="transaction">
                                                <div class="trans-1">
                                                    <div class="cardM">
                                                        <img src="{{asset('assets/images/bank.png')}}" class="img-fluid"
                                                             alt="">
                                                        <h3>Banking</h3>
                                                    </div>
                                                </div>
                                                <div class="transForm bnForm">
                                                    <p>Make a Deposit</p>

                                                    <form>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Deposit Funds</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Debit</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Amount
                                                                            to<br>Transfer</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text"
                                                                              id="basic-addon1">Savings</span>
                                                                    </div>
                                                                    <input type="text" class="form-control"
                                                                           placeholder="00.00" aria-label="Username"
                                                                           aria-describedby="basic-addon1">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="bnTbl">
                            <table>
                                <tr>
                                    <th>Name</th>
                                    <th>Debit Account</th>
                                    <th>Savings Account</th>
                                    <th>Network Earnings</th>
                                    <th>Standard Earnings</th>
                                    <th>Notes</th>
                                </tr>
                                <tr>
                                    <td>Petey S.</td>
                                    <td>0.00</td>
                                    <td>0.00</td>
                                    <td>0.00</td>
                                    <td>0.00</td>
                                    <td>T1: PTS , T2: PTSt</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </section>
    <section class="repSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <img src="{{asset('assets/images/repLogo.png')}}" class="img-fluid" alt="">
                </div>
                <div class="col-md-4">
                    <h3 class="repHead">Wouldn’t it be nice if your
                        receipts looked like this?</h3>
                </div>
                <div class="col-md-2">
                    <img src="{{asset('assets/images/repMch.png')}}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>
    <section class="psSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-9">
                    <div class="psCont">
                        <p>The world’s best money back pre-paid debit card program is here at last!</p>
                    </div>
                </div>
                <div class="col-md-2">
                    <img src="{{asset('assets/images/psImg.png')}}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>
@endsection

@push('custom-scripts')
    <script>
        $(document).ready(function () {
            $('select[name="country"]').change(function () {
                var countryId = $(this).val();
                var url = "{{url('states')}}" + "/" + countryId;
                $.ajax({
                    url: url,
                    type: "get",
                    success: function (result) {
                        $('select[name="state"]').html('')
                        $('select[name="city"]').html('')
                        var states = result.data;
                        for (let i = 0; i < states.length; i++) {
                            var state = states[i];
                            var statesHtml = '<option value="' + state.id + '">' + state.name + '</option>';
                            $('select[name="state"]').append(statesHtml)
                        }
                    }
                });
            })

            $('select[name="state"]').change(function () {
                var stateId = $(this).val();
                var url = "{{url('cities')}}" + "/" + stateId;
                $.ajax({
                    url: url,
                    type: "get",
                    success: function (result) {
                        $('select[name="city"]').html('')
                        var cities = result.data;
                        for (let i = 0; i < cities.length; i++) {
                            var city = cities[i];
                            var citiesHtml = '<option value="' + city.id + '">' + city.name + '</option>';
                            $('select[name="city"]').append(citiesHtml)
                        }
                    }
                });
            })
        });
    </script>
@endpush