@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <style>
        #profile-form [class^="col-"]
        {
            margin-bottom: 20px;
        }
    </style>
@endsection

@section('main-content')
    @include('layouts.account_banner',['title'=>"My Profile","image"=>asset('assets/img/profile_bg.jpg')])
    <!-- Content ================================================== -->
    <div class="container margin_60_35">
        <div class="row" id="order-summary">
            <div class="col-md-4">
                <div>
                    <p><a style= "background: #AE996E; color: white;" class="btn_side">Point Statistics</a></p>
                    <div class="box_style_1">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td>
                                    <p>Total Current balance:</p>
                                </td>
                                <td>
                                    <strong>{{number_format($profile->Current_balance,2)}}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>Blocked Points For <br>Submitted Auction Bids:</p>
                                </td>
                                <td>
                                    <strong>{{number_format($profile->Blocked_points,2)}}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>Available Current Balance:</p>
                                </td>
                                <td>
                                    <strong>{{number_format(
                                    ($profile->Current_balance - $profile->Blocked_points),2)}}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>Total Gained Points:</p>
                                </td>
                                <td>
                                    <strong>{{number_format($profile->Total_gained_points,2)}}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>Total Redeemed:</p>
                                </td>
                                <td>
                                    <strong>{{number_format($profile->Total_redeem_points,2)}}</strong>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div><!-- End box_style_1 -->

                </div><!-- End col-md-3 -->
            </div>
            <div class="col-md-8">
                <div class="box_style_2" id="order_process">
                    <h2 style="background: #332C20;" class="inner2">Profile Details</h2>
                    <form action="" id="profile-form">
                        <div class="row">
                            <div class="col-md-6">
                                <input style="border-radius: 3px;" type="text" class="form-control"
                                       placeholder="First Name"
                                       id="first_name"
                                       value="{{$profile->First_name}}">
                            </div>
                            <div class="col-md-6">
                                <input style="border-radius: 3px;" type="text"
                                       id="last_name"
                                       value="{{$profile->Last_name}}"
                                       class="form-control" placeholder="Last Name">
                            </div>
                            <div class="col-md-6">
                                <div class="styled-select">
                                    <select class="form-control" name="country_id" id="country_id">
                                        <option value="1">Nigeria</option>
                                    </select>
                                </div>
                                <!-- <button style="width: 100%; height: 100%;background: #808080" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Country</button> -->
                            </div>
                            <div class="col-md-6">
                                <div class="styled-select">
                                    <select class="form-control" name="state_id" id="state_id">
                                        <option value="" >State</option>
                                        @foreach($states as $state)
                                            <option value="{{$state->State_id}}"
                                                {{$state->State_id==$profile->State_id?"selected":""}}
                                            >{{$state->State_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- <button style="width: 100%; height: 100%; background: #808080" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">State</button> -->
                            </div>
                            <div class="col-md-6">
                                <div class="styled-select">
                                    <select class="form-control" name="city_id" id="city_id">
                                        <option value="" >City</option>
                                        @foreach($cities as $city)
                                            <option value="{{$city->City_id}}"
                                                {{$city->City_id==$profile->City_id?"selected":""}}
                                            >{{$city->City_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- <button style="width: 100%; height: 100%; background: #808080" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">City</button> -->
                            </div>
                            <div class="col-md-6">
                                <input style="border-radius: 3px;" type="text" class="form-control"
                                       value="{{$profile->Phone_no}}"
                                       id="phone_no"
                                       placeholder="Phone Number">
                            </div>
                            <div class="col-md-12" >
                                <textarea style="height: 70px" type="text"
                                          class="form-control" id="address" name="address"
                                          placeholder="Address">{{$profile->Current_address}}
                                </textarea>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <a style="background: #332C20;" class="btn_full5" href="javascript:void(0)"
                                   data-toggle="modal" data-target="#login_2">Change Password</a>
                            </div>
                            <div class="col-md-4">
                                <a style="background: #332C20;" class="btn_full5"
                                   data-toggle="modal" data-target="#reset_pin_modal" href="javascript:void(0)">Change Transaction Pin</a>
                            </div>

                            <div class="col-md-4">

                                <button style="background: #332C20;" class="btn_full5"
                                        type="button"
                                   id="reset_trans_pin_btn"

                                  >
                                    Reset Transaction Pin</button>

                            </div>
                        </div>
                        <hr class="styled">
                        <div style="text-align:right; margin-top: -30px;">
                            <button type="submit" id="submit-btn" style="width: 200px;background: #AE996E"
                                    class="btn btn-submit ">Update Profile</button>
                        </div>
                    </form>


                </div><!-- End box_style_1 -->
            </div><!-- End col-md-6 -->

            <div class="col-md-3"></div>
        </div><!-- End row -->
    </div><!-- End container -->
    <div class="modal fade" id="login_2" tabindex="-1" role="dialog" aria-labelledby="myLogin" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content modal-popup">
                <div class="row">

                    <div class="col-md-12">
                            <a href="#" class="close-link"><i style="color:  #808080" class="icon_close_alt2"></i></a>
                            <form action="#" class="popup-form" id="changePasswordForm">
                                <h2 style="color: #AE996E;">Change Password</h2>
                                <input type="password" class="form-control form-white"
                                id="current_password"
                                placeholder="Current Password">
                                <input type="password"
                                id="new_password"
                                class="form-control form-white" placeholder="New Password">
                                <input type="password"
                                id="password_confirmation"
                                class="form-control form-white" placeholder="Confirm Password">
                                <button style="margin-top: 0;" type="submit"
                                 id="change-password-btn"
                                class="btn btn-submit change-submit">Change Password</button>
                            </form>
                    </div>
                </div>

			</div>
		</div>
	</div><!-- End modal -->
    <div class="modal fade" id="reset_pin_modal" tabindex="-1" role="dialog" aria-labelledby="pinModel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-popup">
                <div class="row">

                    <div class="col-md-12">
                        <a href="#" class="close-link"><i style="color:  #808080" class="icon_close_alt2"></i></a>
                        <form action="#" class="popup-form" id="changePinForm">
                            <h2 style="color: #AE996E;">Change Transaction Pin</h2>
                            <input type="password" class="form-control form-white"
                                   id="current_pin"
                                   maxlength="4"
                                   minlength="4"
                                   placeholder="Current Transaction Pin">
                            <input type="password"
                                   maxlength="4"
                                   minlength="4"
                                   id="new_pin"
                                   class="form-control form-white" placeholder="New Transaction Pin">
                            <input type="password"
                                   maxlength="4"
                                   minlength="4"
                                   id="pin_confirmation"
                                   class="form-control form-white" placeholder="Confirm Transaction Pin">
                            <button style="margin-top: 0;" type="submit"
                                    id="change-pin-btn"
                                    class="btn btn-submit change-submit">Change Pin</button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div><!-- End modal -->
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script>
        $('#profile-form').submit(function(e){
            e.preventDefault();
            let first_name = $('#first_name').val();
            let last_name = $('#last_name').val();
            let address = $('#address').val();
            let city_id = $('#city_id').val();
            let state_id = $('#state_id').val();
            let country_id = $('#country_id').val();
            let phone_no = $('#phone_no').val();

            if(first_name != "" && last_name!="")
            {
                $('#submit-btn').attr("disabled",true);
                $('#submit-btn').html("Updating...");
                $.ajax({
                    type:'POST',
                    url:"{{route('profile')}}",
                    data:{first_name,last_name,phone_no,address,state_id,country_id,city_id},
                    success:function(data){
                        if(data.status === 1)
                        {
                            $('#submit-btn').attr("disabled",false);
                            $('#submit-btn').html("Update Profile");
                            toastr.success(data.message, 'Success Alert', {timeOut: 5000})
                        }else
                        {
                            $('#submit-btn').attr("disabled",false);
                            $('#submit-btn').html("Update Profile");
                            toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                            if(data.code==401)
                            {
                                window.location.href="{{route('login')}}"
                            }
                        }
                    }
                })
            }else{
                $('.error-msg').html("The email and password is required")
                $('.error-msg').fadeIn(500)
                $('#submit-btn').attr("disabled",false);
                $('#submit-btn').html("Update Profile");
            }


        });

        $('#country_id').change(function(){
            let country_id = $(this).val();
            if(country_id=="")
            {
                $('#state_id').html("<option>Select state</option>");
                $('#city_id').html("<option>Select state</option>");
            }else{
                $('#state_id').html("<option>Loading...</option>");
                $.ajax({
                    type:'POST',
                    url:"{{route('states')}}",
                    data:{country_id},
                    success:function(data){
                        if(data.status === 1)
                        {
                            let states = getCityOrStateComponent(data.states,true);
                            $('#state_id').html(states);
                            $('#city_id').html("<option>Select state</option>");
                        }else
                        {
                            toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                        }
                    }
                })
            }
        })

        $('#state_id').change(function(){
            let state_id = $(this).val();
            if(state_id==="")
            {
                $('#city_id').html("<option>Select city</option>");
            }else{
                $('#city_id').html("<option>Loading...</option>");
                $.ajax({
                    type:'POST',
                    url:"{{route('cities')}}",
                    data:{state_id},
                    success:function(data){
                        if(data.status === 1)
                        {
                            let cities = getCityOrStateComponent(data.cities,false);
                            $('#city_id').html(cities);
                        }else
                        {
                            toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                        }
                    }
                })
            }
        })

        function getCityOrStateComponent(items,isState)
        {
            if(isState)
            {
                let component = "<option>Select state</option>";
                items.map(function(item){
                 component +=`<option value=${item.State_id}>${item.State_name}</option>`;
                })
                return component;
            }else{
                let component = "<option>Select city</option>";
                items.map(function(item){
                    component +=`<option value=${item.City_id}>${item.City_name}</option>`;
                })
                return component;
            }

        }

        $('#changePasswordForm').submit(function(e){
            let current_password = $('#current_password').val();
            let password = $('#new_password').val();
            let password_confirmation = $('#password_confirmation').val();
            e.preventDefault();

            if(new_password != "" && password != "" && password_confirmation!="")
            {
                $('#change-password-btn').attr("disabled",true);
                $('#change-password-btn').html("Changing...");
                $.ajax({
                    type:'POST',
                    url:"{{route('password.change')}}",
                    data:{current_password,password,password_confirmation},
                    success:function(data){
                        if(data.status === 1)
                        {
                            toastr.success(data.message, 'Success Alert', {timeOut: 5000})
                            $('#changePasswordForm')[0].reset();
                        }else
                        {
                            toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                            if(data.code==401)
                            {
                                window.location.href="{{route('login')}}"
                            }
                        }
                        $('#change-password-btn').attr("disabled",false);
                        $('#change-password-btn').html("Change Password");
                    },
                    error:function (xhr,msg) {
                        console.debug(xhr);
                        console.debug(msg);
                        toastr.error("An error occurred on the server", 'Error Alert', {timeOut: 5000})
                        $('#change-password-btn').attr("disabled",false);
                        $('#change-password-btn').html("Change Password");
                    }
                })
            }else{
                toastr.error("Please fill all the fields", 'Error Alert', {timeOut: 5000})
            }
        });

        $('#changePinForm').submit(function(e){
            let current_pin = $('#current_pin').val();
            let pin = $('#new_pin').val();
            let pin_confirmation = $('#pin_confirmation').val();
            e.preventDefault();

            if(current_pin != "" && pin != "" && pin_confirmation!="")
            {
                if(pin != pin_confirmation)
                {
                    toastr.error("Pins do not match", 'Error Alert', {timeOut: 5000})
                }else{
                    $('#change-pin-btn').attr("disabled",true);
                    $('#change-pin-btn').html("Changing...");
                    $.ajax({
                        type:'POST',
                        url:"{{route('pin.change')}}",
                        data:{current_pin,pin,pin_confirmation},
                        success:function(data){
                            if(data.status === 1)
                            {
                                toastr.success(data.message, 'Success Alert', {timeOut: 5000})
                                $('#changePinForm')[0].reset();
                            }else
                            {
                                toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                                if(data.code==401)
                                {
                                    window.location.href="{{route('login')}}"
                                }
                            }
                            $('#change-pin-btn').attr("disabled",false);
                            $('#change-pin-btn').html("Change Pin");
                        },
                        error:function (xhr,msg) {
                            console.debug(xhr);
                            console.debug(msg);
                            toastr.error("An error occurred on the server", 'Error Alert', {timeOut: 5000})
                            $('#change-pin-btn').attr("disabled",false);
                            $('#change-pin-btn').html("Change Pin");
                        }
                    })
                }

            }else{
                toastr.error("Please fill all the fields", 'Error Alert', {timeOut: 5000})
            }


        })

        $('#reset_trans_pin_btn').click(function(e){
            e.preventDefault()
            if(confirm("Are you sure you want to reset your pin?"))
            {
                $('#reset_trans_pin_btn').attr("disabled",true);
                $('#reset_trans_pin_btn').html("Sending...");
                $.ajax({
                    type:'POST',
                    url:"{{route('pin.reset')}}",
                    data:{},
                    success:function(data){
                        if(data.status === 1)
                        {
                            toastr.success(data.message, 'Success Alert', {timeOut: 5000})
                        }else
                        {
                            toastr.error(data.message, 'Error Alert', {timeOut: 5000})
                            if(data.code==401)
                            {
                                window.location.href="{{route('login')}}"
                            }
                        }
                        $('#reset_trans_pin_btn').attr("disabled",false);
                        $('#reset_trans_pin_btn').html("Reset Transaction Pin");
                    },
                    error:function (xhr,msg) {
                        console.debug(xhr);
                        console.debug(msg);
                        toastr.error("An error occurred on the server", 'Error Alert', {timeOut: 5000})
                        $('#reset_trans_pin_btn').attr("disabled",false);
                        $('#reset_trans_pin_btn').html("Reset Transaction Pin");
                    }
                })
            }


        })
    </script>
@endsection