@extends('layouts.app')

@section('title', 'Edit Profile - Tiqkets')
@section('page-title', 'Edit Profile')

@section('header-action')
    <button type="submit" form="profileForm" class="btn btn-primary px-4">
        <i class="bi bi-check-circle me-2"></i>Save Changes
    </button>
    <a href="{{ route('profile.cancel.redirect') }}" class="btn btn-outline-secondary px-4">
        <i class="bi bi-x-circle me-2"></i>Cancel
    </a>

@endsection

@section('content')
    <div class="container-fluid">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4 shadow-sm" role="alert">
                <i class="bi bi-check-circle-fill me-2"></i>
                <strong>Success!</strong> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form id="profileForm" action="{{ route('profile.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row g-4">
                {{-- Profile Picture Section - Advanced Design --}}
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-4">
                            <h5 class="card-title mb-4">
                                <i class="bi bi-person-circle me-2 text-primary"></i>Profile Picture
                            </h5>

                            <div class="row align-items-center">
                                {{-- Avatar Preview Column --}}
                                <div class="col-md-4 text-center">
                                    <div class="position-relative d-inline-block imagez">
                                        <img id="avatarPreview"
                                            src="{{ $user->avatar ? asset('uploads/profile/' . $user->avatar) : asset('assest/images/user.jpg') }}"
                                            class="rounded-circle shadow-lg border border-3 border-white"
                                            style="width: 180px; height: 180px; object-fit: cover;" alt="Profile Picture">
                                        <div class="position-absolute bottom-0 end-0 bg-white rounded-circle p-2 shadow"
                                            style="margin-right: 10px; margin-bottom: 10px;">
                                            <i class="bi bi-camera-fill text-primary fs-5"></i>
                                        </div>
                                    </div>
                                </div>

                                {{-- Upload Controls Column --}}
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">Choose New Picture</label>

                                        {{-- Custom File Input Button --}}
                                        <div class="d-flex gap-2 mb-3">
                                            <button type="button" class="btn btn-outline-primary"
                                                onclick="document.getElementById('avatarInput').click()">
                                                <i class="bi bi-upload me-2"></i>Upload Image
                                            </button>
                                            {{-- <button type="button" class="btn btn-outline-danger" id="removeAvatar">
                                                <i class="bi bi-trash me-2"></i>Remove
                                            </button> --}}
                                        </div>

                                        {{-- Hidden File Input --}}
                                        <input type="file" class="d-none @error('avatar') is-invalid @enderror"
                                            name="avatar" id="avatarInput" accept="image/jpeg,image/png,image/webp">
                                    </div>

                                    {{-- File Info Display --}}
                                    <div class="alert alert-light border mb-3" id="fileInfoBox" style="display: none;">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-file-earmark-image text-primary fs-4 me-3"></i>
                                            <div class="flex-grow-1">
                                                <div class="fw-semibold" id="avatarFileName"></div>
                                                <small class="text-muted" id="avatarFileSize"></small>
                                            </div>
                                            <i class="bi bi-check-circle-fill text-success fs-4"></i>
                                        </div>
                                    </div>

                                    {{-- Current File Info --}}
                                    @if ($user->avatar)
                                        <div class="alert alert-primary border-0 mb-3">
                                            <i class="bi bi-info-circle me-2"></i>
                                            <small>Current file: <strong>{{ $user->avatar }}</strong></small>
                                        </div>
                                    @endif

                                    {{-- Error Display --}}
                                    <div id="avatarError" class="alert alert-danger border-0" style="display: none;"></div>

                                    @error('avatar')
                                        <div class="alert alert-danger border-0">
                                            <i class="bi bi-exclamation-triangle me-2"></i>{{ $message }}
                                        </div>
                                    @enderror

                                    {{-- Guidelines --}}
                                    <div class="small text-muted">
                                        <i class="bi bi-lightbulb me-1"></i>
                                        <strong>Requirements:</strong>
                                        <ul class="mb-0 mt-2">
                                            <li>Allowed formats: JPG, PNG, WEBP</li>
                                            <li>Maximum file size: 2 MB</li>
                                            <li>Recommended: Square image (1:1 ratio)</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Personal Information Section --}}
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-body p-4">
                            <h5 class="card-title mb-4">
                                <i class="bi bi-person-badge me-2 text-primary"></i>Personal Information
                            </h5>

                            <div class="row g-3">
                                {{-- Name --}}
                                <div class="col-12 col-md-6">
                                    <label class="form-label fw-semibold">
                                        Full Name <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light">
                                            <i class="bi bi-person"></i>
                                        </span>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            name="name" placeholder="Enter your full name"
                                            value="{{ old('name', $user->name) }}" required>
                                    </div>
                                    @error('name')
                                        <small class="text-danger">
                                            <i class="bi bi-exclamation-circle me-1"></i>{{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                {{-- Phone --}}
                                <div class="col-12 col-md-6">
                                    <label class="form-label fw-semibold">
                                        Phone Number <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light">
                                            <i class="bi bi-telephone"></i>
                                        </span>
                                        <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                            name="phone" placeholder="Enter your phone number"
                                            value="{{ old('phone', $user->phone) }}" required>
                                    </div>
                                    @error('phone')
                                        <small class="text-danger">
                                            <i class="bi bi-exclamation-circle me-1"></i>{{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                {{-- Email (readonly) --}}
                                <div class="col-12">
                                    <label class="form-label fw-semibold">
                                        Email Address <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light">
                                            <i class="bi bi-envelope"></i>
                                        </span>
                                        <input type="email" class="form-control bg-light" name="email"
                                            placeholder="Enter your email address"
                                            value="{{ old('email', $user->email) }}" readonly>
                                        <span class="input-group-text bg-light">
                                            <i class="bi bi-lock-fill text-muted" title="Cannot be changed"></i>
                                        </span>
                                    </div>
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle me-1"></i>Email address cannot be changed
                                    </small>
                                </div>

                                {{-- Branch Information – only for role 3 --}}
                                @if (auth()->user()->role == 3 || auth()->user()->role == 8)
                                    {{-- <hr class="my-4"> --}}

                                    <h5 class="card-title mt-5">
                                        <i class="bi bi-building me-2 text-primary"></i>Tenant Information
                                    </h5>

                                    <div class="row g-3">
                                        <div class="col-12 col-md-6">
                                            <label class="form-label fw-semibold">
                                                Tenant Name <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" name="tenant_name" class="form-control"
                                                value="{{ old('tenant_name', $user->tenant->tenant_name) }}"
                                                placeholder="Enter Tenant name">
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="form-label fw-semibold">
                                                Branch Contact Name <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" name="contact_person_name" class="form-control"
                                                value="{{ old('contact_person_name', $user->tenant->contact_person_name) }}"
                                                placeholder="Enter contact person name">
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="form-label fw-semibold">
                                                Branch Contact Phone <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" name="contact_person_phone" class="form-control"
                                                value="{{ old('contact_person_phone', $user->tenant->contact_person_phone) }}"
                                                placeholder="Enter contact phone">
                                            @error('contact_person_phone')
                                                <small class="text-danger">
                                                    <i class="bi bi-exclamation-circle me-1"></i>{{ $message }}
                                                </small>
                                            @enderror
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="form-label fw-semibold">
                                                Branch Contact Email <span class="text-danger">*</span>
                                            </label>
                                            <input type="email" name="contact_person_email" class="form-control"
                                                value="{{ old('contact_person_email', $user->tenant->contact_person_email) }}"
                                                placeholder="Enter contact email">
                                        </div>


                                    </div>
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        const avatarInput = document.getElementById('avatarInput');
        const avatarPreview = document.getElementById('avatarPreview');
        const avatarFileName = document.getElementById('avatarFileName');
        const avatarFileSize = document.getElementById('avatarFileSize');
        const avatarError = document.getElementById('avatarError');
        const fileInfoBox = document.getElementById('fileInfoBox');
        // const removeBtn = document.getElementById('removeAvatar');

        const MAX_SIZE_MB = 2;
        const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
        const DEFAULT_AVATAR = "{{ asset('assest/images/user.jpg') }}";

        // File input change handler
        avatarInput.addEventListener('change', function(e) {
            const file = e.target.files[0];

            // Reset displays
            avatarError.style.display = 'none';
            fileInfoBox.style.display = 'none';
            avatarError.textContent = '';
            avatarFileName.textContent = '';
            avatarFileSize.textContent = '';

            if (!file) {
                return;
            }

            // Type validation
            if (!ALLOWED_TYPES.includes(file.type)) {
                showError('Only JPG, PNG or WEBP images are allowed.');
                avatarInput.value = '';
                return;
            }

            // Size validation
            const sizeMb = (file.size / (1024 * 1024)).toFixed(2);
            if (file.size > MAX_SIZE_MB * 1024 * 1024) {
                showError(`File is too large (${sizeMb} MB). Maximum size is ${MAX_SIZE_MB} MB.`);
                avatarInput.value = '';
                return;
            }

            // Display file info
            avatarFileName.textContent = file.name;
            avatarFileSize.textContent = `Size: ${sizeMb} MB`;
            fileInfoBox.style.display = 'block';

            // Preview image with smooth transition
            const reader = new FileReader();
            reader.onload = function(e) {
                avatarPreview.style.opacity = '0.5';
                setTimeout(() => {
                    avatarPreview.src = e.target.result;
                    avatarPreview.style.opacity = '1';
                }, 200);
            };
            reader.readAsDataURL(file);
        });

        // Remove avatar button
        // removeBtn.addEventListener('click', function() {
        //     if (confirm('Are you sure you want to remove your profile picture?')) {
        //         avatarInput.value = '';
        //         avatarPreview.src = DEFAULT_AVATAR;
        //         fileInfoBox.style.display = 'none';
        //         avatarError.style.display = 'none';

        //         // Add a hidden input to signal avatar removal to backend
        //         let removeInput = document.querySelector('input[name="remove_avatar"]');
        //         if (!removeInput) {
        //             removeInput = document.createElement('input');
        //             removeInput.type = 'hidden';
        //             removeInput.name = 'remove_avatar';
        //             removeInput.value = '1';
        //             document.getElementById('profileForm').appendChild(removeInput);
        //         }
        //     }
        // });

        // Error display helper
        function showError(message) {
            avatarError.textContent = message;
            avatarError.style.display = 'block';
        }

        // Add smooth transitions
        avatarPreview.style.transition = 'opacity 0.3s ease';

        // Click on avatar image → open file upload
        document.querySelectorAll('.imagez').forEach(el => {
            el.addEventListener('click', function() {
                document.getElementById('avatarInput').click();
            });
        });
    </script>

    <style>
        .card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
        }

        .input-group-text {
            border-right: none;
        }

        .input-group .form-control {
            border-left: none;
        }

        .input-group .form-control:focus {
            border-color: #ced4da;
            box-shadow: none;
        }

        .input-group .form-control:focus+.input-group-text,
        .input-group-text+.form-control:focus {
            border-color: #86b7fe;
        }

        .btn {
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .rounded-circle {
            transition: transform 0.3s ease;
        }

        .rounded-circle:hover {
            transform: scale(1.05);
        }

        .alert {
            border-radius: 0.5rem;
        }

        .alert-primary {
            background: #8C1867;
            color: #ffff;
        }
    </style>
@endpush