@extends('layouts.master')

@section('title', 'Lawyer Profile')

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

@section('content')
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
        min-height: 100vh;
        padding: 20px;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        overflow: hidden;
    }

    .header {
        background: linear-gradient(135deg, #4a90e2 0%, #87ceeb 100%);
        color: white;
        padding: 30px;
        display: flex;
        align-items: center;
        gap: 30px;
        border-bottom: 3px solid #ffffff;
    }

    .profile-picture {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 5px solid #fff;
        object-fit: cover;
        background: #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: #666;
    }

    .header-info h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .header-info .title {
        font-size: 18px;
        color: #ffffff;
        margin-bottom: 5px;
    }

    .header-info .bar-number {
        font-size: 14px;
        color: #ffffff;
        opacity: 0.9;
    }

    .status-badge {
        display: inline-block;
        padding: 5px 15px;
        background: #ffffff;
        color: #4a90e2;
        font-weight: 600;
        border-radius: 20px;
        font-size: 14px;
        margin-top: 10px;
        border: 2px solid #ffffff;
    }

    .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 30px;
    }

    .section {
        background: #ffffff;
        padding: 25px;
        border-radius: 8px;
        border-left: 4px solid #4a90e2;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
    }

    .section.full-width {
        grid-column: 1 / -1;
    }

    .section h2 {
        color: #4a90e2;
        margin-bottom: 20px;
        font-size: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 2px solid #e6f3ff;
        padding-bottom: 10px;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #f0f8ff;
    }

    .info-row:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
    }

    .info-value {
        color: #212529;
        text-align: right;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-top: 15px;
    }

    .stat-card {
        background: #ffffff;
        color: #4a90e2;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
        border: 2px solid #e6f3ff;
    }

    .stat-number {
        font-size: 32px;
        font-weight: bold;
        color: #4a90e2;
        display: block;
    }

    .stat-label {
        font-size: 14px;
        color: #6c757d;
        margin-top: 5px;
    }

    .specialization-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
    }

    .tag {
        background: #ffffff;
        color: #4a90e2;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        border: 2px solid #4a90e2;
    }

    .case-item {
        background: #ffffff;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 10px;
        border-left: 3px solid #4a90e2;
        box-shadow: 0 1px 3px rgba(74, 144, 226, 0.1);
    }

    .case-title {
        font-weight: 600;
        color: #212529;
        margin-bottom: 5px;
    }

    .case-meta {
        font-size: 14px;
        color: #6c757d;
    }

    .btn {
        background: #4a90e2;
        color: white;
        padding: 12px 24px;
        border: 2px solid #4a90e2;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 10px;
        margin-top: 10px;
        transition: all 0.3s ease;
    }

    .btn:hover {
        background: #ffffff;
        color: #4a90e2;
    }

    .btn-secondary {
        background: #ffffff;
        color: #4a90e2;
        border: 2px solid #4a90e2;
    }

    .btn-secondary:hover {
        background: #4a90e2;
        color: #ffffff;
    }

    .btn-link {
        display: inline-block;
        text-decoration: none;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

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

    .form-group.full {
        grid-column: 1 / -1;
    }

    .form-label {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
        color: #495057;
    }

    .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #c7dff7;
        border-radius: 6px;
        font-size: 14px;
    }

    .form-control:focus {
        outline: none;
        border-color: #4a90e2;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.12);
    }

    .alert {
        margin: 20px 30px 0;
        padding: 12px 14px;
        border-radius: 8px;
    }

    .alert-success {
        background: #e8f7ee;
        border: 1px solid #7ad39b;
        color: #156b39;
    }

    .alert-danger {
        background: #fdecec;
        border: 1px solid #f2a4a4;
        color: #8d1b1b;
    }

    .security-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .education-item, .certification-item {
        background: #ffffff;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 10px;
        border-left: 2px solid #4a90e2;
        box-shadow: 0 1px 3px rgba(74, 144, 226, 0.1);
    }

    .education-degree {
        font-weight: 600;
        color: #212529;
    }

    .education-institution {
        color: #4a90e2;
        font-size: 14px;
        font-weight: 500;
    }

    .education-year {
        color: #6c757d;
        font-size: 14px;
    }

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

        .header {
            flex-direction: column;
            text-align: center;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .form-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

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

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul style="margin: 0; padding-left: 18px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="header">
        <div class="profile-picture">
            @if($user->profile_picture)
                <img src="{{ asset('storage/' . $user->profile_picture) }}" alt="Profile Picture" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
            @else
                👨‍⚖️
            @endif
        </div>
        <div class="header-info">
            <h1>{{ $user->name }}</h1>
            <div class="title">{{ $userRole }} | {{ $userGroup }}</div>
            <div class="bar-number">Employee ID: {{ $user->id ?? 'N/A' }} | Joined: {{ $user->created_at ? $user->created_at->format('M d, Y') : 'N/A' }}</div>
            <span class="status-badge">Active</span>
        </div>
    </div>

    <div class="content">
        <div class="section full-width">
            <h2>👤 Personal Information</h2>
            <div class="info-row">
                <span class="info-label">Employee ID:</span>
                <span class="info-value">{{ $user->id ?? 'N/A' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Email:</span>
                <span class="info-value">{{ $user->email }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Phone:</span>
                <span class="info-value">{{ $userPhones->isNotEmpty() ? $userPhones->first()->phone_number : 'N/A' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Group:</span>
                <span class="info-value">{{ $userGroup }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Tier:</span>
                <span class="info-value">{{ $userTier }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Location:</span>
                <span class="info-value">{{ $user->location ?? 'N/A' }}</span>
            </div>
        </div>

        <div class="section full-width">
            <h2>🎯 Practice Areas & Specializations</h2>
            <div class="specialization-tags">
                <span class="tag">General Law</span>
                <span class="tag">{{ $userGroup }}</span>
            </div>
        </div>



        </div>

        <div class="section full-width">
            <h2>🔑 Change Password</h2>
            <form method="POST" action="{{ route('profile.password.update') }}">
                @csrf
                <div class="form-group">
                    <label class="form-label" for="current_password">Current Password</label>
                    <input type="password" id="current_password" name="current_password" required class="form-control"/>
                </div>
                <div class="form-group">
                    <label class="form-label" for="new_password">New Password</label>
                    <input type="password" id="new_password" name="new_password" required minlength="8" class="form-control"/>
                </div>
                <div class="form-group">
                    <label class="form-label" for="new_password_confirmation">Confirm New Password</label>
                    <input type="password" id="new_password_confirmation" name="new_password_confirmation" required minlength="8" class="form-control"/>
                </div>
                <button class="btn" type="submit">Change Password</button>
            </form>
        </div>

        <div class="section full-width">
            <h2>💬 Chat Passcode</h2>
            <p style="color: #6c757d; margin-bottom: 15px;">Set a 6-digit passcode to access the team chat room.</p>
            <form method="POST" action="{{ route('profile.chat-passcode.update') }}">
                @csrf
                @php
                    $hasChatPasscode = \App\Models\ChatPasscode::where('user_id', $user->id)->where('is_active', true)->exists();
                @endphp
                
                @if($hasChatPasscode)
                <div class="form-group">
                    <label class="form-label" for="chat_passcode_current">Current Passcode</label>
                    <input type="password" id="chat_passcode_current" name="chat_passcode_current" minlength="6" maxlength="6" class="form-control" placeholder="Enter current 6-digit passcode"/>
                    @error('chat_passcode_current')
                        <span style="color: #dc3545; font-size: 14px;">{{ $message }}</span>
                    @enderror
                </div>
                @endif
                
                <div class="form-group">
                    <label class="form-label" for="chat_passcode">{{ $hasChatPasscode ? 'New ' : '' }}Passcode</label>
                    <input type="password" id="chat_passcode" name="chat_passcode" minlength="6" maxlength="6" pattern="\d{6}" required class="form-control" placeholder="Enter 6-digit passcode"/>
                    @error('chat_passcode')
                        <span style="color: #dc3545; font-size: 14px;">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label class="form-label" for="chat_passcode_confirmation">Confirm Passcode</label>
                    <input type="password" id="chat_passcode_confirmation" name="chat_passcode_confirmation" minlength="6" maxlength="6" pattern="\d{6}" required class="form-control" placeholder="Confirm 6-digit passcode"/>
                    @error('chat_passcode_confirmation')
                        <span style="color: #dc3545; font-size: 14px;">{{ $message }}</span>
                    @enderror
                </div>
                <button class="btn" type="submit">{{ $hasChatPasscode ? 'Update Passcode' : 'Set Passcode' }}</button>
            </form>
        </div>

        <div class="section full-width">
            <h2>⚙️ Actions</h2>
            <form method="POST" action="{{ route('profile.update') }}">
                @csrf
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="profile_name">Full Name</label>
                        <input id="profile_name" name="name" type="text" class="form-control" value="{{ old('name', $user->name) }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="profile_email">Email</label>
                        <input id="profile_email" name="email" type="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="profile_phone">Phone</label>
                        <input id="profile_phone" name="phone" type="text" class="form-control" value="{{ old('phone', $userPhones->isNotEmpty() ? $userPhones->first()->phone_number : '') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="profile_location">Location</label>
                        <input id="profile_location" name="location" type="text" class="form-control" value="{{ old('location', $user->location) }}">
                    </div>
                </div>
                <button class="btn" type="submit">Save Profile</button>
            </form>
        </div>
    </div>
</div>

<script>
    // Add interactivity
    document.querySelectorAll('.case-item').forEach(item => {
        item.addEventListener('click', function() {
            this.style.backgroundColor = '#e3f2fd';
            setTimeout(() => {
                this.style.backgroundColor = 'white';
            }, 300);
        });
    });
</script>
@endsection