@extends('layout.admin')

@section('meta_tags')
@stop

@section('pagename')
    Tiers
@stop

@section('top_import_file')
@stop

@section('content')
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card radius-10">
                <div class="card-body">
                    <form id="regstr">
                        <h5 class="mb-3">Edit Profile</h5>
                        <div id="error" class="alert alert-danger d-none"></div>
                        <div class="mb-4 d-flex flex-column gap-3 align-items-center justify-content-center">
                            <div class="user-change-photo shadow">
                                <input type="file" hidden name="profile_picture" id="dp" accept="image/*">
                                <img id="bantu" src="{{ $admin_user->profile_picture }}" alt="...">
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm radius-30 px-4" id="change_photo"><ion-icon name="image-sharp"></ion-icon>Change Photo</button>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">User Information</h5>
                            <div class="">
                                <div class="form-check form-switch">
                                    <label class="form-check-label" for="change_password_toggle">Change Password</label>
                                    <input class="form-check-input" type="checkbox" role="switch" id="change_password_toggle">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="form-label">Username</label>
                                <input type="text" class="form-control" name="username" value="{{ $admin_user->username }}" placeholder="Enter Username">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Email address</label>
                                <input type="text" class="form-control" name="email" value="{{ $admin_user->email }}" placeholder="Enter Email">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Contact</label>
                                <input type="text" class="form-control" name="contact" value="{{ $admin_user->contact }}" placeholder="Enter Contact">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Address</label>
                                <input type="text" class="form-control" name="address" value="{{ $admin_user->address }}" placeholder="Enter Address">
                            </div>
                            <div class="col-6 d-none">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-control" name="password" placeholder="Change Password">
                            </div>
                            <div class="col-6 d-none">
                                <label class="form-label">Password Confirmation</label>
                                <input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
                            </div>
                            <div class="col-12">
                                <label class="form-label">About Me</label>
                                <textarea class="form-control" rows="4" cols="4" name="description" placeholder="Describe yourself..." placeholder="Write something about yourself">{{ $admin_user->description }}</textarea>
                            </div>
                        </div>
                        <div class="text-start mt-3">
                            <button class="btn btn-primary d-none" type="button" id="spinner" disabled>
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                Updating...
                            </button>
                            <button type="submit" class="btn btn-primary px-4">Update Profile</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@stop

@section('bottom-scripts')
    {{-- Edit Profile Script --}}
    <script>
        $(function() {
            $("#regstr").on("submit", function(e) {
                e.preventDefault();
                var formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}')

                $.ajax({
                    url: "{{ route('admin.profile.edit') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $(":submit").prop("disabled", true);
                        $(":submit").addClass("d-none");
                        $("#spinner").removeClass("d-none");
                        $("#error").addClass("d-none");
                    },
                    success: function(res) {

                        let obj = res

                        if (obj.error) {
                            $("#error").html(obj.error);
                            $("#error").removeClass("d-none");
                            $("#spinner").addClass("d-none");
                            $(":submit").removeClass("d-none");
                            // toastr.error("Please check errors list!", "Error");
                            $(window).scrollTop(0);
                        } else if (obj.success) {
                            $("#spinner").addClass("d-none");
                            // toastr.success("Welcome!", "On Board!");

                            setTimeout(function() {
                                // window.location = "{{ url('dashboard') }}"; // Use Laravel's URL helper to generate the correct URL
                                window.location.href = "{{ route('admin.profile.view') }}"
                            }, 1000);
                        } else {
                            $("#spinner").addClass("d-none");
                            $(":submit").prop("disabled", false);
                            $(":submit").removeClass("d-none");
                            // toastr.error("Something bad happened!", "Error");
                            $(window).scrollTop(0);
                        }

                        $(":submit").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error)
                        // toastr.error("Please check the error list", "Error");
                        $(window).scrollTop(0);

                        $("#error").html(error.responseJSON.message || error.responseJSON
                        .error);
                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $(":submit").prop("disabled", false);
                        $(":submit").removeClass("d-none");
                    }
                });
            });
        });
    </script>

    {{-- Change Picture Button Fuction --}}
    <script>
        $("#change_photo").click(function(){
            $("#dp").click()
        })

        $("#dp").change(function(e){
            e.preventDefault()
            var file =  e.target.files[0]
            if (file) {
                if (file.type.startsWith("image/")) {
                    $("#error").addClass('d-none')
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        $("#bantu").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                } else {
                    $("#error").text("Please select an image file.")
                    $("#error").removeClass('d-none')
                    $("#dp").val("");
                }
            }
            console.log(file)
        })
    </script>

    {{-- Change Password Toggle --}}
    <script>
        $("#change_password_toggle").change(function() {
            if($(this).is(':checked'))
            {
                $('input[type=password]').parent().removeClass('d-none')
                $('input[type=password]').attr('disabled', false)
                $('input[type=password]').attr('required', true)
            } else {
                $('input[type=password]').parent().addClass('d-none')
                $('input[type=password]').attr('disabled', true)
                $('input[type=password]').attr('required', false)
            }
        })
    </script>
@stop