@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Profile')
@section('page-title', 'My Profile')
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('customer.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-profile.svg') }}" alt="Profile" class="breadcrumb-icon">
            My Profile
        </li>
    </ol>
</nav>
@endsection

@section('content')
<!-- Profile Header -->
<div class="profile-header">
    <div class="profile-avatar-section">
        <div class="profile-avatar-container">
            @if ($customer->profile_photo_path)
            <img src="{{ $customer->profile_photo_path }}" alt="Profile Picture" class="profile-avatar-large"
                id="userProfileImg">
            @else
            <img src="{{ asset('backend/img/avatar.jpg') }}" alt="Profile Picture" class="profile-avatar-large">
            @endif
            <button class="btn btn-change-photo" data-bs-toggle="modal" data-bs-target="#changePhotoModal">
                <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Change"> Change Photo
            </button>
        </div>
    </div>
    <div class="profile-info-section">
        <h2 class="profile-name">{{ $customer->first_name }} {{ $customer->last_name }}</h2>
        <p class="profile-email">{{ $customer->email }}</p>
        <p class="profile-member-since">Member since {{ $customer->created_at->format('F Y') }}</p>
        <div class="profile-stats">
            <div class="stat-item">
                <span class="stat-number">{{ $customer->totalBookings() }}</span>
                <span class="stat-label">Total Bookings</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $customer->completedTours() }}</span>
                <span class="stat-label">Completed Tours</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">{{ $customer->totalSpent() }}</span>
                <span class="stat-label">Total Spent</span>
            </div>
        </div>
    </div>
</div>

<!-- Profile Content -->
<div class="row">
    <!-- Personal Information -->
    <div class="col-md-8">
        <form method="POST" class="profile-form" id="updateUserForm">
            @csrf
            @method('PUT')

            <div class="profile-section">
                <h3 class="section-title">
                    <img src="{{ asset('backend/img/ico/ico-profile.svg') }}" alt="Personal" class="section-icon">
                    Personal Information
                </h3>

                @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
                @endif

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="first_name" class="form-label">First Name *</label>
                            <input type="text" class="form-control @error('first_name') is-invalid @enderror"
                                id="first_name" name="first_name" value="{{ old('first_name', $customer->first_name) }}"
                                required>
                            @error('first_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="last_name" class="form-label">Last Name *</label>
                            <input type="text" class="form-control @error('last_name') is-invalid @enderror"
                                id="last_name" name="last_name" value="{{ old('last_name', $customer->last_name) }}"
                                required>
                            @error('last_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email" class="form-label">Email Address *</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                                name="email" value="{{ old('email', $customer->email) }}" style="background-color: #f5f5f5;" required readonly>
                            @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="phone" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" id="phone"
                                name="phone" value="{{ old('phone', $customer->phone) }}">
                            @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="date_of_birth" class="form-label">Date of Birth</label>
                            <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror"
                                id="date_of_birth" name="date_of_birth"
                                value="{{ old('date_of_birth', optional(optional($customer->customerDetails)->date_of_birth)->format('Y-m-d')) }}">
                            @error('date_of_birth')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="nationality" class="form-label">Nationality</label>
                            <select id="country_id" class="form-control">
                                <option value=""></option>
                                @foreach ($countries as $country)
                                <option
                                    value="{{ old('nationality', optional($customer->customerDetails)->country_id ?? '') }}"
                                    {{ old('nationality', optional($customer->customerDetails)->country_id ?? '') ==
                                    $country->id ? 'selected' : '' }}>
                                    {{ $country->name ?? '' }}</option>
                                @endforeach
                            </select>
                            @error('nationality')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                </div>
                <div class="form-group">
                    <label for="address" class="form-label">Address</label>
                    <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address"
                        rows="3">{{ old('address', optional($customer?->customerDetails)->address ?? '') }}</textarea>
                    @error('address')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                {{-- <div class="row">
                    <div class="col-md-4">
                        <label for="country">Country</label>
                        <select id="country_id" class="form-control">
                            <option value="">Select Country</option>
                            @foreach ($countries as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="city_id" class="form-label">City</label>
                            <select class="form-control @error('city_id') is-invalid @enderror" id="city_id"
                                name="city_id">
                                <option value="">Select City</option>
                            </select>
                            @error('city_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="area_id" class="form-label">Area</label>
                            <select class="form-control @error('area_id') is-invalid @enderror" id="area_id"
                                name="area_id">
                                <option value="">Select Area</option>
                            </select>
                            @error('area_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div> --}}
            </div>

            <!-- Emergency Contact -->
            <div class="profile-section">
                <h3 class="section-title">
                    <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Emergency" class="section-icon">
                    Emergency Contact
                </h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_name" class="form-label">Contact Name</label>
                            <input type="text" class="form-control @error('emergency_name') is-invalid @enderror"
                                id="emergency_name" name="emergency_name"
                                value="{{ old('emergency_name', optional($customer->customerDetails)->emergency_name ?? '') }}">
                            @error('emergency_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_relation" class="form-label">Relationship</label>
                            <input type="text" class="form-control @error('emergency_relation') is-invalid @enderror"
                                id="emergency_relation" name="emergency_relation"
                                value="{{ old('emergency_relation', optional($customer->customerDetails)->emergency_relation ?? '') }}">
                            @error('emergency_relation')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_phone" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control @error('emergency_phone') is-invalid @enderror"
                                id="emergency_phone" name="emergency_phone"
                                value="{{ old('emergency_phone', optional($customer->customerDetails)->emergency_phone ?? '') }}">
                            @error('emergency_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="emergency_email" class="form-label">Email Address</label>
                            <input type="email" class="form-control @error('emergency_email') is-invalid @enderror"
                                id="emergency_email" name="emergency_email"
                                value="{{ old('emergency_email', optional($customer->customerDetails)->emergency_email ?? '') }}">
                            @error('emergency_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            <!-- Travel Preferences -->
            <div class="profile-section">
                <h3 class="section-title">
                    <img src="{{ asset('backend/img/ico/ico-package.svg') }}" alt="Preferences" class="section-icon">
                    Travel Preferences
                </h3>

                <div class="row">
                    <!-- Preferred Language -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="preferredLanguage" class="form-label">Preferred Language</label>
                            <select name="preferred_language"
                                class="form-control @error('preferred_language') is-invalid @enderror"
                                id="preferredLanguage">
                                <option value="en" {{ old('preferred_language', optional($customer->
                                    customerDetails)->preferred_language ?? '')
                                    == 'en' ? 'selected' : '' }}>English</option>
                                <option value="bn" {{ old('preferred_language', optional($customer->
                                    customerDetails)->preferred_language ?? '')
                                    == 'bn' ? 'selected' : '' }}>Bengali</option>
                                <option value="hi" {{ old('preferred_language', optional($customer->
                                    customerDetails)->preferred_language ?? '')
                                    == 'hi' ? 'selected' : '' }}>Hindi</option>
                                <option value="ur" {{ old('preferred_language', optional($customer->
                                    customerDetails)->preferred_language ?? '')
                                    == 'ur' ? 'selected' : '' }}>Urdu</option>
                            </select>
                            @error('preferred_language')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Dietary Restrictions -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="dietaryRestrictions" class="form-label">Dietary Restrictions</label>
                            <select name="dietary_restrictions"
                                class="form-control @error('dietary_restrictions') is-invalid @enderror"
                                id="dietaryRestrictions">
                                <option value="none" {{ old('dietary_restrictions', optional($customer->
                                    customerDetails)->dietary_restrictions ?? '') == 'none' ? 'selected' : '' }}
                                    >None</option>
                                <option value="vegetarian" {{ old('dietary_restrictions', optional($customer->
                                    customerDetails)->dietary_restrictions ?? '') == 'vegetarian' ? 'selected' : '' }}
                                    >Vegetarian
                                </option>
                                <option value="vegan" {{ old('dietary_restrictions', optional($customer->
                                    customerDetails)->dietary_restrictions ?? '') == 'vegan' ? 'selected' : '' }}
                                    >Vegan</option>
                                <option value="halal" {{ old('dietary_restrictions', optional($customer->
                                    customerDetails)->dietary_restrictions ?? '') == 'halal' ? 'selected' : '' }}
                                    >Halal</option>
                                <option value="kosher" {{ old('dietary_restrictions', optional($customer->
                                    customerDetails)->dietary_restrictions ?? '') == 'kosher' ? 'selected' : ''
                                    }}>Kosher</option>
                            </select>
                            @error('dietary_restrictions')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Special Requests / Medical Conditions -->
                <div class="form-group">
                    <label for="specialRequests" class="form-label">Special Requests/Medical Conditions</label>
                    <textarea name="special_requests"
                        class="form-control @error('special_requests') is-invalid @enderror" id="specialRequests"
                        rows="3"
                        placeholder="Please mention any medical conditions, mobility requirements, or special requests...">{{ old('special_requests', optional($customer->customerDetails)->special_requests ?? '') }}</textarea>
                    @error('special_requests')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>


            <!-- Action Buttons -->
            <div class="profile-actions">
                <button type="submit" class="btn btn-save-profile" id="updateUser">
                    <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Save"> Save Changes
                </button>
                <a href="{{ route('customer.profile.download') }}" type="button" class="btn btn-save-profile">
                    <i class="bi bi-download"></i> Download Profile
                </a>
                <button type="reset" class="btn btn-cancel-profile">
                    Cancel
                </button>
            </div>
        </form>
    </div>

    <!-- Account Settings Sidebar -->
    <div class="col-md-4">
        <div class="profile-sidebar">
            <!-- Account Security -->
            <div class="sidebar-section">
                <h4 class="sidebar-title">
                    <img src="{{ asset('backend/img/ico/ico-payment.svg') }}" alt="Security" class="sidebar-icon">
                    Account Security
                </h4>
                <div class="sidebar-content">
                    <div class="security-item">
                        <span class="security-label">Change Your Password</span>
                        <button class="btn btn-change-password" data-bs-toggle="modal"
                            data-bs-target="#changePasswordModal">Change</button>
                    </div>

                    {{-- <div class="mt-3 security-item">
                        <span class="security-label">Two-Factor Authentication</span>
                        <span id="twoFactorStatus"
                            class="badge {{ $customer->two_factor_secret ? 'bg-success' : 'bg-secondary' }}"
                            data-bs-toggle="modal" data-bs-target="#twoFactorModal">
                            {{ $customer->two_factor_secret ? 'Enabled' : 'Disabled' }}
                        </span>
                    </div>

                    <div class="status-item security-item">
                        <span class="status-label">Email Verification</span>
                        @if ($customer->hasVerifiedEmail())
                        <span class="badge bg-success">Verified</span>
                        @else
                        <span class="badge bg-warning">Pending</span>
                        @endif
                    </div> --}}

                    <div class="security-item">
                        <span class="stat-label">Last Login</span>
                        <span class="stat-label">{{ $customer->last_login_at ?
                            $customer->last_login_at->format('M j, Y
                            g:i A') : 'Never' }}</span>
                    </div>
                </div>
            </div>

            <!-- Notification Settings -->
            <div class="sidebar-section">
                <h4 class="sidebar-title">
                    <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Notifications" class="sidebar-icon">
                    Notifications
                </h4>
                <form method="POST" action="#" id="notificationForm">
                    @csrf
                    <div class="sidebar-content">
                        <div class="notification-item">
                            <label class="notification-label">
                                <input type="checkbox" name="email_notifications" value="1" id="email_notifications" {{
                                    old('email_notifications',
                                    optional($customer->customerDetails)->email_notifications) ?
                                'checked' : '' }}>
                                Email Notifications
                            </label>
                        </div>
                        <div class="notification-item">
                            <label class="notification-label">
                                <input type="checkbox" name="marketing_updates" value="1" id="marketing_updates" {{
                                    old('marketing_updates', optional($customer->customerDetails)->marketing_updates) ?
                                'checked' : '' }}>
                                Marketing Updates
                            </label>
                        </div>
                        {{-- <div class="notification-item">
                            <label class="notification-label">
                                <input type="checkbox" name="subscribe_newsletter" {{ old('subscribe_newsletter',
                                    $customer->subscribe_newsletter) ? 'checked' : '' }}>
                                Newsletter Subscription
                            </label>
                        </div> --}}
                        <button type="submit" class="mt-2 btn btn-sm btn-primary" id="updateNotifications">Save
                            Preferences</button>
                    </div>
                </form>
            </div>

            <!-- Account Actions -->
            <div class="sidebar-section">
                <h4 class="sidebar-title">
                    <img src="{{ asset('backend/img/ico/ico-custom.svg') }}" alt="Account" class="sidebar-icon">
                    Account Actions
                </h4>
                <div class="sidebar-content">
                    <button class="btn btn-delete-account" data-bs-toggle="modal" data-bs-target="#deleteAccountModal">
                        <img src="{{ asset('backend/img/ico/ico-logout.svg') }}" alt="Delete"> Delete Account
                    </button>
                </div>
            </div>

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

<!-- Change Photo Modal -->
<div class="modal fade" id="changePhotoModal" tabindex="-1" aria-labelledby="changePhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="changePhotoForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="changePhotoModalLabel">Change Profile Photo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="profile_photo" class="form-label">Select New Photo</label>
                        <input type="file" class="form-control" id="profile_photo" name="profile_photo_path"
                            accept="image/*" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="uploadPhotoButton">
                        Upload Photo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Change Photo Modal -->
<div class="modal fade" id="changePhotoModal" tabindex="-1" aria-labelledby="changePhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('customer.profile.photo', $customer->id) }}"
                enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="changePhotoModalLabel">Change Profile Photo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="profile_photo" class="form-label">Select New Photo</label>
                        <input type="file" class="form-control" id="profile_photo" name="profile_photo"
                            accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Upload Photo</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Change Password Modal -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="changePasswordModalLabel">Change Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2 form-group">
                        <label for="current_password" class="form-label">Current Password</label>
                        <input type="password" class="form-control" id="current_password" name="current_password"
                            required>
                    </div>
                    <div class="mb-2 form-group">
                        <label for="new_password" class="form-label">New Password</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" required>
                    </div>
                    <div class="mb-2 form-group">
                        <label for="new_password_confirmation" class="form-label">Confirm New Password</label>
                        <input type="password" class="form-control" id="new_password_confirmation"
                            name="new_password_confirmation" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Change Password</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if (auth()->user()?->trashed())
<div class="modal fade show" id="restoreAccountModal" style="display:block;" aria-modal="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('customer.customer.restore') }}">
                @csrf
                <div class="modal-header">
                    {{-- <h5 class="text-white modal-title">Account Scheduled for Deletion</h5> --}}
                    <h5 class="text-white modal-title">Account Scheduled for Deletion</h5>
                </div>
                <div class="modal-body">
                    <p>Your account is scheduled for permanent deletion in 30 days.</p>
                    <p>You can restore it now to keep your data.</p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Restore Account</button>
                    <a href="{{ route('logout') }}" class="btn btn-secondary">Logout</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<!-- Delete Account Modal (Soft Delete) -->
<div class="modal fade" id="deleteAccountModal" tabindex="-1" aria-labelledby="deleteAccountModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h5 class="text-white modal-title" id="deleteAccountModalLabel">Delete Account</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-warning">
                        ⚠️ Are you sure you want to <strong>delete your account?</strong>.
                    </p>
                    {{-- <p class="text-warning">
                        ⚠️ This account will be <strong>temporarily deleted</strong> and scheduled for permanent
                        deletion in <strong>30 days</strong>.
                    </p> --}}
                    {{-- <p>You can restore it anytime within this period.</p> --}}
                    <div class="form-group">
                        <label for="confirm_password" class="form-label">Confirm Password</label>
                        <input type="password" name="confirm_password" id="confirm_password" class="form-control"
                            required placeholder="Enter your password">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Delete</button>
                    {{-- <button type="submit" class="btn btn-danger">Schedule Deletion</button> --}}
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Two-Factor Authentication Modal -->
<div class="modal fade" id="twoFactorModal" tabindex="-1" aria-labelledby="twoFactorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="text-white modal-title" id="twoFactorModalLabel">Two-Factor Authentication</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="twoFactorMessage">
                @if ($customer->two_factor_secret)
                <p class="text-success">✅ Two-Factor Authentication is currently <strong>enabled</strong>.</p>
                <p>If you disable it, your account will rely only on your password for login.</p>
                @else
                <p class="text-danger">⚠️ Two-Factor Authentication is currently <strong>disabled</strong>.</p>
                <p>Enabling it will add an extra layer of security to your account.</p>
                @endif
            </div>
            <div class="modal-footer">
                <button type="submit" id="toggleTwoFactor"
                    class="btn {{ $customer->two_factor_secret ? 'btn-danger' : 'btn-primary' }}"
                    data-action="{{ $customer->two_factor_secret ? 'disable' : 'enable' }}">
                    {{ $customer->two_factor_secret ? 'Disable 2FA' : 'Enable 2FA' }}
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

            document.getElementById('toggleTwoFactor').addEventListener('click', function() {
                let action = this.getAttribute('data-action');
                let userId = "{{ $customer->id }}";

                this.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
                this.disabled = true;

                axios.post(`{{ route('customer.profile.twofactor.toggle', $customer->id) }}`, {
                        action: action,
                        _token: "{{ csrf_token() }}"
                    })
                    .then(response => {
                        if (response.data.success) {

                            let statusBadge = document.getElementById('twoFactorStatus');
                            let btn = document.getElementById('toggleTwoFactor');
                            let msg = document.getElementById('twoFactorMessage');

                            if (response.data.two_factor_secret) {
                                statusBadge.classList.remove('bg-secondary');
                                statusBadge.classList.add('bg-success');
                                statusBadge.innerText = "Enabled";

                                btn.classList.remove('btn-primary');
                                btn.classList.add('btn-danger');
                                btn.innerText = "Disable 2FA";
                                btn.setAttribute('data-action', 'disable');

                                msg.innerHTML =
                                    `<p class="text-success">✅ Two-Factor Authentication is currently <strong>enabled</strong>.</p>
                                     <p>If you disable it, your account will rely only on your password for login.</p>`;
                            } else {
                                statusBadge.classList.remove('bg-success');
                                statusBadge.classList.add('bg-secondary');
                                statusBadge.innerText = "Disabled";

                                btn.classList.remove('btn-danger');
                                btn.classList.add('btn-primary');
                                btn.innerText = "Enable 2FA";
                                btn.setAttribute('data-action', 'enable');

                                msg.innerHTML = `<p class="text-danger">⚠️ Two-Factor Authentication is currently <strong>disabled</strong>.</p>
                                     <p>Enabling it will add an extra layer of security to your account.</p>`;
                            }

                            setTimeout(() => {
                                let modal = bootstrap.Modal.getInstance(document.getElementById(
                                    'twoFactorModal'));
                                modal.hide();
                            }, 800);
                        }
                    })
                    .catch(error => {
                        alert("Something went wrong! " + error.response?.data?.message ?? error
                            .message);
                    })
                    .finally(() => {
                        this.disabled = false;
                        this.innerText = action === "enable" ? "Enable 2FA" : "Disable 2FA";
                    });
            });

            const notificationForm = document.getElementById('notificationForm');
            const saveBtn = document.getElementById('updateNotifications');
            const updateNotificationsUrl = "{{ route('customer.profile.notifications', $customer->id) }}";

            notificationForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const originalText = saveBtn.innerHTML;
                saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
                saveBtn.disabled = true;

                const formData = new FormData(notificationForm);
                formData.append('_method', 'PUT');

                axios.post(updateNotificationsUrl, formData)
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || "Preferences saved successfully!");
                        } else {
                            toastr.error(response.data.message || "Failed to save preferences.");
                        }
                    })
                    .catch(error => {
                        toastr.error(error.response?.data?.message ||
                            "An error occurred while saving preferences.");
                    })
                    .finally(() => {
                        saveBtn.innerHTML = originalText;
                        saveBtn.disabled = false;
                    });
            });



            // updateUserForm
            const updateUserForm = document.getElementById("updateUserForm");
            updateUserForm.addEventListener("submit", function(e) {
                e.preventDefault();
                clearErrors();

                const formData = new FormData(updateUserForm);

                const originalText = updateUserForm.querySelector("button[type='submit']").innerHTML;
                updateUserForm.querySelector("button[type='submit']").innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
                updateUserForm.querySelector("button[type='submit']").disabled = true;

                const updateUserFormUrl = `{{ route('customer.customer.update', $customer->id) }}`;

                axios.post(updateUserFormUrl, formData)
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || "Profile updated successfully!");
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || "Failed to update profile.");
                        }
                    })
                    .catch(error => {
                        toastr.error(error.response?.data?.message || "Failed to update profile.");
                    })
                    .finally(() => {
                        updateUserForm.querySelector("button[type='submit']").innerHTML = originalText;
                        updateUserForm.querySelector("button[type='submit']").disabled = false;
                    });
            });

            const deleteAccountModal = document.getElementById("deleteAccountModal");
            const deleteForm = deleteAccountModal.querySelector("form");
            const deleteBtn = deleteForm.querySelector("button[type='submit']");
            const passwordInput = document.getElementById("confirm_password");

            const deleteUserUrl = "{{ route('customer.customer.destroy', $customer->id) }}";

            deleteForm.addEventListener("submit", function(e) {
                e.preventDefault();
                clearErrors();

                const password = passwordInput.value.trim();
                if (!password) {
                    showError(passwordInput, "Password is required.");
                    return;
                }

                const originalText = deleteBtn.innerHTML;
                deleteBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
                deleteBtn.disabled = true;

                axios.delete(deleteUserUrl, {
                        data: {
                            confirm_password: password
                        }
                    })
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || "Account scheduled for deletion!");
                            setTimeout(() => {
                                window.location.href = "{{ url('customer/login') }}";
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || "Failed to delete account.");
                        }
                    })
                    .catch(error => {
                        if (error.response?.data?.errors?.confirm_password) {
                            showError(passwordInput, error.response.data.errors.confirm_password[0]);
                        } else if (error.response?.data?.message) {
                            toastr.error(error.response.data.message);
                        } else {
                            toastr.error("Something went wrong!");
                        }
                    })
                    .finally(() => {
                        deleteBtn.innerHTML = originalText;
                        deleteBtn.disabled = false;
                    });
            });

            function clearErrors() {
                deleteForm.querySelectorAll('.error-message').forEach(el => el.remove());
            }

            function showError(input, message) {
                if (!input) return;
                let errorEl = input.parentElement.querySelector('.error-message');
                if (!errorEl) {
                    errorEl = document.createElement('div');
                    errorEl.classList.add('error-message', 'text-danger', 'mt-1');
                    input.parentElement.appendChild(errorEl);
                }
                errorEl.textContent = message;
            }




            const changePasswordModal = document.getElementById("changePasswordModal");
            const changePasswordForm = changePasswordModal.querySelector("form");
            const submitBtn = changePasswordForm.querySelector("button[type='submit']");

            changePasswordForm.addEventListener("submit", function(e) {
                e.preventDefault();

                changePasswordForm.querySelectorAll('.error-message').forEach(el => el.remove());

                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Changing...';
                submitBtn.disabled = true;

                const formData = new FormData(changePasswordForm);
                formData.append('_method', 'PUT');

                const cngPwdUrl = `{{ route('customer.profile.update-password', $customer->id) }}`;

                axios.post(cngPwdUrl, formData)
                    .then(response => {
                        if (response.data.success) {
                            toastr.success(response.data.message || 'Password changed successfully!');
                            // Close modal after short delay
                            setTimeout(() => {
                                const modalInstance = bootstrap.Modal.getInstance(
                                    changePasswordModal);
                                modalInstance.hide();
                                changePasswordForm.reset();
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || 'Failed to change password.');
                        }
                    })
                    .catch(error => {
                        if (error.response?.data?.errors) {
                            const errors = error.response.data.errors;
                            Object.keys(errors).forEach(field => {
                                const input = changePasswordForm.querySelector(
                                    `[name="${field}"]`);
                                showError(input, errors[field][0]);
                            });
                        } else {
                            toastr.error(error.response?.data?.message || error.message ||
                                'Failed to change password.');
                        }
                    })
                    .finally(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    });
            });

            function showError(input, message) {
                if (!input) return;
                let errorEl = input.parentElement.querySelector('.error-message');
                if (!errorEl) {
                    errorEl = document.createElement('div');
                    errorEl.classList.add('error-message', 'text-danger', 'mt-1');
                    input.parentElement.appendChild(errorEl);
                }
                errorEl.textContent = message;
            }

            // change photo
            document.getElementById('changePhotoForm').addEventListener('submit', function(e) {
                e.preventDefault();

                let formData = new FormData(this);
                formData.append('_method', 'PUT');
                let uploadBtn = document.getElementById('uploadPhotoButton');
                let userId = "{{ $customer->id }}";
                const photoUrl = `{{ route('customer.profile.photo', $customer->id) }}`;

                uploadBtn.disabled = true;
                uploadBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Uploading...`;

                axios.post(photoUrl, formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                    .then(response => {

                        toastr.success(response.data.message || "Photo uploaded successfully!");

                        let modal = bootstrap.Modal.getInstance(document.getElementById(
                            'changePhotoModal'));
                        modal.hide();

                        console.log(response.data.data.profile_photo_path);

                        if (response.data.data.profile_photo_path) {
                            document.getElementById('userProfileImg').src = response.data.data.profile_photo_path;
                        }else{
                            window.location.reload();
                        }
                    })
                    .catch(error => {
                        toastr.error(error.response?.data?.message || "Upload failed!");
                    })
                    .finally(() => {
                        uploadBtn.disabled = false;
                        uploadBtn.innerHTML = `Upload Photo`;
                    });
            });




            // const countrySelect = document.getElementById('country_id');
            // const citySelect = document.getElementById('city_id');
            // const areaSelect = document.getElementById('area_id');

            // if (countrySelect) {
            //     countrySelect.addEventListener('change', function() {
            //         const countryId = this.value;
            //         citySelect.innerHTML = '<option value="">Select City</option>';
            //         areaSelect.innerHTML = '<option value="">Select Area</option>';

            //         if (countryId) {
            //             axios.get(`{{ url('admin/cities/all') }}?country_id=${countryId}`)
            //                 .then(response => {
            //                     if (response.data && Array.isArray(response.data.data)) {
            //                         response.data.data.forEach(city => {
            //                             const option = document.createElement('option');
            //                             option.value = city.id;
            //                             option.textContent = city.name;
            //                             citySelect.appendChild(option);
            //                         });
            //                     }
            //                 })
            //                 .catch(error => {
            //                     console.error('Error fetching cities:', error);
            //                 });

            //         }
            //     });
            // }

            // if (citySelect) {
            //     citySelect.addEventListener('change', function() {
            //         const cityId = this.value;

            //         areaSelect.innerHTML = '<option value="">Select Area</option>';

            //         if (cityId) {
            //             axios.get(`{{ url('admin/areas/all') }}?city_id=${cityId}`)
            //                 .then(response => {
            //                     if (response.data && Array.isArray(response.data.data)) {
            //                         response.data.data.forEach(area => {
            //                             const option = document.createElement('option');
            //                             option.value = area.id;
            //                             option.textContent = area.name;
            //                             areaSelect.appendChild(option);
            //                         });
            //                     }
            //                 })
            //                 .catch(error => {
            //                     console.error('Error fetching areas:', error);
            //                 });
            //         }
            //     });
            // }
        });
</script>

@endpush