@extends('site.layouts.app')
@section('title', 'My account')
@section('content')
    <!-- START SECTION BREADCRUMB -->
    <div class="breadcrumb_section bg_gray page-title-mini">
        <div class="container">
            <!-- STRART CONTAINER -->
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="page-title">
                        <h1>My account</h1>
                    </div>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb justify-content-md-end">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item active">My account</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            <div class="container">
                <div class="row">
                    @include('site.customer.sidebar')
                    <div class="col-lg-9 col-md-9">

                        <div class="card shadow">
                            <h6 class="card-header">General Information</h6>
                            <div class="card-body">
                                @if (Auth::user()->is_approved != 0)
                                    <form id="ProfileUpdate" method="POST" action="{{ route('customer.updateProfile') }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Name</label>
                                            <input type="text" name="name" value="{{ Auth::user()->name }}"
                                                class="form-control" placeholder="Name">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Phone</label>
                                            <input type="text" name="phone" value="{{ Auth::user()->phone }}"
                                                class="form-control" placeholder="Phone">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Email</label>
                                            <input type="text" readonly name="email" value="{{ Auth::user()->email }}"
                                                class="form-control" placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <label for="name">Country</label><br>
                                            <select required name="country_id" class="form-select select2 capitalize"
                                                onchange="confirmCountryChange()">
                                                <option value="">Please Select</option>
                                                @foreach ($countries as $key => $country)
                                                    @if ($country->name == 'Pakistan')
                                                        @php continue; @endphp
                                                    @endif
                                                    <option {{ Auth::user()->country_id == $country->id ? 'selected' : '' }}
                                                        value="{{ $country->id }}">
                                                        {{ str_replace('_', '', $country->name) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Address</label>
                                            <input type="text" name="address" value="{{ Auth::user()->address }}"
                                                class="form-control" placeholder="Address">
                                        </div>
                                        <div class="form-group mt-2">
                                            <button type="submit" class="btn btn-fill-out btn_save1">Update</button>
                                        </div>
                                    </form>
                                @else
                                    <h5 class="fw-bold text-danger"> Your account is temporarily disabled.</h5>
                                    <p>Our team is currently reviewing your account. Once approved for changing your
                                        country, you will regain access to all EasyTrans services.
                                        Thank you for your trust and for using EasyTrans services.</p>

                                    <strong>EasyTrans: Connecting Your Heart</strong>
                                @endif


                            </div>
                        </div>
                        <div class="card shadow mt-2">
                            <h6 class="card-header">Change Password</h6>
                            <div class="card-body">
                                <form id="PasswordUpdate" action="{{ route('customer.passwordChanage') }}" method="POST">
                                    @csrf
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="account-old-password">Current Password</label>
                                            <input type="password" required="required" class="form-control"
                                                name="current_password" placeholder="Old Password">
                                            <div id="current_passworderr"></div>
                                        </div>
                                        <div class="form-group">
                                            <label for="account-new-password">New Password</label>
                                            <input type="password" name="new_password" class="form-control"
                                                placeholder="New Password" required>
                                            <div id="new_passworderr"></div>
                                        </div>
                                        <div class="form-group">
                                            <label for="account-retype-new-password">New Confirm
                                                Password</label>
                                            <input type="password" name="new_confirm_password" class="form-control" required
                                                placeholder="New Password">
                                            <div id="new_confirm_passworderr"></div>
                                        </div>

                                        <div class="form-group mt-2">
                                            <button type="submit" class="btn btn-fill-out btn_save2">Save</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

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

    <!-- Modal -->
    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5 class="text-danger fw-bold">Are you sure you want to change your country? </h5>
                    <p>Please note that this action will temporarily disable your account for verification purposes. During
                        this time, access to some sensitive services may be restricted. The process typically takes 10
                        minutes to 24 hours, but in some cases, it may take longer.</p>
                    <p>Thank you for your trust and Using EasyTrans Services.</p>
                    <strong>EasyTrans: Connecting Your Heart</strong>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $("#ProfileUpdate").submit(function(e) {
            e.preventDefault();
            var data = new FormData(this);
            var url = $(this).attr("action");
            update(data, url, 1);
        })

        $("#PasswordUpdate").submit(function(e) {
            e.preventDefault();
            var data = new FormData(this);
            var url = $(this).attr("action");
            update(data, url, 2);
        })



        function confirmCountryChange() {

            $("#confirmationModal").modal('show')
        }


        function update(data, url, id) {

            $.ajax({
                type: "post",
                url: url,
                data: data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".btn_save" + id).html(
                        `<span class="spinner-border spinner-border-sm text-white" ></span> Loading...`
                    ).attr('disabled', true);
                },
                complete: function() {
                    $(".btn_save" + id).html("Save").attr('disabled', false);
                }
            }).done(function(response) {

                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.success(response.message);
                setTimeout(() => {
                    location.reload()
                }, 2000);
            }).fail(function(response) {
                if (response.responseJSON.errors) {
                    var errorMessages = '';
                    $.each(response.responseJSON.errors, function(key, value) {
                        toastr.error(value);
                    });

                } else {
                    // Handle other errors
                    toastr.error(response.responseJSON.message);
                }
            });

        }
    </script>

@endsection