@extends('layouts.main')

@section('content')
@if(request('active_tab') == 'messages')
    <div class="main-header" style="margin-bottom: 2rem;">
        <div>
            <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 0.4rem;">
                Contact Messages
            </h1>
            <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">View messages from patients.</p>
        </div>
    </div>
    
    <div class="form-section" style="margin-top: 0;">
        <h2>All Inquiries</h2>
        @if(isset($submissions) && count($submissions) > 0)
            <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;">
                @foreach($submissions as $msg)
                    <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 1.2rem; border-radius: 12px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
                            <strong style="color: var(--primary-light); font-size: 1.1rem;">{{ $msg->name }}</strong>
                            <small style="color: var(--text-muted);">{{ $msg->created_at->diffForHumans() }}</small>
                        </div>
                        <div style="color: white; font-size: 0.9rem; margin-bottom: 0.5rem;">
                            📧 <a href="mailto:{{ $msg->email }}" style="color: #60A5FA;">{{ $msg->email }}</a> 
                            @if($msg->phone) &nbsp; 📱 {{ $msg->phone }} @endif
                        </div>
                        <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0; line-height: 1.5; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.05);">
                            "{{ $msg->message }}"
                        </p>
                    </div>
                @endforeach
            </div>
        @else
            <p style="color: var(--text-muted); margin-top: 1rem;">No messages found.</p>
        @endif
    </div>
@elseif(request('active_tab') == 'newsletter')
    <div class="main-header" style="margin-bottom: 2rem;">
        <div>
            <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 0.4rem;">
                Newsletter Subscribers
            </h1>
            <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Manage your newsletter audience.</p>
        </div>
    </div>
    
    <div class="form-section" style="margin-top: 0;">
        <h2>Subscribers List</h2>
        @if(isset($subscribers) && count($subscribers) > 0)
            <div style="overflow-x: auto; margin-top: 1.5rem;">
                <table style="width: 100%; border-collapse: collapse; text-align: left; color: white;">
                    <thead>
                        <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--primary-light);">
                            <th style="padding: 1rem;">Email Address</th>
                            <th style="padding: 1rem;">Subscribed On</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($subscribers as $sub)
                            <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                                <td style="padding: 1rem;">{{ $sub->email }}</td>
                                <td style="padding: 1rem;">{{ $sub->created_at->format('M d, Y h:i A') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p style="color: var(--text-muted); margin-top: 1rem;">No subscribers found.</p>
        @endif
    </div>
@elseif(request('active_tab') == 'configs')
    <div class="main-header" style="margin-bottom: 2rem;">
        <div>
            <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 0.4rem;">
                Website Settings
            </h1>
            <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Configure custom scripts and CSS.</p>
        </div>
    </div>
    @if(session('success'))
        <div class="alert-success">
            ✓ {{ session('success') }}
        </div>
    @endif
    <div class="form-section" style="margin-top: 0;">
        <h2>Advanced Customization</h2>
        <form action="{{ route('admin.dashboard.update') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" method="POST">
            @csrf
            
            <div class="form-group full-width">
                <label for="custom_css">Custom CSS (Premium / SEO Plan Only)</label>
                <textarea id="custom_css" name="custom_css" rows="8" style="font-family: monospace;" {{ in_array($tenant->package_tier, ['premium', 'seo']) ? '' : 'disabled placeholder="Upgrade to Premium or SEO plan to use Custom CSS"' }}>{{ old('custom_css', $tenant->custom_css) }}</textarea>
                <small style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.5rem;">Override default styles by writing valid CSS rules.</small>
            </div>
            
            <input type="hidden" name="name" value="{{ $tenant->name }}">
            
            @if(in_array($tenant->package_tier, ['premium', 'seo']))
                <div style="text-align: right; margin-top: 2rem;">
                    <button type="submit" class="save-btn">Save Settings</button>
                </div>
            @endif
        </form>
    </div>
@else
<div class="main-header" style="margin-bottom: 2rem;">
    <div>
        <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 0.4rem;">
            Doctor Complete Profile Settings
        </h1>
        <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">
            Update your comprehensive professional profile details here for <strong>{{ $tenant->name }}</strong>.
        </p>
    </div>
    <div>
        <a href="{{ route('home', ['simulate_host' => $tenant->custom_domain]) }}" target="_blank" class="view-btn" style="padding: 0.8rem 1.5rem; border-radius: 12px; font-weight: 600;">
            🌐 View Live Website
        </a>
    </div>
</div>

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


@php
    $toArray = function ($value) {
        if (is_array($value)) return array_values($value);
        if ($value === null || $value === '') return [''];
        $decoded = json_decode($value, true);
        if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
            return empty($decoded) ? [''] : array_values($decoded);
        }
        return [$value];
    };
    $experienceList = old('experience', $toArray($profile?->experience));
    $higherDegreeList = old('higher_degree', $toArray($profile?->higher_degree));
    $expertiseList = old('expertise', $toArray($profile?->expertise));
    $skillsList = old('skills', $toArray($profile?->skills));
    $membershipList = old('membership_association', $toArray($profile?->membership_association));
    $languagesList = old('languages', $toArray($profile?->languages));
@endphp

<!-- Doctor Complete Profile Settings -->
<div class="form-section" style="margin-top: 0;">
    <h2>Doctor Complete Profile Settings</h2>
    <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 2rem;">
        Update your comprehensive professional profile details here.
    </p>

    <form action="{{ route('admin.full_profile.update') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" method="POST" enctype="multipart/form-data">
        @csrf

        <h3 style="font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; margin-bottom: 1rem; color: var(--primary-light); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Basic Information</h3>
        <div class="form-grid">
            <div class="form-group full-width">
                <label for="tenant_name">Practice / Psychologist Name</label>
                <input type="text" id="tenant_name" name="tenant_name" value="{{ old('tenant_name', $tenant->name) }}">
                <small style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.25rem;">This is your primary name displayed on your custom domain.</small>
            </div>
            <div class="form-group">
                <label for="first_name">First Name</label>
                <input type="text" id="first_name" name="first_name" value="{{ old('first_name', $profile?->first_name) }}">
            </div>
            <div class="form-group">
                <label for="last_name">Last Name</label>
                <input type="text" id="last_name" name="last_name" value="{{ old('last_name', $profile?->last_name) }}">
            </div>
            <div class="form-group full-width">
                <label for="profile_image">Profile Image</label>
                <input type="file" id="profile_image" name="profile_image" accept="image/*" style="padding: 0.5rem; background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); border-radius: 10px; color: white;">
                @if($profile?->profile_image)
                    <img src="{{ asset($profile->profile_image) }}" style="width: 50px; height: 50px; border-radius: 50%; margin-top: 10px; object-fit: cover;">
                @endif
            </div>
            <div class="form-group full-width">
                <label for="bio">Bio</label>
                <textarea id="bio" name="bio" rows="4">{{ old('bio', $profile?->bio) }}</textarea>
            </div>
            <div class="form-group full-width">
                <label for="life_quote">Life Quote</label>
                <textarea id="life_quote" name="life_quote" rows="3">{{ old('life_quote', $profile?->life_quote) }}</textarea>
            </div>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" value="{{ old('username', $profile?->username) }}">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" value="{{ old('email', $profile?->email) }}">
            </div>
            <div class="form-group">
                <label for="phone_number">Phone Number</label>
                <input type="text" id="phone_number" name="phone_number" value="{{ old('phone_number', $profile?->phone_number) }}">
            </div>
            <div class="form-group">
                <label for="country">Country</label>
                <input type="text" id="country" name="country" value="{{ old('country', $profile?->country) }}">
            </div>
            <div class="form-group full-width">
                <label for="password">Password (Leave blank to keep current)</label>
                <input type="password" id="password" name="password" style="background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.8rem 1.2rem; color: white; font-size: 0.95rem; font-family: inherit; outline: none; transition: all 0.3s ease;">
            </div>
        </div>

        <h3 style="font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--primary-light); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Personal Information</h3>
        <div class="form-grid">
            <div class="form-group">
                <label for="gender">Gender</label>
                <select id="gender" name="gender" style="background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); padding: 0.8rem 1.2rem; border-radius: 10px; color: white;">
                    <option value="" {{ old('gender', $profile?->gender) == '' ? 'selected' : '' }}>Select Gender</option>
                    <option value="Male" {{ old('gender', $profile?->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                    <option value="Female" {{ old('gender', $profile?->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                    <option value="Other" {{ old('gender', $profile?->gender) == 'Other' ? 'selected' : '' }}>Other</option>
                </select>
            </div>
            <div class="form-group">
                <label for="address">Address</label>
                <textarea id="address" name="address" rows="2">{{ old('address', $profile?->address ?: $profile?->office_address) }}</textarea>
            </div>
        </div>

        <h3 style="font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--primary-light); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Education</h3>
        <div class="form-grid">
            <div class="form-group full-width">
                <label for="qualification">Qualification (e.g. M.Sc Psychology)</label>
                <input type="text" id="qualification" name="qualification" value="{{ old('qualification', $profile?->qualification) }}">
            </div>
            <div class="form-group">
                <label for="degree">Degree</label>
                <input type="text" id="degree" name="degree" value="{{ old('degree', $profile?->degree) }}">
            </div>
            <div class="form-group">
                <label for="university">University</label>
                <input type="text" id="university" name="university" value="{{ old('university', $profile?->university) }}">
            </div>
            <div class="form-group">
                <label for="education_start_year">Start Year</label>
                <input type="text" id="education_start_year" name="education_start_year" value="{{ old('education_start_year', $profile?->education_start_year) }}" placeholder="YYYY">
            </div>
            <div class="form-group">
                <label for="education_end_year">End Year</label>
                <input type="text" id="education_end_year" name="education_end_year" value="{{ old('education_end_year', $profile?->education_end_year) }}" placeholder="YYYY">
            </div>
        </div>

        <h3 style="font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; margin-bottom: 1rem; margin-top: 2rem; color: var(--primary-light); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Master Education</h3>
        <div class="form-grid">
            <div class="form-group full-width">
                <label for="master_degree">Master Degree</label>
                <input type="text" id="master_degree" name="master_degree" value="{{ old('master_degree', $profile?->master_degree) }}">
            </div>
            <div class="form-group full-width">
                <label for="master_university">University</label>
                <input type="text" id="master_university" name="master_university" value="{{ old('master_university', $profile?->master_university) }}">
            </div>
            <div class="form-group">
                <label for="master_start_year">Start Year</label>
                <input type="month" id="master_start_year" name="master_start_year" value="{{ old('master_start_year', $profile?->master_start_year) }}">
            </div>
            <div class="form-group">
                <label for="master_end_year">End Year</label>
                <input type="month" id="master_end_year" name="master_end_year" value="{{ old('master_end_year', $profile?->master_end_year) }}">
            </div>
        </div>

        <h3 style="font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; margin-bottom: 1rem; margin-top: 2rem; color: var(--primary-light); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Professional Details</h3>
        
        <div class="form-grid" style="margin-bottom: 1.5rem;">
            <div class="form-group">
                <label for="resume">Resume (PDF, DOCX)</label>
                <input type="file" id="resume" name="resume" style="padding: 0.5rem; background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); border-radius: 10px; color: white;">
                @if($profile?->resume)
                    <a href="{{ asset($profile->resume) }}" target="_blank" style="font-size: 0.85rem; color: var(--primary-light); margin-top: 5px; display: inline-block;">View Current Resume</a>
                @endif
            </div>
            <div class="form-group full-width">
                <label for="experience_detail">Experience Detail</label>
                <textarea id="experience_detail" name="experience_detail" rows="4">{{ old('experience_detail', $profile?->experience_detail) }}</textarea>
            </div>
        </div>

        <!-- Experience -->
        <div style="margin-bottom: 1.5rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <label class="form-label" style="margin-bottom: 0;">Experience</label>
                <button type="button" onclick="addRepeaterRow('experienceWrapper', 'experience[]', '')" style="background: var(--primary); color: white; border: none; border-radius: 5px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.8rem;">+ Add Experience</button>
            </div>
            <div id="experienceWrapper">
                @foreach ($experienceList as $exp)
                <div style="display: flex; gap: 0.6rem; margin-bottom: 0.6rem;">
                    <input type="text" name="experience[]" value="{{ $exp }}" style="flex: 1;">
                    <button type="button" onclick="this.parentElement.remove()" style="background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 0 0.8rem; cursor: pointer;">✕</button>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Higher Degree -->
        <div style="margin-bottom: 1.5rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <label class="form-label" style="margin-bottom: 0;">Higher Degree</label>
                <button type="button" onclick="addRepeaterRow('higherDegreeWrapper', 'higher_degree[]', '')" style="background: var(--primary); color: white; border: none; border-radius: 5px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.8rem;">+ Add Higher Degree</button>
            </div>
            <div id="higherDegreeWrapper">
                @foreach ($higherDegreeList as $deg)
                <div style="display: flex; gap: 0.6rem; margin-bottom: 0.6rem;">
                    <input type="text" name="higher_degree[]" value="{{ $deg }}" style="flex: 1;">
                    <button type="button" onclick="this.parentElement.remove()" style="background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 0 0.8rem; cursor: pointer;">✕</button>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Expertise -->
        <div style="margin-bottom: 1.5rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <label class="form-label" style="margin-bottom: 0;">Expertise</label>
                <button type="button" onclick="addRepeaterRow('expertiseWrapper', 'expertise[]', '')" style="background: var(--primary); color: white; border: none; border-radius: 5px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.8rem;">+ Add Expertise</button>
            </div>
            <div id="expertiseWrapper">
                @foreach ($expertiseList as $exp)
                <div style="display: flex; gap: 0.6rem; margin-bottom: 0.6rem;">
                    <input type="text" name="expertise[]" value="{{ $exp }}" style="flex: 1;">
                    <button type="button" onclick="this.parentElement.remove()" style="background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 0 0.8rem; cursor: pointer;">✕</button>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Skills -->
        <div style="margin-bottom: 1.5rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <label class="form-label" style="margin-bottom: 0;">Skills</label>
                <button type="button" onclick="addRepeaterRow('skillsWrapper', 'skills[]', '')" style="background: var(--primary); color: white; border: none; border-radius: 5px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.8rem;">+ Add Skill</button>
            </div>
            <div id="skillsWrapper">
                @foreach ($skillsList as $sk)
                <div style="display: flex; gap: 0.6rem; margin-bottom: 0.6rem;">
                    <input type="text" name="skills[]" value="{{ $sk }}" style="flex: 1;">
                    <button type="button" onclick="this.parentElement.remove()" style="background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 0 0.8rem; cursor: pointer;">✕</button>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Membership Association -->
        <div style="margin-bottom: 1.5rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <label class="form-label" style="margin-bottom: 0;">Membership Association</label>
                <button type="button" onclick="addRepeaterRow('membershipWrapper', 'membership_association[]', '')" style="background: var(--primary); color: white; border: none; border-radius: 5px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.8rem;">+ Add Membership</button>
            </div>
            <div id="membershipWrapper">
                @foreach ($membershipList as $mem)
                <div style="display: flex; gap: 0.6rem; margin-bottom: 0.6rem;">
                    <input type="text" name="membership_association[]" value="{{ $mem }}" style="flex: 1;">
                    <button type="button" onclick="this.parentElement.remove()" style="background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 0 0.8rem; cursor: pointer;">✕</button>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Certificates & Achievements -->
        <h3 style="font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; margin-bottom: 1rem; margin-top: 2rem; color: var(--primary-light); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Certificates & Achievements</h3>
        <div class="form-grid" style="margin-bottom: 1.5rem;">
            <div class="form-group">
                <label for="certificate_title">Certificate Title</label>
                <input type="text" id="certificate_title" name="certificate_title" value="{{ old('certificate_title', $profile?->certificate_title) }}">
            </div>
            <div class="form-group">
                <label for="certificate_file">Certificate File</label>
                <input type="file" id="certificate_file" name="certificate_file" style="padding: 0.5rem; background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); border-radius: 10px; color: white;">
                @if($profile?->certificate_file)
                    <a href="{{ asset($profile->certificate_file) }}" target="_blank" style="font-size: 0.85rem; color: var(--primary-light); margin-top: 5px; display: inline-block;">View Current Certificate</a>
                @endif
            </div>
            <div class="form-group full-width">
                <label for="achievements">Achievements</label>
                <textarea id="achievements" name="achievements" rows="3">{{ old('achievements', $profile?->achievements) }}</textarea>
            </div>
        </div>

        <!-- Languages -->
        <div style="margin-bottom: 1.5rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <label class="form-label" style="margin-bottom: 0;">Languages</label>
                <button type="button" onclick="addRepeaterRow('languagesWrapper', 'languages[]', '')" style="background: var(--primary); color: white; border: none; border-radius: 5px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.8rem;">+ Add Language</button>
            </div>
            <div id="languagesWrapper">
                @foreach ($languagesList as $lang)
                <div style="display: flex; gap: 0.6rem; margin-bottom: 0.6rem;">
                    <input type="text" name="languages[]" value="{{ $lang }}" style="flex: 1;">
                    <button type="button" onclick="this.parentElement.remove()" style="background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 0 0.8rem; cursor: pointer;">✕</button>
                </div>
                @endforeach
            </div>
        </div>

        <div style="text-align: right; margin-top: 2rem;">
            <button type="submit" class="save-btn">Update Profile</button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    function addRepeaterRow(wrapperId, inputName, placeholderText) {
        const wrapper = document.getElementById(wrapperId);
        if (!wrapper) return;
        const row = document.createElement('div');
        row.style.cssText = 'display: flex; gap: 0.6rem; margin-bottom: 0.6rem;';
        row.innerHTML = `
            <input type="text" name="${inputName}" placeholder="${placeholderText}" style="flex: 1;">
            <button type="button" onclick="this.parentElement.remove()" style="background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 0 0.8rem; cursor: pointer;">✕</button>
        `;
        wrapper.appendChild(row);
    }
</script>
@endpush
@endif
@endsection