@extends('user.layouts.main')

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="settings">
            <div class="mb-4">
                <h4 class="page_title">Change details</h4>
            </div>
            <form action="{{ route('user.profile.update') }}" method="post" class="mb-5" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-6">
                        <img src="{{ getAvatar($user->image) }}" alt="User Image" srcset="{{ getAvatar($user->image) }}"
                            style="width: 100px; height: 100px;" class="img-thumbnail avatar_img shadow-none mb-3"
                            id="image-preview">
                        <div class="col-12 mb-3">
                            <label for="image" class="form-label">Profile Photo <span class="text-success">Prefer Size
                                    (100x100)px</span></label>
                            <input type="file" name="image" id="image" class="form-control shadow-none">
                        </div>
                    </div>
                    <div class="col-6">
                        <img src="{{ getAvatar($user->cover_image) }}" alt="User Image"
                            srcset="{{ getAvatar($user->cover_image) }}" style="width: 100px; height: 100px;"
                            class="img-thumbnail avatar_img shadow-none mb-3" id="cover-preview">
                        <div class="col-12 mb-3">
                            <label for="cover" class="form-label">Cover Photo <span class="text-success">Prefer Size
                                    (300x250)px</span></label>
                            <input type="file" name="cover_image" id="cover_image" class="form-control shadow-none">
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-6 mb-3">
                        <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="name" value="{{$user->name}}"
                            class="form-control shadow-none @error('field_name') border-danger @enderror" placeholder="Name"
                            required>
                        @error('name')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" name="email" id="email" value="{{$user->email}}"
                            class="form-control shadow-none @error('email') border-danger @enderror" placeholder="Email"
                            required>
                        @error('email')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                        <input type="text" name="phone" id="phone" value="{{$user->phone}}"
                            class="form-control shadow-none @error('phone') border-danger @enderror"
                            placeholder="Enter Your Phone" required>
                        @error('phone')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="address" class="form-label">Full Address <span
                                class="text-danger">*</span>@if($user->location_verified)
                                    <span class="badge bg-success">Verified</span>
                                @endif</label>
                        <input type="text" name="address" id="address" value="{{$user->address}}"
                            class="form-control shadow-none @error('address') border-danger @enderror"
                            placeholder="Example : Opp. NCS, American House Junction,East Legon,Accra,Ghana" required>
                        @error('address')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="col-md-12 py-3">

                        <hr>
                    </div>
                    <div class="mb-4">
                        <h4 class="page_title text-decoration-underline text-center">Document Verification</h4>
                    </div>

                    <!-- Trade License -->
                    <div class="col-md-6 mb-3">
                        <label for="verification_document" class="form-label">
                            Verification Document
                            @if(optional($user->verification)->document_verified)
                                <span class="badge bg-success">Verified</span>
                            @endif

                        </label>
                        <input type="file" name="verification_document" id="verification_document"
                            class="form-control shadow-none @error('verification_document') border-danger @enderror"
                            accept="application/pdf,image/*" onchange="previewDocument(event)">
                        <small class="text-muted">Upload your Ghana Card, Driver’s License, or Passport (PDF or
                            image).</small>

                        @error('verification_document')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                        <div class="mt-2">
                            <iframe id="documentPreview"
                                src="{{ $user->verification_document ? asset($user->verification_document) : '' }}"
                                style="width: 100%; height: 300px; display: {{ $user->verification_document ? 'block' : 'none' }};"
                                frameborder="0"></iframe>
                        </div>
                    </div>

                    <!-- 3-Star Full Photo -->
                    <div class="col-md-6 mb-3">
                        <label for="full_photo" class="form-label">
                            Full-Sized Photo Holding ID
                            @if(optional($user->verification)->photo_verified)
                                <span class="badge bg-success">Verified</span>
                            @endif
                        </label>
                        <input type="file" name="full_photo" id="full_photo"
                            class="form-control shadow-none @error('full_photo') border-danger @enderror" accept="image/*"
                            onchange="previewFullPhoto(event)">
                        <small class="text-muted">Upload a full-sized photo of yourself holding your Ghana Card, Passport,
                            or Driver’s License.</small>

                        @error('full_photo')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                        <div class="mt-2">
                            <img id="fullPhotoPreview" src="{{ $user->full_photo ? asset($user->full_photo) : '' }}"
                                style="width: 100%; height: auto; display: {{ $user->full_photo ? 'block' : 'none' }};" />
                        </div>
                    </div>
                    <div class="col-12 mt-3">
                        <div class="alert alert-info p-3" role="alert" style="font-size: 0.95rem;">
                            <strong>Note:</strong> All documents requested are solely for verification and credibility
                            ratings. Adding genuine docs adds 1Star credibility ratings to your profile. User data are kept
                            confidential. Deleted accounts automatically clear any user information from our
                            database.<br><br>
                            FallaaGH considers credibility and trust as the backbone of every business. Do not provide false
                            documents as it may lead to your account being banned. Thank you for being a valuable partner.
                        </div>
                    </div>

                    <div>
                        <button type="submit" class="btn btn-sm btn-primary py-21">Update Details</button>
                    </div>
                </div>
            </form>
            <div class="mb-4">
                <h4 class="page_title">Change password</h4>
            </div>
            <form action="{{route('user.password.update')}}" method="post">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="mb-3 col-md-6">
                        <label class="form-label d-block w-100">
                            Password <span class="text-danger">*</span>
                        </label>
                        <div class="input-group input-group-flat">
                            <input type="password" name="password" id="password-field"
                                class="form-control shadow-none @error('password') border-danger @enderror"
                                placeholder="Password (at least 6 characters)" autocomplete="off" required>

                            <span class="input-group-text bg-transparent">
                                <a href="javascript:void(0)"
                                    class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                    toggle="#password-field">
                                </a>
                            </span>
                        </div>
                        @error('password')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div class="mb-3 col-md-6">
                        <label class="form-label d-block w-100">
                            Confirm Password <span class="text-danger">*</span>
                        </label>
                        <div class="input-group input-group-flat">
                            <input type="password" name="password_confirmation" id="confirm-toggle-password"
                                class="form-control shadow-none @error('password_confirmation') border-danger @enderror"
                                placeholder="Confirm password" autocomplete="off" required>

                            <span class="input-group-text bg-transparent">
                                <a href="javascript:void(0)"
                                    class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                    toggle="#confirm-toggle-password">
                                </a>
                            </span>
                        </div>
                        @error('password_confirmation')
                            <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                    <div>
                        <button type="submit" class="btn btn-secondary btn-sm py-21">Change password</button>
                    </div>
                </div>
            </form>

            <div class="mb-4 mt-5">
                <h4 class="page_title text-danger">Delete Account</h4>
            </div>

            <div class="alert alert-warning p-3" style="font-size: 0.95rem;">
                <strong>Before you proceed:</strong><br>
                Deleting your account will deactivate it immediately, but your data will be permanently
                removed after <strong>30 days</strong>.
                <br><br>
                You may restore your account within these 30 days by simply logging in and canceling the
                deletion request. After 30 days, your account cannot be recovered.
            </div>

            <!-- Delete Button -->
            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteAccountModal">
                Delete My Account
            </button>

            <!-- Delete Confirmation Modal -->
            <div class="modal fade" id="deleteAccountModal" tabindex="-1" aria-labelledby="deleteAccountLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title text-danger" id="deleteAccountLabel">Confirm Account Deletion</h5>
                            <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <p class="mb-2">
                                Are you sure you want to delete your account?
                            </p>
                            <p class="text-danger fw-bold">
                                This will deactivate your account immediately.
                            </p>
                            <p>
                                You can still restore it within the next <strong>30 days</strong> by logging in again.
                                After that, all your data will be permanently deleted.
                            </p>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm shadow-none"
                                data-bs-dismiss="modal">Cancel</button>

                            <form action="{{ route('user.account.delete') }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm shadow-none">
                                    Yes, Delete My Account
                                </button>
                            </form>
                        </div>

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

        </div>
    </div>
@endsection
@push('scripts')

    <script>
        function previewDocument(event) {
            const frame = document.getElementById('documentPreview');
            frame.src = URL.createObjectURL(event.target.files[0]);
            frame.style.display = 'block';
        }

        function previewFullPhoto(event) {
            const img = document.getElementById('fullPhotoPreview');
            img.src = URL.createObjectURL(event.target.files[0]);
            img.style.display = 'block';
        }
    </script>
    <script>
        $(document).ready(function () {
            // Listen for changes in the file input
            $("#image").change(function () {
                let appendElement = $("#image-preview");
                readURL(this, appendElement);
            });
            $("#cover").change(function () {
                let appendElement = $("#cover-preview");
                readURL(this, appendElement);
            });
        });

        // Function to display the selected image in the preview container
        function readURL(input, appendElement) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    console.log(e.target.result)
                    appendElement.attr("src", e.target.result);
                    appendElement.attr("srcset", e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
    <script>
        function previewLicense(event) {
            const file = event.target.files[0];
            const preview = document.getElementById('licensePreview');

            if (file && file.type === "application/pdf") {
                const url = URL.createObjectURL(file);
                preview.src = url;
                preview.style.display = 'block';
            } else {
                preview.src = '';
                preview.style.display = 'none';
            }
        }
    </script>
@endpush