@extends('theme.layout')

@section('title',"Update Student Profile")
@push('styles')
    <style>
        /* ===== Student Profile Update Section ===== */
        .sec-profile-update {
            background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            padding: 60px 0;
        }

        .sec-profile-update::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,217,102,0.1) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            z-index: 0;
        }

        .container {
            position: relative;
            z-index: 1;
        }

        /* Page Header */
        .page-header {
            margin-bottom: 40px;
            text-align: center;
        }

        .page-title {
            color: #0b1f3b;
            font-size: 2.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, #0b1f3b 0%, #2a4a7a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

        .title-decoration {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .title-decoration span {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #ffd966, #ffb347);
            border-radius: 50px;
        }

        .title-decoration i {
            color: #ffd966;
            font-size: 1.5rem;
            animation: spin 4s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Profile Card */
        .profile-card {
            background: white;
            border-radius: 50px;
            padding: 50px;
            box-shadow: 0 30px 70px rgba(11,31,59,0.15);
            border: 1px solid rgba(255,217,102,0.3);
            transition: all 0.3s ease;
            max-width: 1000px;
            margin: 0 auto;
        }

        .profile-card:hover {
            box-shadow: 0 40px 90px rgba(11,31,59,0.2);
        }

        /* Profile Header with Avatar */
        .profile-header {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 3px dashed #eef2f7;
            flex-wrap: wrap;
        }

        .avatar-section {
            position: relative;
            display: inline-block;
        }

        .profile-avatar {
            width: 130px;
            height: 130px;
            border-radius: 40px;
            object-fit: cover;
            border: 5px solid #ffd966;
            padding: 5px;
            background: white;
            box-shadow: 0 20px 40px rgba(255,217,102,0.3);
            transition: all 0.3s ease;
        }

        .profile-avatar:hover {
            transform: scale(1.05);
        }

        .avatar-upload {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: linear-gradient(135deg, #0b1f3b, #1e3a5f);
            width: 40px;
            height: 40px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 3px solid white;
            transition: all 0.3s ease;
        }

        .avatar-upload:hover {
            background: #ffd966;
            transform: scale(1.1);
        }

        .avatar-upload i {
            color: white;
            font-size: 1.2rem;
        }

        .avatar-upload:hover i {
            color: #0b1f3b;
        }

        .profile-title h2 {
            font-size: 2rem;
            font-weight: 800;
            color: #0b1f3b;
            margin-bottom: 5px;
        }

        .profile-title p {
            color: #6c757d;
            font-size: 1rem;
            margin: 0;
        }

        .profile-title p i {
            color: #ffd966;
            margin-right: 8px;
        }

        /* Form Styles */
        .form-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #0b1f3b;
            margin-bottom: 25px;
            padding-left: 15px;
            position: relative;
        }

        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 25px;
            background: linear-gradient(135deg, #ffd966, #ffb347);
            border-radius: 50px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            font-weight: 600;
            color: #0b1f3b;
            margin-bottom: 10px;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-label i {
            color: #ffd966;
            font-size: 1.1rem;
            width: 20px;
        }

        .required-star {
            color: #ff6b6b;
            margin-left: 5px;
            font-size: 1.2rem;
        }

        .form-control, .form-select {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #eef2f7;
            border-radius: 20px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
            color: #495057;
        }

        .form-control:focus, .form-select:focus {
            outline: none;
            border-color: #ffd966;
            box-shadow: 0 10px 25px rgba(255,217,102,0.2);
        }

        .form-control:hover, .form-select:hover {
            border-color: #ffd966;
        }

        /* Input Groups */
        .input-group-custom {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-group-custom i {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #ffd966;
            font-size: 1.2rem;
            z-index: 1;
        }

        .input-group-custom .form-control {
            padding-left: 55px;
        }

        /* Gender Options */
        .gender-wrapper {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .gender-option {
            flex: 1;
            min-width: 120px;
        }

        .gender-card {
            background: #f8f9fa;
            border: 2px solid #eef2f7;
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .gender-card:hover {
            border-color: #ffd966;
            background: white;
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255,217,102,0.15);
        }

        .gender-card.active {
            border-color: #ffd966;
            background: linear-gradient(135deg, rgba(255,217,102,0.1), rgba(255,180,70,0.1));
            box-shadow: 0 10px 25px rgba(255,217,102,0.2);
        }

        .gender-card i {
            font-size: 2.5rem;
            color: #0b1f3b;
        }

        .gender-card span {
            font-weight: 600;
            color: #0b1f3b;
        }

        .gender-card input[type="radio"] {
            display: none;
        }

        /* Address Grid */
        .address-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        @media (max-width: 576px) {
            .address-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Country Select with Flag */
        .country-select-wrapper {
            position: relative;
        }

        .selected-country-flag {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ffd966;
            pointer-events: none;
        }

        /* Form Actions */
        .form-actions {
            display: flex;
            gap: 20px;
            justify-content: flex-end;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 3px dashed #eef2f7;
        }

        .btn-primary-custom {
            background: linear-gradient(135deg, #0b1f3b, #1e3a5f);
            color: white;
            padding: 16px 40px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: none;
            box-shadow: 0 10px 25px rgba(11,31,59,0.2);
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-primary-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(11,31,59,0.3);
            color: #ffd966;
        }

        .btn-secondary-custom {
            background: white;
            color: #0b1f3b;
            padding: 16px 40px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 2px solid #ffd966;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-secondary-custom:hover {
            background: #ffd966;
            color: #0b1f3b;
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(255,217,102,0.3);
        }

        /* Progress Steps */
        .progress-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            position: relative;
        }

        .progress-steps::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 0;
            right: 0;
            height: 3px;
            background: #eef2f7;
            z-index: 0;
        }

        .step {
            position: relative;
            z-index: 1;
            background: white;
            padding: 0 20px;
            text-align: center;
        }

        .step-number {
            width: 50px;
            height: 50px;
            background: #eef2f7;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
            color: #0b1f3b;
            margin: 0 auto 10px;
            border: 3px solid white;
            transition: all 0.3s ease;
        }

        .step.active .step-number {
            background: linear-gradient(135deg, #ffd966, #ffb347);
            color: #0b1f3b;
            box-shadow: 0 10px 25px rgba(255,217,102,0.3);
        }

        .step.completed .step-number {
            background: #0b1f3b;
            color: #ffd966;
        }

        .step-label {
            font-weight: 600;
            color: #0b1f3b;
            font-size: 0.9rem;
        }

        /* Alert Messages */
        .alert-custom {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            border: none;
            border-radius: 20px;
            padding: 20px 30px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-left: 5px solid #28a745;
        }

        .alert-custom i {
            font-size: 1.5rem;
            color: #28a745;
        }

        .alert-custom.error {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            border-left-color: #dc3545;
        }

        .alert-custom.error i {
            color: #dc3545;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .page-title {
                font-size: 2rem;
            }

            .profile-card {
                padding: 25px;
                border-radius: 30px;
            }

            .profile-header {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }

            .profile-title {
                text-align: center;
            }

            .form-actions {
                flex-direction: column;
            }

            .btn-primary-custom, .btn-secondary-custom {
                width: 100%;
                justify-content: center;
            }

            .gender-wrapper {
                flex-direction: column;
            }
        }
    </style>
@endpush

@section('content')
    <!-- ================= STUDENT PROFILE UPDATE SECTION ================= -->
    <section class="sec-profile-update" style="margin-top: 60px;">
        <div class="container">

            <!-- Page Header -->
            <div class="page-header">
                <h1 class="page-title">Student Profile Update</h1>
                <div class="title-decoration">
                    <span></span>
                    <i class="fas fa-user-graduate"></i>
                    <span></span>
                </div>
                <p class="text-muted mt-3 fs-5">Keep your information up to date for better opportunities</p>
            </div>


            <!-- Success Alert (Hidden by default) -->
            <div class="alert-custom" id="successAlert" style="display: none;">
                <i class="fas fa-check-circle"></i>
                <div>
                    <strong>Success!</strong> Your profile has been updated successfully.
                </div>
            </div>

            <!-- Main Profile Form Card -->
            <div class="profile-card">
                <form id="profileUpdateForm" onsubmit="return handleProfileUpdate(event)">

                    <!-- Profile Header with Avatar -->
                    <div class="profile-header">
                        <div class="avatar-section">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde"
                                 alt="Profile Avatar"
                                 class="profile-avatar"
                                 id="profileAvatar">
                            <div class="avatar-upload" onclick="document.getElementById('avatarInput').click()">
                                <i class="fas fa-camera"></i>
                            </div>
                            <input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="previewAvatar(event)">
                        </div>

                        <div class="profile-title">
                            <h2>John Doe</h2>
                            <p><i class="fas fa-id-card"></i> Student ID: STU-2024-001</p>
                            <p><i class="fas fa-calendar-alt"></i> Member since: January 2024</p>
                        </div>
                    </div>

                    <!-- Personal Information Section -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="fas fa-user-circle me-2 text-warning"></i>
                            Personal Information
                        </h4>

                        <div class="row">
                            <!-- Full Name -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-user"></i>
                                        Full Name
                                        <span class="required-star">*</span>
                                    </label>
                                    <div class="input-group-custom">
                                        <i class="fas fa-user"></i>
                                        <input type="text" class="form-control" value="John Doe" placeholder="Enter your full name" required>
                                    </div>
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-envelope"></i>
                                        Email Address
                                        <span class="required-star">*</span>
                                    </label>
                                    <div class="input-group-custom">
                                        <i class="fas fa-envelope"></i>
                                        <input type="email" class="form-control" value="john.doe@example.com" placeholder="Enter your email" required>
                                    </div>
                                </div>
                            </div>

                            <!-- Phone -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-phone-alt"></i>
                                        Phone Number
                                        <span class="required-star">*</span>
                                    </label>
                                    <div class="input-group-custom">
                                        <i class="fas fa-phone-alt"></i>
                                        <input type="tel" class="form-control" value="+880 1712 345678" placeholder="Enter your phone number" required>
                                    </div>
                                </div>
                            </div>

                            <!-- Country -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-globe"></i>
                                        Country
                                        <span class="required-star">*</span>
                                    </label>
                                    <div class="country-select-wrapper">
                                        <select class="form-select" id="countrySelect" onchange="updateCountryFlag()" required>
                                            <option value="" disabled>Select your country</option>
                                            <option value="Bangladesh" data-flag="bd" selected>🇧🇩 Bangladesh</option>
                                            <option value="India" data-flag="in">🇮🇳 India</option>
                                            <option value="Pakistan" data-flag="pk">🇵🇰 Pakistan</option>
                                            <option value="Sri Lanka" data-flag="lk">🇱🇰 Sri Lanka</option>
                                            <option value="Nepal" data-flag="np">🇳🇵 Nepal</option>
                                            <option value="United States" data-flag="us">🇺🇸 United States</option>
                                            <option value="United Kingdom" data-flag="gb">🇬🇧 United Kingdom</option>
                                            <option value="Canada" data-flag="ca">🇨🇦 Canada</option>
                                            <option value="Australia" data-flag="au">🇦🇺 Australia</option>
                                            <option value="Malaysia" data-flag="my">🇲🇾 Malaysia</option>
                                            <option value="Singapore" data-flag="sg">🇸🇬 Singapore</option>
                                            <option value="UAE" data-flag="ae">🇦🇪 UAE</option>
                                            <option value="Saudi Arabia" data-flag="sa">🇸🇦 Saudi Arabia</option>
                                            <option value="Qatar" data-flag="qa">🇶🇦 Qatar</option>
                                            <option value="Kuwait" data-flag="kw">🇰🇼 Kuwait</option>
                                        </select>
                                        <img src="" alt="Flag" class="selected-country-flag" id="countryFlag" style="display: none;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Gender Selection Section -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="fas fa-venus-mars me-2 text-warning"></i>
                            Gender
                        </h4>

                        <div class="gender-wrapper">
                            <!-- Male -->
                            <label class="gender-option">
                                <div class="gender-card active" onclick="selectGender('male')" id="genderMale">
                                    <i class="fas fa-mars"></i>
                                    <span>Male</span>
                                    <input type="radio" name="gender" value="male" checked hidden>
                                </div>
                            </label>

                            <!-- Female -->
                            <label class="gender-option">
                                <div class="gender-card" onclick="selectGender('female')" id="genderFemale">
                                    <i class="fas fa-venus"></i>
                                    <span>Female</span>
                                    <input type="radio" name="gender" value="female" hidden>
                                </div>
                            </label>

                            <!-- Other -->
                            <label class="gender-option">
                                <div class="gender-card" onclick="selectGender('other')" id="genderOther">
                                    <i class="fas fa-genderless"></i>
                                    <span>Other</span>
                                    <input type="radio" name="gender" value="other" hidden>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- Address Section -->
                    <div class="form-section">
                        <h4 class="section-title">
                            <i class="fas fa-map-marker-alt me-2 text-warning"></i>
                            Address Information
                        </h4>

                        <div class="address-grid">
                            <!-- District -->
                            <div class="form-group">
                                <label class="form-label">
                                    <i class="fas fa-city"></i>
                                    District
                                    <span class="required-star">*</span>
                                </label>
                                <select class="form-select" required>
                                    <option value="" disabled>Select District</option>
                                    <option value="Dhaka" selected>Dhaka</option>
                                    <option value="Chittagong">Chittagong</option>
                                    <option value="Rajshahi">Rajshahi</option>
                                    <option value="Khulna">Khulna</option>
                                    <option value="Barisal">Barisal</option>
                                    <option value="Sylhet">Sylhet</option>
                                    <option value="Rangpur">Rangpur</option>
                                    <option value="Mymensingh">Mymensingh</option>
                                    <option value="Comilla">Comilla</option>
                                    <option value="Narayanganj">Narayanganj</option>
                                    <option value="Gazipur">Gazipur</option>
                                    <option value="Jessore">Jessore</option>
                                    <option value="Bogra">Bogra</option>
                                    <option value="Dinajpur">Dinajpur</option>
                                    <option value="Pabna">Pabna</option>
                                </select>
                            </div>

                            <!-- Thana/Upazila -->
                            <div class="form-group">
                                <label class="form-label">
                                    <i class="fas fa-map-pin"></i>
                                    Thana/Upazila
                                    <span class="required-star">*</span>
                                </label>
                                <select class="form-select" required>
                                    <option value="" disabled>Select Thana/Upazila</option>
                                    <option value="Dhanmondi" selected>Dhanmondi</option>
                                    <option value="Gulshan">Gulshan</option>
                                    <option value="Banani">Banani</option>
                                    <option value="Mirpur">Mirpur</option>
                                    <option value="Uttara">Uttara</option>
                                    <option value="Mohammadpur">Mohammadpur</option>
                                    <option value="Motijheel">Motijheel</option>
                                    <option value="Rampura">Rampura</option>
                                    <option value="Badda">Badda</option>
                                    <option value="Khilgaon">Khilgaon</option>
                                    <option value="Jatrabari">Jatrabari</option>
                                    <option value="Shyampur">Shyampur</option>
                                </select>
                            </div>

                            <!-- Full Address -->
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-home"></i>
                                        Full Address
                                        <span class="required-star">*</span>
                                    </label>
                                    <div class="input-group-custom">
                                        <i class="fas fa-home"></i>
                                        <textarea class="form-control" rows="3" placeholder="House No, Road No, Village/Area" required>House # 123, Road # 45, Dhanmondi, Dhaka</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="button" class="btn-secondary-custom" onclick="resetForm()">
                            <i class="fas fa-undo-alt"></i>
                            Reset Changes
                        </button>
                        <button type="submit" class="btn-primary-custom">
                            <i class="fas fa-save"></i>
                            Update Profile
                        </button>
                    </div>
                </form>
            </div>

            <!-- Additional Information Card -->
            <div class="row mt-5">
                <div class="col-md-4">
                    <div class="stat-card" style="background: white; border-radius: 30px; padding: 25px;">
                        <div class="stat-icon" style="background: rgba(255,217,102,0.2);">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h5 class="fw-bold mt-3">Privacy Protected</h5>
                        <p class="text-muted">Your information is secure with us</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card" style="background: white; border-radius: 30px; padding: 25px;">
                        <div class="stat-icon" style="background: rgba(255,217,102,0.2);">
                            <i class="fas fa-sync-alt"></i>
                        </div>
                        <h5 class="fw-bold mt-3">Real-time Updates</h5>
                        <p class="text-muted">Changes reflect immediately</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card" style="background: white; border-radius: 30px; padding: 25px;">
                        <div class="stat-icon" style="background: rgba(255,217,102,0.2);">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h5 class="fw-bold mt-3">24/7 Support</h5>
                        <p class="text-muted">We're here to help you</p>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- JavaScript -->
    <script>
        // Gender Selection
        function selectGender(gender) {
            // Remove active class from all
            document.getElementById('genderMale').classList.remove('active');
            document.getElementById('genderFemale').classList.remove('active');
            document.getElementById('genderOther').classList.remove('active');

            // Add active class to selected
            document.getElementById('gender' + gender.charAt(0).toUpperCase() + gender.slice(1)).classList.add('active');

            // Check the radio button
            document.querySelector(`input[name="gender"][value="${gender}"]`).checked = true;
        }

        // Avatar Preview
        function previewAvatar(event) {
            const reader = new FileReader();
            reader.onload = function() {
                const avatar = document.getElementById('profileAvatar');
                avatar.src = reader.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }

        // Country Flag Update
        function updateCountryFlag() {
            const select = document.getElementById('countrySelect');
            const flagImg = document.getElementById('countryFlag');
            const selectedOption = select.options[select.selectedIndex];

            if (selectedOption.value) {
                // In a real implementation, you'd set the flag image source
                // For demo, we'll show a placeholder
                flagImg.style.display = 'block';
                flagImg.src = `https://flagcdn.com/w40/${selectedOption.dataset.flag}.png`;
            } else {
                flagImg.style.display = 'none';
            }
        }

        // Form Submit Handler
        function handleProfileUpdate(event) {
            event.preventDefault();

            // Show success alert
            const alert = document.getElementById('successAlert');
            alert.style.display = 'flex';

            // Scroll to alert
            alert.scrollIntoView({ behavior: 'smooth', block: 'center' });

            // Hide after 5 seconds
            setTimeout(() => {
                alert.style.display = 'none';
            }, 5000);

            return false;
        }

        // Reset Form
        function resetForm() {
            if(confirm('Are you sure you want to reset all changes?')) {
                document.getElementById('profileUpdateForm').reset();

                // Reset gender to Male
                selectGender('male');

                // Reset country flag
                document.getElementById('countryFlag').style.display = 'none';
            }
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            // Set initial country flag
            updateCountryFlag();
        });
    </script>
@endsection