@extends('layouts.app')

@section('content')
<!-- ═══════════════════════════ MAIN RECRUITER DASHBOARD SHELL ═══════════════════════════ -->
<section class="py-5" style="background:#f8fafc; min-height:100vh;">
    <div class="container">
        
        <!-- Alerts Block -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-3 mb-4 text-start d-flex align-items-center gap-2" role="alert" style="background:#d1fae5; color:#065f46;">
                <i class="fas fa-check-circle"></i>
                <div>{{ session('success') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="filter: invert(30%) sepia(20%) saturate(1000%) hue-rotate(120deg);"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm rounded-3 mb-4 text-start d-flex align-items-center gap-2" role="alert" style="background:#fee2e2; color:#991b1b;">
                <i class="fas fa-exclamation-circle"></i>
                <div>{{ session('error') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="filter: invert(30%) sepia(20%) saturate(1000%) hue-rotate(340deg);"></button>
            </div>
        @endif

        <div class="row g-4">
            
            <!-- ─── LEFT COLUMN: MENU & BRIEF DETAILS ─── -->
            <div class="col-lg-3 col-md-4 col-12">
                
                <!-- Menu Sidebar Card -->
                <div class="card bg-white border p-3 rounded-4 shadow-sm text-start" style="border-color:#e2e8f0 !important; box-shadow:0 4px 20px rgba(0,0,0,0.02) !important;">
                    <ul class="list-unstyled mb-0 d-flex flex-column gap-1">
                        <li>
                            <a href="{{ route('recruiter.dashboard') }}" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 sidebar-dashboard-link {{ Route::is('recruiter.dashboard') ? 'active-link' : '' }}" style="font-size:0.92rem;">
                                <i class="fas fa-th-large"></i> Dashboard
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('recruiter.company') }}" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 sidebar-dashboard-link {{ Route::is('recruiter.company') ? 'active-link' : '' }}" style="font-size:0.92rem;">
                                <i class="far fa-building"></i> Company Profile
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('recruiter.jobs.index') }}" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 sidebar-dashboard-link {{ Route::is('recruiter.jobs.index') || Route::is('recruiter.jobs.edit') ? 'active-link' : '' }}" style="font-size:0.92rem;">
                                <i class="fas fa-briefcase"></i> My Posted Jobs
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('recruiter.jobs.create') }}" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 sidebar-dashboard-link {{ Route::is('recruiter.jobs.create') ? 'active-link' : '' }}" style="font-size:0.92rem;">
                                <i class="far fa-plus-square"></i> Post a Job
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('recruiter.applicants') }}" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 sidebar-dashboard-link {{ Route::is('recruiter.applicants') || Route::is('recruiter.applicants.detail') ? 'active-link' : '' }}" style="font-size:0.92rem;">
                                <i class="far fa-user-circle"></i> Applicants
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('recruiter.plans') }}" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 sidebar-dashboard-link {{ Route::is('recruiter.plans') ? 'active-link' : '' }}" style="font-size:0.92rem;">
                                <i class="far fa-credit-card"></i> Plan & Subscription
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('recruiter.settings') }}" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 sidebar-dashboard-link {{ Route::is('recruiter.settings') ? 'active-link' : '' }}" style="font-size:0.92rem;">
                                <i class="far fa-cog"></i> Settings
                            </a>
                        </li>
                        <li>
                            <form method="POST" action="{{ route('logout') }}" id="sidebar-logout-form">
                                @csrf
                                <button type="submit" class="btn w-100 text-start d-flex align-items-center gap-3 py-2.5 px-3 rounded-3 fw-800 text-danger hover-danger-bg border-0 bg-transparent" style="font-size:0.92rem;">
                                    <i class="fas fa-sign-out-alt"></i> Log Out
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>

                <!-- Recruiter Activity Block -->
                <div class="card bg-white border p-4 rounded-4 shadow-sm text-start mt-4" style="border-color:#e2e8f0 !important; box-shadow:0 4px 20px rgba(0,0,0,0.02) !important;">
                    <h6 class="fw-800 text-dark mb-4" style="font-size:0.95rem;">Recruiter News:</h6>
                    <div class="d-flex flex-column gap-3">
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded bg-light text-center" style="width:40px; height:40px; flex-shrink:0; font-size:1.2rem; display:flex; align-items:center; justify-content:center; background:#ccfbf1 !important;">📥</div>
                            <div>
                                <p class="text-dark small mb-1 fw-700 text-start" style="line-height:1.3; font-size:0.85rem;">New candidate application received for React Developer.</p>
                                <span class="text-muted d-block text-start" style="font-size:0.75rem;"><i class="far fa-clock me-1"></i>2 hours ago</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded bg-light text-center" style="width:40px; height:40px; flex-shrink:0; font-size:1.2rem; display:flex; align-items:center; justify-content:center; background:#fef3c7 !important;">⭐</div>
                            <div>
                                <p class="text-dark small mb-1 fw-700 text-start" style="line-height:1.3; font-size:0.85rem;">You shortlisted Ayush Sharma for UI/UX interview.</p>
                                <span class="text-muted d-block text-start" style="font-size:0.75rem;"><i class="far fa-clock me-1"></i>1 day ago</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-start gap-3">
                            <div class="rounded bg-light text-center" style="width:40px; height:40px; flex-shrink:0; font-size:1.2rem; display:flex; align-items:center; justify-content:center; background:#fee2e2 !important;">⚡</div>
                            <div>
                                <p class="text-dark small mb-1 fw-700 text-start" style="line-height:1.3; font-size:0.85rem;">WordPress Developer job listing expired.</p>
                                <span class="text-muted d-block text-start" style="font-size:0.75rem;"><i class="far fa-clock me-1"></i>3 days ago</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- ─── RIGHT COLUMN: MAIN CONTENT ─── -->
            <div class="col-lg-9 col-md-8 col-12">
                @yield('recruiter_content')
            </div>

        </div>

    </div>
</section>
@endsection

@section('styles')
<style>
    .fw-900 { font-weight: 900; }
    .fw-800 { font-weight: 800; }
    .fw-700 { font-weight: 700; }
    .fw-600 { font-weight: 600; }
    .fw-500 { font-weight: 500; }

    .text-teal-accent {
        color: #0d9488 !important;
    }
    .bg-teal-accent-light {
        background: rgba(13,148,136,0.08) !important;
    }
    .text-blue-accent {
        color: #0284c7 !important;
    }
    .bg-blue-accent-light {
        background: rgba(2,132,199,0.08) !important;
    }
    .text-warm-accent {
        color: #ca8a04 !important;
    }
    .bg-warm-accent-light {
        background: rgba(202,138,4,0.08) !important;
    }
    .text-rose-accent {
        color: #e11d48 !important;
    }
    .bg-rose-accent-light {
        background: rgba(225,29,72,0.08) !important;
    }

    /* Custom sidebar menu hover effects */
    .sidebar-dashboard-link {
        transition: all 0.2s;
        border-radius: 8px !important;
        border: none !important;
        background: transparent;
        color: #64748b;
    }
    .sidebar-dashboard-link:hover, .active-link {
        background: #0d9488 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(13,148,136,0.15);
    }
    .hover-danger-bg:hover {
        background: rgba(239,68,68,0.08) !important;
        color: #ef4444 !important;
    }
    .hover-teal-bg:hover {
        background: rgba(13,148,136,0.04) !important;
        color: #0d9488 !important;
    }

    .hover-lift {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgba(13,148,136,0.06) !important;
    }

    /* Standard Card panel settings */
    .card-recruiter-panel {
        background: #ffffff;
        border: 1px solid #e2e8f0 !important;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
        text-align: left;
    }
    .form-ctrl-light {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        padding: 0.6rem 0.8rem;
        color: #1e293b;
        font-weight: 500;
        font-size: 0.9rem;
        transition: all 0.2s;
    }
    .form-ctrl-light:focus {
        background: #ffffff;
        border-color: #0d9488;
        box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
        outline: none;
    }
    .btn-teal-gradient {
        background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
        border: none;
        color: #ffffff;
        font-weight: 700;
        border-radius: 0.5rem;
        transition: all 0.2s;
    }
    .btn-teal-gradient:hover {
        background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(13,148,136,0.2);
    }
</style>
@yield('recruiter_styles')
@endsection