@extends('frontend.member.user_layouts')
@section('member-content')
    <style>
        /* Container */
        #profileContainer {
            max-width: 900px;
            margin: 30px auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            padding: 30px 40px;
            position: relative;
        }

        /* Edit button top right */
        #toggleEditBtn {
            position: absolute;
            top: 25px;
            right: 25px;
            padding: 10px 25px;
            background-color: #267bbd;
            color: white;
            border: none;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
            z-index: 10;
        }

        #toggleEditBtn:hover {
            background-color: #1f5e88;
        }

        /* View mode blocks */
        #viewDetails {
            color: #333;
        }

        .info-block {
            display: flex;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            align-items: center;
        }

        .info-label {
            flex: 0 0 30%;
            font-weight: 600;
            color: #267bbd;
            /* font-size: .8rem; */
            text-transform: uppercase;
        }

        .info-value {
            flex: 1;
            font-size: 1rem;
            color: #444;
        }

        /* Profile photo */
        .profile-photo {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #267bbd;
            margin-bottom: 30px;
        }

        /* CPR Images container */
        .cpr-images {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
            margin-top: 20px;
            margin-bottom: 20px;
            justify-content: flex-start;
        }

        .cpr-images img {
            max-width: 250px;
            border-radius: 10px;
            border: 1px solid #ccc;
            object-fit: contain;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        /* Form styles */
        #editDetails {
            display: none;
        }

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

        form label {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
            color: #267bbd;
            font-size: 1.05rem;
        }

        form input[type="text"],
        form input[type="email"],
        form input[type="date"],
        form select,
        form textarea {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        form input[type="text"]:focus,
        form input[type="email"]:focus,
        form input[type="date"]:focus,
        form select:focus,
        form textarea:focus {
            border-color: #267bbd;
            outline: none;
        }

        form textarea {
            resize: vertical;
            min-height: 80px;
        }

        /* Form CPR images preview */
        #editDetails .cpr-images {
            justify-content: center;
        }

        #editDetails .cpr-images img {
            max-width: 200px;
        }

        #editDetails .file-input-label {
            display: inline-block;
            margin-top: 8px;
            font-size: 0.9rem;
            color: #555;
        }

        /* Buttons */
        .btn-profile,
        #cancelEditBtn {
            background: #267bbd;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            margin: 15px 10px 0 0;
            cursor: pointer;
            transition: background-color 0.3s ease;
            min-width: 120px;
            text-align: center;
        }

        .btn-profile:hover,
        #cancelEditBtn:hover {
            background: #1f5e88;
            color: #fff;
        }

        #cancelEditBtn {
            background: #aaa;
            margin-left: 10px;
        }

        #cancelEditBtn:hover {
            background: #888;
        }

        /* Responsive */
        @media (max-width: 768px) {
            #profileContainer {
                padding: 20px 25px;
            }

            #toggleEditBtn {
                top: 20px;
                right: 20px;
                padding: 8px 20px;
                font-size: 0.9rem;
            }

            .info-block {
                flex-direction: column;
                align-items: flex-start;
                padding: 12px 0;
            }

            .info-label {
                flex: none;
                width: 100%;
                margin-bottom: 5px;
                font-size: 1rem;
            }

            .info-value {
                width: 100%;
                font-size: 1rem;
            }

            .profile-photo {
                width: 130px;
                height: 130px;
                border-width: 3px;
                margin-bottom: 25px;
            }

            .cpr-images img {
                max-width: 150px;
            }

            form input[type="text"],
            form input[type="email"],
            form input[type="date"],
            form select,
            form textarea {
                font-size: 1rem;
                padding: 10px 14px;
            }

            .btn-profile,
            #cancelEditBtn {
                width: 100%;
                margin: 12px 0;
                padding: 14px 0;
                font-size: 1.1rem;
            }
        }

        @media (max-width: 400px) {
            .profile-photo {
                width: 110px;
                height: 110px;
            }

            .cpr-images img {
                max-width: 120px;
            }
        }
    </style>

    <div id="profileContainer">

        <!-- Edit Button -->
        <button id="toggleEditBtn">Edit Profile</button>
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <!-- View Mode -->
        <div id="viewDetails">
            <img src="{{ asset('storage/' . $member->photo) }}" alt="Profile Photo" class="profile-photo">

            <div class="info-block">
                <div class="info-label">Full Name</div>
                <div class="info-value">{{ $member->full_name }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Occupation</div>
                <div class="info-value">{{ $member->occupation }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">CPR Number</div>
                <div class="info-value">{{ $member->cpr_number }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Passport Number</div>
                <div class="info-value">{{ $member->passport_number ?? '-' }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Date of Birth</div>
                <div class="info-value">{{ \Carbon\Carbon::parse($member->dob)->format('d M, Y') }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Gender</div>
                <div class="info-value">{{ $member->gender }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Blood Group</div>
                <div class="info-value">{{ $member->blood_group ?? '-' }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Mobile (WhatsApp)</div>
                <div class="info-value">{{ $member->mobile }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Email</div>
                <div class="info-value">{{ $member->email ?? '-' }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Address in Bahrain</div>
                <div class="info-value">{{ $member->address }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Volunteer Time</div>
                <div class="info-value">{{ $member->volunteer_time ?? '-' }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Expertise</div>
                <div class="info-value">
                    @php $skills = json_decode($member->expertise, true); @endphp
                    @if (is_array($skills) && count($skills))
                        <ul style="padding-left: 20px; margin: 0;">
                            @foreach ($skills as $skill)
                                <li>{{ $skill }}</li>
                            @endforeach
                        </ul>
                    @else
                        -
                    @endif
                </div>
            </div>
            <div class="info-block">
                <div class="info-label">Bangladesh Contact</div>
                <div class="info-value">{{ $member->bd_contact ?? '-' }}</div>
            </div>
            <div class="info-block">
                <div class="info-label">Reference Person</div>
                <div class="info-value">{{ $member->ref_person ?? '-' }} ({{ $member->ref_phone ?? '-' }})</div>
            </div>
            <div class="info-block" style="flex-direction: column; align-items: flex-start;">
                <div class="info-label" style="margin-bottom: 12px;">CPR Front</div>
                <div class="cpr-images">
                    <img src="{{ asset('storage/' . $member->cpr_front) }}" alt="CPR Front">
                </div>
            </div>
            <div class="info-block" style="flex-direction: column; align-items: flex-start;">
                <div class="info-label" style="margin-bottom: 12px;">CPR Back</div>
                <div class="cpr-images">
                    <img src="{{ asset('storage/' . $member->cpr_back) }}" alt="CPR Back">
                </div>
            </div>
            <div class="info-block">
                <div class="info-label">Registered On</div>
                <div class="info-value">{{ $member->created_at->format('d M, Y H:i') }}</div>
            </div>
        </div>

        <!-- Edit Mode -->
        <div id="editDetails">
            <form method="POST" action="{{ route('member.profile.update') }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="form-group">
                    <label for="full_name">Full Name</label>
                    <input type="text" id="full_name" name="full_name"
                        value="{{ old('full_name', $member->full_name) }}" required>
                </div>

                <div class="form-group">
                    <label for="occupation">Occupation</label>
                    <input type="text" id="occupation" name="occupation"
                        value="{{ old('occupation', $member->occupation) }}">
                </div>

                <div class="form-group">
                    <label for="cpr_number">CPR Number</label>
                    <input type="text" id="cpr_number" name="cpr_number"
                        value="{{ old('cpr_number', $member->cpr_number) }}" required>
                </div>

                <div class="form-group">
                    <label for="passport_number">Passport Number</label>
                    <input type="text" id="passport_number" name="passport_number"
                        value="{{ old('passport_number', $member->passport_number) }}">
                </div>

                <div class="form-group">
                    <label for="dob">Date of Birth</label>
                    <input type="date" id="dob" name="dob"
                        value="{{ old('dob', $member->dob ? \Carbon\Carbon::parse($member->dob)->format('Y-m-d') : '') }}">
                </div>

                <div class="form-group">
                    <label for="gender">Gender</label>
                    <select id="gender" name="gender">
                        <option value="Male" {{ old('gender', $member->gender) == 'Male' ? 'selected' : '' }}>Male
                        </option>
                        <option value="Female" {{ old('gender', $member->gender) == 'Female' ? 'selected' : '' }}>Female
                        </option>
                        <option value="Other" {{ old('gender', $member->gender) == 'Other' ? 'selected' : '' }}>Other
                        </option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="blood_group">Blood Group</label>
                    <input type="text" id="blood_group" name="blood_group"
                        value="{{ old('blood_group', $member->blood_group) }}">
                </div>

                <div class="form-group">
                    <label for="mobile">Mobile (WhatsApp)</label>
                    <input type="text" id="mobile" name="mobile" value="{{ old('mobile', $member->mobile) }}">
                </div>

                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" value="{{ old('email', $member->email) }}">
                </div>

                <div class="form-group">
                    <label for="address">Address in Bahrain</label>
                    <textarea id="address" name="address">{{ old('address', $member->address) }}</textarea>
                </div>

                <div class="form-group">
                    <label for="volunteer_time">Volunteer Time</label>
                    <input type="text" id="volunteer_time" name="volunteer_time"
                        value="{{ old('volunteer_time', $member->volunteer_time) }}">
                </div>

                <div class="form-group">
                    <label class="form-label fw-bold">Your Expertise</label>
                    <div class="row">
                        @php
                            $skills = [
                                'Volunteering',
                                'Graphic design',
                                'LMRA/Passport/Visa work',
                                'Info Collection',
                                'Presentation',
                                'Interview',
                            ];

                            $selectedSkills = is_array(old('expertise', json_decode($member->expertise, true)))
                                ? old('expertise', json_decode($member->expertise, true))
                                : [];
                        @endphp

                        @foreach ($skills as $skill)
                            <div class="col-md-4 mb-2">
                                <input type="checkbox" class="" id="skill_{{ \Str::slug($skill) }}"
                                    name="expertise[]" value="{{ $skill }}"
                                    {{ in_array($skill, $selectedSkills) ? 'checked' : '' }}>
                                <label class="form-check-label"
                                    for="skill_{{ \Str::slug($skill) }}">{{ $skill }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="form-group">
                    <label for="bd_contact">Bangladesh Contact</label>
                    <input type="text" id="bd_contact" name="bd_contact"
                        value="{{ old('bd_contact', $member->bd_contact) }}">
                </div>

                <div class="form-group">
                    <label for="ref_person">Reference Person</label>
                    <input type="text" id="ref_person" name="ref_person"
                        value="{{ old('ref_person', $member->ref_person) }}">
                </div>

                <div class="form-group">
                    <label for="ref_phone">Reference Phone</label>
                    <input type="text" id="ref_phone" name="ref_phone"
                        value="{{ old('ref_phone', $member->ref_phone) }}">
                </div>

                <div class="form-group">
                    <label for="photo">Profile Photo</label>
                    <input type="file" id="photo" name="photo" accept="image/*">
                    <p class="file-input-label">Current: <img src="{{ asset('storage/' . $member->photo) }}"
                            alt="Current Photo" style="max-width: 100px; border-radius: 50%; margin-top: 5px;"></p>
                </div>

                <div class="form-group">
                    <label for="cpr_front">CPR Front Image</label>
                    <input type="file" id="cpr_front" name="cpr_front" accept="image/*">
                    <p class="file-input-label">Current:</p>
                    <img src="{{ asset('storage/' . $member->cpr_front) }}" alt="CPR Front"
                        style="max-width: 150px; border-radius: 10px;">
                </div>

                <div class="form-group">
                    <label for="cpr_back">CPR Back Image</label>
                    <input type="file" id="cpr_back" name="cpr_back" accept="image/*">
                    <p class="file-input-label">Current:</p>
                    <img src="{{ asset('storage/' . $member->cpr_back) }}" alt="CPR Back"
                        style="max-width: 150px; border-radius: 10px;">
                </div>

                <div style="margin-top: 20px; text-align: right;">
                    <button type="submit" class="btn-profile">Save Changes</button>
                    <button type="button" id="cancelEditBtn">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- jQuery for toggle -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            $('#toggleEditBtn').click(function() {
                if ($('#editDetails').is(':visible')) {
                    // Switch to view mode
                    $('#editDetails').slideUp(300);
                    $('#viewDetails').slideDown(300);
                    $('#toggleEditBtn').text('Edit Profile');
                    $('#toggleEditBtn').show();
                } else {
                    // Switch to edit mode
                    $('#viewDetails').slideUp(300);
                    $('#editDetails').slideDown(300);
                    /* $('#toggleEditBtn').text('View Profile'); */
                    $('#toggleEditBtn').hide();
                    // Scroll to top for editing
                    $('html, body').animate({
                        scrollTop: $('#profileContainer').offset().top - 20
                    }, 500);
                }
            });

            $('#cancelEditBtn').click(function() {
                // Cancel editing: revert to view mode
                $('#editDetails').slideUp(300);
                $('#viewDetails').slideDown(300);
                $('#toggleEditBtn').text('Edit Profile');
                $('#toggleEditBtn').show();
            });
        });
    </script>

@endsection