@extends('Admin.layout')
@section('content')
    <div class="row fv-plugins-icon-container me-3">
        <!-- Account -->
        <div class="card m-3">
            <h4 class="mt-2">
                Profile
            </h4>
            <form id="updateProfile" method="POST" action="{{ route('updateProfile') }}" enctype="multipart/form-data"
                class="fv-plugins-bootstrap5 fv-plugins-framework">
                @csrf
                <div class="d-flex align-items-start align-items-sm-center gap-6  mt-2">
                    <img src="{{ !empty($user->profile_image) && file_exists(public_path($user->profile_image))
                        ? asset($user->profile_image)
                        : asset('assets/img/dp.jpg') }}"
                        alt="user-avatar" class="d-block w-px-100 h-px-100 rounded" id="uploadedAvatar">

                    <div class="button-wrapper">
                        <label for="upload" class="btn btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <i class="icon-base ti tabler-upload"></i>
                            &nbsp;&nbsp;
                            <span class=" d-sm-block">Upload</span>
                            <input type="file" id="upload" name="upload" class="account-file-input" hidden=""
                                accept="image/png, image/jpeg">
                        </label>
                    </div>
                </div>

                <div class="card-body pt-4">
                    <div class="row gy-4 gx-6 mb-6">
                        <div class="col-md-6 form-control-validation fv-plugins-icon-container">
                            <label for="firstName" class="form-label">First Name</label>
                            <input class="form-control" type="text" id="name" name="name"
                                value="{{ $user->name }}">
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label">E-mail</label>
                            <input class="form-control" type="text" id="email" name="email"
                                value="{{ $user->email }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="phoneNumber">Phone Number</label>

                            <input type="text" id="phone_number" name="phone_number" class="form-control"
                                value="{{ $user->phone_number }}">
                        </div>

                        <div class="col-md-6">
                            <label for="address" class="form-label">Address</label>
                            <input type="text" class="form-control" id="address" name="address"
                                value="{{ $user->address }}">
                        </div>



                        <div class="col-md-6">
                            <label for="payment_qr" class="form-label">
                                Payment QR Code
                            </label>

                            <input type="file" class="form-control" id="payment_qr" name="payment_qr"
                                accept="image/png, image/jpeg" onchange="previewImage(this, 'paymentQrPreview')">

                            <img id="paymentQrPreview"
                                src="{{ !empty($user->payment_qr) && file_exists(public_path($user->payment_qr)) ? asset($user->payment_qr) : '' }}"
                                class="mt-2 rounded {{ empty($user->payment_qr) ? 'd-none' : '' }}" width="120"
                                alt="Payment QR Preview">
                        </div>


                        <div class="col-md-6">
                            <label for="address_qr" class="form-label">
                                Address QR Code
                            </label>

                            <input type="file" class="form-control" id="address_qr" name="address_qr"
                                accept="image/png, image/jpeg" onchange="previewImage(this, 'addressQrPreview')">

                            <img id="addressQrPreview"
                                src="{{ !empty($user->address_qr) && file_exists(public_path($user->address_qr)) ? asset($user->address_qr) : '' }}"
                                class="mt-2 rounded {{ empty($user->address_qr) ? 'd-none' : '' }}" width="120"
                                alt="Address QR Preview">
                        </div>
                        <div class="col-md-6">
                            <label for="payment_mobile" class="form-label">
                                Payment Mobile Number (GPay / PhonePe)
                            </label>
                            <input type="text" class="form-control" id="payment_mobile" name="payment_mobile"
                                value="{{ $user->payment_mobile ?? '' }}" placeholder="Enter GPay / PhonePe number">
                        </div>



                    </div>

                    <div class="mt-2">
                        <div class="form-actions mt-4">
                            <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                                data-bs-target="#profile_submit">Save
                                Changes</button>
                            <button type="reset" class="btn btn-secondary">Cancel</button>
                        </div>
                    </div>
                    <input type="hidden">
            </form>
        </div>
        <!-- /Account -->
    </div>

    <div class="modal fade" id="profile_submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you confirm to submit ?</p>
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                        Yes, Sure
                    </button>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const input = document.getElementById("upload");
            const preview = document.getElementById("uploadedAvatar");

            input.addEventListener("change", function() {
                if (this.files && this.files[0]) {
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });

        document.getElementById('submit_btn').addEventListener('click', function(e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('updateProfile').submit();
        });
    </script>

    <script>
        function previewImage(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection