@extends('layouts.app')

@section('content')
<div class="content-wrapper py-4">
    <div class="container-fluid">
        <div class="row g-4">

            
            <div class=" d-flex justify-content-between align-items-center flex-wrap mb-3 gap-2 py-3">
                <h4 class="mb-0">Account Management </h4>
            </div>
            
            <!-- LEFT PANEL -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if (session('photo_success'))
                <div class="alert alert-success alert-dismissible fade show py-2" role="alert">
                    <i class="bi bi-check-circle-fill me-1"></i> {{ session('photo_success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            <div class="col-lg-4">
                <div class="card shadow-sm">
                    <div class="card-body text-center">

                        <h6 class="text-muted mb-3 text-start">Profile Image</h6>

                        <!-- Profile Image -->
                        <form method="POST"
                            action="#"
                            enctype="multipart/form-data"
                            id="photoUploadForm">
                            @csrf
                            @method('PUT')

                            <div class="position-relative mb-3" id="photoWrapper">

                                {{-- Preview Image --}}
                                <img id="photoPreview"
                                    src="{{ $directorProfile->profile_image
                                                ? Storage::url($directorProfile->profile_image)
                                                : asset("assets/images/default-avatar.jpg") }}"
                                    class="img-fluid rounded w-100"
                                    style="object-fit:cover; aspect-ratio:1/1;"
                                    alt="Profile Photo">

                                {{-- Remove button (only shown when photo exists) --}}
                                @if ($directorProfile->profile_image)
                                    <form method="POST"
                                        action="#"
                                        id="removePhotoForm"
                                        class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="btn btn-light btn-sm position-absolute top-0 end-0 m-2 rounded-circle shadow-sm"
                                                title="Remove photo"
                                                onclick="return confirm('Remove profile photo?')">
                                            <i class="mdi mdi-delete"></i>
                                        </button>
                                    </form>
                                @else
                                    <button type="button"
                                            id="removeTempBtn"
                                            class="btn btn-light btn-sm position-absolute top-0 end-0 m-2 rounded-circle shadow-sm d-none"
                                            title="Cancel selection">
                                        <i class="mdi mdi-delete"></i>
                                    </button>
                                @endif

                            </div>

                            {{-- Hidden file input --}}
                            <input type="file"
                                name="profile_photo"
                                id="profilePhotoInput"
                                accept="image/jpg,image/jpeg,image/png,image/webp"
                                class="d-none">

                            @error('profile_photo')
                                <div class="text-danger small mb-2">
                                    <i class="bi bi-exclamation-circle me-1"></i>{{ $message }}
                                </div>
                            @enderror

                            {{-- Upload trigger button --}}
                            <button type="button"
                                    class="btn btn-outline-secondary w-100 mb-2"
                                    id="selectPhotoBtn">
                                <i class="bi bi-cloud-arrow-up me-1"></i> Upload Photo
                            </button>

                            {{-- Save button — hidden until file is picked --}}
                            <button type="submit"
                                    class="btn btn-primary w-100 d-none"
                                    id="savePhotoBtn">
                                <span class="spinner-border spinner-border-sm d-none me-1" id="photoSpinner"></span>
                                <i class="bi bi-floppy me-1" id="saveIcon"></i> Save Photo
                            </button>

                        </form>

                        <hr class="my-4">
                        <!-- Change Password -->
                        <div class="text-start">
                            <form method="POST" action="#" id="passwordForm">
                                @csrf
                                @method('PUT')

                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Old Password</label>
                                    <div class="input-group">
                                        <input
                                            type="password"
                                            name="old_password"
                                            id="old_password"
                                            class="form-control @error('old_password') is-invalid @enderror"
                                            placeholder="Enter current password"
                                            required
                                            autocomplete="current-password"
                                        >
                                        <button class="btn btn-outline-secondary toggle-pw" type="button" data-target="old_password" tabindex="-1">
                                            <i class="mdi mdi-eye"></i>
                                        </button>
                                        @error('old_password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-semibold">New Password</label>
                                    <div class="input-group">
                                        <input
                                            type="password"
                                            name="new_password"
                                            id="new_password"
                                            class="form-control @error('new_password') is-invalid @enderror"
                                            placeholder="Enter new password"
                                            required
                                            autocomplete="new-password"
                                            oninput="checkStrength(this.value)"
                                        >
                                        <button class="btn btn-outline-secondary toggle-pw" type="button" data-target="new_password" tabindex="-1">
                                            <i class="mdi mdi-eye"></i>
                                        </button>
                                        @error('new_password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    {{-- Strength bar --}}
                                    <div class="mt-2">
                                        <div class="progress" style="height:5px;">
                                            <div id="strengthBar" class="progress-bar" role="progressbar" style="width:0%;transition:width .3s,background-color .3s;"></div>
                                        </div>
                                        <small id="strengthLabel" class="text-muted"></small>
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fw-semibold">Confirm New Password</label>
                                    <div class="input-group">
                                        <input
                                            type="password"
                                            name="new_password_confirmation"
                                            id="new_password_confirmation"
                                            class="form-control"
                                            placeholder="Repeat new password"
                                            required
                                            autocomplete="new-password"
                                        >
                                        <button class="btn btn-outline-secondary toggle-pw" type="button" data-target="new_password_confirmation" tabindex="-1">
                                            <i class="mdi mdi-eye"></i>
                                        </button>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary w-100" id="submitBtn">
                                    <span class="spinner-border spinner-border-sm d-none me-2" id="spinner"></span>
                                    Change Password
                                </button>
                            </form>
                        </div>

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


            <!-- RIGHT PANEL -->
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-body">

                        <h6 class="text-muted mb-4">Profile Information</h6>

                        <form method="POST" action="#" id="profileDetails">
                            @csrf
                            @method('PUT')
                            <div class="row g-3" host.profile.update>

                                <!-- Username -->
                                <div class="col-md-6">
                                    <label class="form-label">Business_name</label>
                                    <input type="text" class="form-control" name="business_name" value="{{$directorProfile->business_name}}">
                                    @error('business_name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- First Name -->
                                <div class="col-md-6">
                                    <label class="form-label">Full Name</label>
                                    <input type="text" name="name" class="form-control" value="{{$user->name}}">
                                    @error('name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <!-- First Name -->
                                <div class="col-md-6">
                                    <label class="form-label">Email</label>
                                    <input type="text" name="email" class="form-control" value="{{$user->email}}">
                                    @error('email')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Phone Number</label>
                                    <input type="text" name="phone" class="form-control" value="{{$directorProfile->phone}}">
                                    @error('phone')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <!-- First Name -->
                                <div class="col-md-6">
                                    <label class="form-label">Tax Number</label>
                                    <input type="text" name="tax_id" class="form-control" value="{{$directorProfile->tax_id}}">
                                    @error('tax_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <!-- First Name -->
                                <div class="col-md-6">
                                    <label class="form-label">Contact Person</label>
                                    <input type="text" name="contact_person" class="form-control" value="{{$directorProfile->contact_person}}">
                                    @error('contact_person')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label">Address</label>
                                    <textarea class="form-control" name="business_address" rows="4">{{$directorProfile->business_address}}</textarea>
                                    @error('business_address')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>

                            <hr class="my-4">

                            <h6 class="text-muted mb-3">About the User</h6>

                            <div class="mb-3">
                                <label class="form-label">Biographical Info</label>
                                <textarea class="form-control" name="bio" rows="4">{{$directorProfile->bio}}</textarea>
                                @error('bio')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="text-end">
                                <button class="btn btn-primary px-4">
                                    Save Changes
                                </button>
                            </div>

                        </form>

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

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


<script>
// Toggle password visibility
document.querySelectorAll('.toggle-pw').forEach(btn => {
    btn.addEventListener('click', () => {
        const input = document.getElementById(btn.dataset.target);
        const icon  = btn.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('mdi-eye', 'mdi-eye-off');
        } else {
            input.type = 'password';
            icon.classList.replace('mdi-eye-off', 'mdi-eye');
        }
    });
});

// Password strength meter
function checkStrength(val) {
    const bar   = document.getElementById('strengthBar');
    const label = document.getElementById('strengthLabel');
    let score = 0;
    if (val.length >= 8)               score++;
    if (/[A-Z]/.test(val))             score++;
    if (/[a-z]/.test(val))             score++;
    if (/[0-9]/.test(val))             score++;
    if (/[^A-Za-z0-9]/.test(val))      score++;

    const levels = [
        { pct: '0%',   color: '',          text: '' },
        { pct: '25%',  color: '#dc3545',   text: 'Weak' },
        { pct: '50%',  color: '#fd7e14',   text: 'Fair' },
        { pct: '75%',  color: '#ffc107',   text: 'Good' },
        { pct: '100%', color: '#198754',   text: 'Strong' },
    ];
    const l = levels[Math.min(score, 4)];
    bar.style.width           = l.pct;
    bar.style.backgroundColor = l.color;
    label.textContent         = l.text;
    label.style.color         = l.color;
}

// Spinner on submit
document.getElementById('passwordForm').addEventListener('submit', () => {
    document.getElementById('spinner').classList.remove('d-none');
    document.getElementById('submitBtn').disabled = true;
});
</script>


<script>
(function () {
    const input       = document.getElementById('profilePhotoInput');
    const selectBtn   = document.getElementById('selectPhotoBtn');
    const saveBtn     = document.getElementById('savePhotoBtn');
    const removeTmp   = document.getElementById('removeTempBtn');
    const preview     = document.getElementById('photoPreview');
    const spinner     = document.getElementById('photoSpinner');
    const saveIcon    = document.getElementById('saveIcon');
    const originalSrc = preview.src;

    // Open file picker
    selectBtn.addEventListener('click', () => input.click());

    // Preview selected image
    input.addEventListener('change', () => {
        const file = input.files[0];
        if (!file) return;

        // Client-side size check (2MB)
        if (file.size > 2 * 1024 * 1024) {
            alert('Image must be 2MB or less.');
            input.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = e => {
            preview.src = e.target.result;
            saveBtn.classList.remove('d-none');
            if (removeTmp) removeTmp.classList.remove('d-none');
        };
        reader.readAsDataURL(file);
    });

    // Cancel selection (no existing photo case)
    if (removeTmp) {
        removeTmp.addEventListener('click', () => {
            input.value  = '';
            preview.src  = originalSrc;
            saveBtn.classList.add('d-none');
            removeTmp.classList.add('d-none');
        });
    }

    // Show spinner on submit
    document.getElementById('photoUploadForm').addEventListener('submit', () => {
        spinner.classList.remove('d-none');
        saveIcon.classList.add('d-none');
        saveBtn.disabled = true;
    });
})();
</script>
@endsection