@extends('layouts.app')

@section('content')
    <section class="setSec">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="headMem">Security Setting</h2>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-3">
                    <div class="setCont text-center">
                        <div class="text-right">
                            <img src="{{asset('assets/images/editImg.png')}}" class="img-fluid" alt="">
                        </div>
                        <figure>
                            <img src="{{asset('assets/images/setImg.png')}}" class="img-fluid" alt="">
                        </figure>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    @if(Session::has('message'))
                        <p class="alert alert-success">{{ Session::get('message') }}</p>
                    @endif
                    @if($errors->any())
                        <div class="alert alert-danger">{{ implode('', $errors->all(':message')) }}</div>
                    @endif
                    <div class="setAcc">
                        <div id="accordion">
                            <form action="{{route('update-profile')}}" method="post">
                                @method('put')
                                @csrf
                                <div class="card">
                                    <div class="card-header" id="headingOne">
                                        <h5 class="mb-0">
                                            <button type="button" class="btn btn-link" data-toggle="collapse"
                                                    data-target="#collapseOne"
                                                    aria-expanded="true" aria-controls="collapseOne">
                                                <span>Name and Email</span>
                                                <span><i class="fas fa-plus"></i></span>
                                            </button>
                                        </h5>
                                    </div>

                                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">First
                                                            Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="first_name"
                                                           value="{{auth()->user()->first_name}}" name="first_name">
                                                </div>
                                                <div class="col-md-2 ">
                                                    <div class="accDiv">
                                                        <button type="button" class="accEdit"><img src="{{asset('assets/images/accEdit.png')}}"
                                                                                     class="img-fluid" alt=""></button>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Last
                                                            Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="last_name"
                                                           value="{{auth()->user()->last_name}}" name="last_name">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Email</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="email" class="form-control" id="staticEmail"
                                                           value="{{auth()->user()->email}}" name="email">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingTwo">
                                        <h5 class="mb-0">
                                            <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#collapseTwo" aria-expanded="false"
                                                    aria-controls="collapseTwo">
                                                <span>Address and Phone Number</span>
                                                <span><i class="fas fa-plus"></i></span>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Street
                                                            Address</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="street_address"
                                                           value="{{auth()->user()->street_address}}"
                                                           name="street_address">
                                                </div>
                                                <div class="col-md-2 ">
                                                    <div class="accDiv">
                                                        <button type="button" class="accEdit"><img src="{{asset('assets/images/accEdit.png')}}"
                                                                                     class="img-fluid" alt=""></button>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Street
                                                            Address 2</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="street_address2"
                                                           value="{{auth()->user()->street_address2}}"
                                                           name="street_address2">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Country</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <select id="country" class="form-control" name="country">
                                                        <option selected>Choose...</option>
                                                        @foreach($countries as $country)
                                                            <option value="{{$country->id}}">{{$country->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">State</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <select id="state" class="form-control" name="state"></select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">City</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <select id="city" class="form-control" name="city"></select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Zip</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input id="zip" class="form-control" name="zip" value="{{auth()->user()->zip}}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingThree">
                                        <h5 class="mb-0">
                                            <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#collapseThree" aria-expanded="false"
                                                    aria-controls="collapseThree">
                                                <span>Password</span>
                                                <span><i class="fas fa-plus"></i></span>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Full
                                                            Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="name"
                                                           placeholder="John Musk">
                                                </div>
                                                <div class="col-md-2 ">
                                                    <div class="accDiv">
                                                        <button type="button" class="accEdit"><img src="{{asset('assets/images/accEdit.png')}}"
                                                                                     class="img-fluid" alt=""></button>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Email</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="email" class="form-control" id="staticEmail"
                                                           placeholder="ohnmusk@paidtoshop.com">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingFour">
                                        <h5 class="mb-0">
                                            <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#collapseFour" aria-expanded="false"
                                                    aria-controls="collapseFour">
                                                <span>Two-Step Verification</span>
                                                <span><i class="fas fa-plus"></i></span>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Full
                                                            Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="name"
                                                           placeholder="John Musk">
                                                </div>
                                                <div class="col-md-2 ">
                                                    <div class="accDiv">
                                                        <button type="button" class="accEdit"><img src="{{asset("assets/images/accEdit.png")}}"
                                                                                     class="img-fluid" alt=""></button>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Email</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="email" class="form-control" id="staticEmail"
                                                           placeholder="ohnmusk@paidtoshop.com">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingFive">
                                        <h5 class="mb-0">
                                            <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#collapseFive" aria-expanded="false"
                                                    aria-controls="collapseFive">
                                                <span>Personal security pascode</span>
                                                <span><i class="fas fa-plus"></i></span>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseFive" class="collapse" aria-labelledby="headingFive"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Full
                                                            Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control" id="name"
                                                           placeholder="John Musk">
                                                </div>
                                                <div class="col-md-2 ">
                                                    <div class="accDiv">
                                                        <button type="button" class="accEdit"><img src="{{asset('assets/images/accEdit.png')}}"
                                                                                     class="img-fluid" alt=""></button>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <div class="form-group mb-2">
                                                        <label for="staticEmail" class=" col-form-label">Email</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="email" class="form-control" id="staticEmail"
                                                           placeholder="ohnmusk@paidtoshop.com">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary text-white d-flex ml-auto w-auto mt-3">Update Profile</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="repSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-2">
                    <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)
                        }
                    }
                });
            })

            $('select[name="country"]').val('{{auth()->user()->country}}').change()
            setTimeout(function () {
                $('select[name="state"]').val('{{auth()->user()->state}}').change()
            }, 1000)
            setTimeout(function () {
                $('select[name="city"]').val('{{auth()->user()->city}}')
            }, 1000)
        });
    </script>
@endpush