@extends('admin.layout.app')
@section('title', 'Profile Update')
@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <h1 class="admin-title mb-3">Edit profile</h1>
                            <div id="status-message" style="display:none;" class="status-alert-bar">
                                <span id="msg-text"></span>
                            </div>
                            <form id="profileUpdateForm" enctype="multipart/form-data">
                                @csrf
                                <div class="tfcl-add-listing profile-inner">
                                    <h3>Profile Image</h3>
                                    <div class="tfcl_choose_avatar">
                                        <div class="avatar">
                                            <div class="form-group">
                                                <img id="imagePreview" width="158" height="138"
                                                     src="{{ Auth::user()->getFirstMediaUrl('profile_pictures') ?: asset('assets/images/avatar.webp') }}"
                                                     style="object-fit: cover; border-radius: 10px;">
                                            </div>
                                            <div class="choose-box">
                                                <label>Upload a new Profile Picture</label>
                                                <div class="form-group">
                                                    <input type="file" hidden id="tfcl_avatar" name="profile_image"
                                                           placeholder="Full Name"
                                                           accept="image/*">
                                                    <button id="btnBrowse" type="button"
                                                            onclick="document.getElementById('tfcl_avatar').click();">
                                                        Choose file
                                                    </button>
                                                    <input type="text" id="txtPath" readonly
                                                           placeholder="No file chosen">
                                                </div>
                                                <span class="text-danger error-text profile_image_error"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <h3 class="form-title">Basic Information</h3>

                                    <div class="form-group mb-3">
                                        <label>Full name</label>
                                        <input type="text" class="form-control" name="name" required
                                               placeholder="Full Name"
                                               value="{{Auth::user()->name}}">
                                        <span class="text-danger error-text name_error"></span>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Email address</label>
                                        <input type="email" class="form-control" name="email"
                                               placeholder="Email Address" required
                                               value="{{Auth::user()->email}}">
                                        <span class="text-danger error-text email_error"></span>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="fw-6">Phone Number</label>
                                        <div class="phone-input-group">

                                            <input type="tel" name="phone" class="phone-field" required
                                                   placeholder="000 000 0000" pattern="[0-9]{10}"
                                                   maxlength="10" value="{{Auth::user()->phone}}">
                                        </div>
                                        <span class="text-danger error-text phone_error"></span>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label class="fw-6">WhatsApp Number (Optional)</label>
                                        <div class="phone-input-group">

                                            <input type="tel" name="whatsapp" pattern="[0-9]{10}"
                                                   maxlength="10" class="phone-field"
                                                   placeholder="000 000 0000"
                                                   value="{{Auth::user()->alternate_phone}}">
                                        </div>
                                        <span class="text-danger error-text phone_error"></span>
                                    </div>

                                    <div class="group-button-submit left mb-3">
                                        <button type="submit" id="submitBtn" class="pre-btn">Save Changes</button>
                                    </div>
                                </div>
                            </form>
                        </div>


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

    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            // 1. Image Preview Logic
            $('#tfcl_avatar').change(function (e) {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#imagePreview').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
                $('#txtPath').val(this.files[0].name);
            });

            // 2. AJAX Form Submit
            $('#profileUpdateForm').on('submit', function (e) {
                e.preventDefault();

                let formData = new FormData(this);
                $('#submitBtn').text('Updating...').prop('disabled', true);
                $('.error-text').text(''); // Clear previous errors

                $.ajax({
                    url: "{{ route('admin.profile.update') }}", // Apna route check kar lena
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $('#submitBtn').text('Save Changes').prop('disabled', false);
                        // Status Bar Show Karein
                        $('#status-message').removeClass('error-bg').fadeIn();
                        $('#msg-text').text('Profile Updated Successfully.');

                        // 5 second baad khud gayab ho jaye
                        setTimeout(function () {
                            $('#status-message').fadeOut();
                        }, 5000);

                        // Page top par scroll karein taake message dikhe
                        $('html, body').animate({scrollTop: $(".admin-title").offset().top - 20}, 500);
                    },
                    error: function (xhr) {
                        $('#submitBtn').text('Save Changes').prop('disabled', false);
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function (key, value) {
                                $('.' + key + '_error').text(value[0]);
                            });

                            // Error Message Bar
                            $('#status-message').addClass('error-bg').fadeIn();
                            $('#msg-text').text('Validation failed! Please check the highlighted fields.');
                        } else {
                            $('#status-message').addClass('error-bg').fadeIn();
                            $('#msg-text').text('Something went wrong! Please try again later.');
                        }
                    }
                });
            });
        });
    </script>
@endpush