@extends('layouts.backend.app')


@section('title', 'Account Settings')

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css"
        integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Dashboard</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">

                            <li class="breadcrumb-item">
                                <a href="{{ route('affiliate.dashboard') }}">
                                    Account
                                </a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 ">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        PASSWORD
                    </div>
                    <div class="card-body">
                        <form action="">
                            <div class="form-group">
                                <label for="current_password" class="mt-1 mb-1">Current password
                                </label>
                                <input type="password" name="current_password" id="current_password"
                                    class="form-control">
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="password" class="mt-1 mb-1">Password</label>
                                        <input type="password" name="password" id="password" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="password_confirmation" class="mt-1 mb-1">Confirm Password</label>
                                        <input type="password" name="password_confirmation" id="password_confirmation"
                                            class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-2">
                                <button type="submit" id="update_password_btn"
                                    class="btn btn-primary btn-sm">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"
        integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        let name = $('#name');
        let phone = $('#phone');
        let address = $('#address');
        let city = $('#city');
        let zip = $('#zip');
        let country_id = $('#country_id');
        let _token = $('input[name=_token]').val();
        let updateBtn = $('#update_btn');
        let form = $('#update_form');
        updateBtn.click(function(e) {
            e.preventDefault();
            // update btn loading icon
            updateBtn.html(
                '<i class="fa fa-spinner fa-spin"></i>Update'
            );
            updateBtn.attr('disabled', true);
            $.ajax({
                url: "{{ route('affiliate.account.update') }}",
                type: "POST",
                data: {
                    name: name.val(),
                    phone: phone.val(),
                    address: address.val(),
                    city: city.val(),
                    zip: zip.val(),
                    country_id: country_id.val(),
                    _token: _token
                },
                success: function(response) {
                    updateBtn.html('Update');
                    updateBtn.attr('disabled', false);
                    toastr.success(response.message, 'Success');
                },
                error: function(response) {
                    updateBtn.html('Update');
                    updateBtn.attr('disabled', false);
                    let erros = response.responseJSON.errors;
                    $.each(erros, function(key, value) {
                        toastr.error(value, 'Error');
                    });
                }
            });
        });
    </script>
    <script>
        let updatePasswordBtn = $('#update_password_btn');
        let current_password = $('#current_password');
        let password = $('#password');
        let password_confirmation = $('#password_confirmation');
        updatePasswordBtn.click(function(e) {
            e.preventDefault();
            // update btn loading icon
            updatePasswordBtn.html(
                '<i class="fa fa-spinner fa-spin"></i>Update'
            );
            updatePasswordBtn.attr('disabled', true);
            $.ajax({
                url: "{{ route('affiliate.account.updatePassword') }}",
                type: "POST",
                data: {
                    current_password: current_password.val(),
                    password: password.val(),
                    password_confirmation: password_confirmation.val(),
                    _token: _token
                },
                success: function(response) {
                    if (response.status == 'error') {
                        toastr.error(response.message, 'Error');
                        updatePasswordBtn.html('Update');
                        updatePasswordBtn.attr('disabled', false);
                        return;
                    }
                    updatePasswordBtn.html('Update');
                    updatePasswordBtn.attr('disabled', false);
                    toastr.success(response.message, 'Success');
                },
                error: function(response) {
                    updatePasswordBtn.html('Update');
                    updatePasswordBtn.attr('disabled', false);
                    let erros = response.responseJSON.errors;
                    // loop errors
                    $.each(erros, function(key, value) {
                        toastr.error(value, 'Error');
                    });
                }
            });
        });
    </script>
   
@endpush