@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 mt-5">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        Account
                    </div>
                    <div class="card-body">
                        <form action="{{ route('manager.account.update') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control mt-1 mb-1" id="name"
                                    value="{{ auth()->user()->name }}">
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control mt-1 mb-1" readonly
                                    value="{{ auth()->user()->email }}">
                            </div>
                            <div class="form-group">
                                <label for="old_password">Old Password</label>
                                <input type="password" name="old_password" class="form-control mt-1 mb-1" id="old_password">
                            </div>
                            <div class="form-group">
                                <label for="password">New Password</label>
                                <input type="password" name="password" class="form-control mt-1 mb-1" id="password">
                            </div>
                            <div class="form-group">
                                <label for="password_confirmation">Confirm Password</label>
                                <input type="password" name="password_confirmation" class="form-control mt-1 mb-1"
                                    id="password_confirmation">
                            </div>
                            <button type="submit" class="btn btn-success btn-sm" id="accountUpdateBtn">Update</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        Profile Picture
                    </div>
                    <div class="card-body">
                        <form action="" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="avatar">Avatar</label>
                                <input type="file" class="dropify"
                                    data-default-file="{{ auth()->user()->image != null ? asset('uploads/affiliate/' . auth()->user()->image) : 'https://via.placeholder.com/120' }}" />
                                @csrf
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        Referral Link
                    </div>
                    <div class="card-body">
                        <form action="" enctype="multipart/form-data">
                            <div class="form-group">
                                <textarea name="" id="" cols="30" rows="5" class="form-control" readonly>{{ config('app.url') . '/register?manager=' . auth()->user()->id }}</textarea>
                            </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>
        $(document).ready(function() {
            $('.dropify').dropify();
        });
        //dropify upload ajax
        $('.dropify').on('change', function() {
            let _token = $('input[name=_token]').val();
            let image = $('.dropify')[0].files[0]; // Get the first file from the file input element
            let formData = new FormData();
            formData.append('image', image);
            formData.append('_token', _token);
            $.ajax({
                url: "{{ route('manager.account.imageUpload') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    toastr.success('Profile Image Upload Success', 'Success');
                },
                error: function(response) {
                    let data = response.responseJSON;
                    if (data.errors.image) {
                        toastr.error(data.errors.image[0], 'Error');
                    }
                }
            });
        });
    </script>
@endpush