@extends('layouts.app')
@section('title', 'Company Listing — JOBES')

@section('content')

<!-- ═══════════════════════════ BREADCRUMB HEADER ═══════════════════════════ -->
<section class="py-5 text-center position-relative overflow-hidden" style="background: linear-gradient(135deg, #fffbeb 0%, #fff1f2 100%); border-bottom: 1px solid #f1f5f9;">
    <!-- Abstract circular lines overlay -->
    <div class="position-absolute" style="top:-50%; left:50%; transform:translateX(-50%); width:600px; height:600px; border:1px solid rgba(244,63,94,0.04); border-radius:50%; z-index:1;"></div>
    <div class="position-absolute" style="top:-40%; left:50%; transform:translateX(-50%); width:480px; height:480px; border:1px solid rgba(244,63,94,0.06); border-radius:50%; z-index:1;"></div>
    
    <div class="container position-relative py-3" style="z-index:2;">
        <h1 class="fw-900 text-dark mb-2" style="font-size:2.5rem; letter-spacing:-1px;">Company Listing</h1>
        <nav class="d-flex justify-content-center" style="--bs-breadcrumb-divider: '›';">
            <ol class="breadcrumb mb-0" style="font-size:0.95rem; font-weight:600;">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-muted text-decoration-none hover-teal">Home</a></li>
                <li class="breadcrumb-item active text-teal-accent" aria-current="page">Company Listing</li>
            </ol>
        </nav>
    </div>
</section>

<!-- ═══════════════════════════ MAIN COMPANIES LIST AREA ═══════════════════════════ -->
<section class="py-5" style="background:#ffffff; min-height:100vh;">
    <div class="container">
        
        <form action="{{ route('companies.index') }}" method="GET" id="company-search-form">
            <!-- Carry search queries -->
            <input type="hidden" name="q" value="{{ request('q') }}">

            <div class="row g-4 mt-2">
                
                <!-- ─── FILTERS COLUMN ─── -->
                <div class="col-lg-4 col-md-12">
                    <div class="d-flex flex-column gap-4" style="position:sticky; top:100px;">
                        
                        <!-- 1. Industry Category -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Industry</h5>
                            <div class="filter-list d-flex flex-column gap-2 mt-3">
                                @foreach([
                                    'Information Technology' => 'Information Technology',
                                    'Internet & Startups' => 'Internet & Startups',
                                    'Finance & Accounting' => 'Finance & Accounting',
                                    'Design & Creative' => 'Design & Creative',
                                    'Human Resources' => 'Human Resources'
                                ] as $val => $label)
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="form-check text-start">
                                            <input class="form-check-input filter-radio-custom" type="radio" name="industry" id="ind_{{ Str::slug($val) }}" value="{{ $val }}" {{ request('industry') == $val ? 'checked' : '' }}>
                                            <label class="form-check-label text-muted small fw-600 cursor-pointer" for="ind_{{ Str::slug($val) }}">
                                                {{ $label }}
                                            </label>
                                        </div>
                                        <span class="text-muted small fw-500">({{ mt_rand(1, 10) }})</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- 2. Company Size -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Company Size</h5>
                            <div class="filter-list d-flex flex-column gap-2 mt-3">
                                @foreach([
                                    '10-50' => '10-50 Employees',
                                    '50-200' => '50-200 Employees',
                                    '200-500' => '200-500 Employees',
                                    '500-1000' => '500-1000 Employees',
                                    '10000+' => '10000+ Employees'
                                ] as $val => $label)
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="form-check text-start">
                                            <input class="form-check-input filter-radio-custom" type="radio" name="company_size" id="size_{{ Str::slug($val) }}" value="{{ $val }}" {{ request('company_size') == $val ? 'checked' : '' }}>
                                            <label class="form-check-label text-muted small fw-600 cursor-pointer" for="size_{{ Str::slug($val) }}">
                                                {{ $label }}
                                            </label>
                                        </div>
                                        <span class="text-muted small fw-500">({{ mt_rand(1, 12) }})</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- 3. Location / Cities -->
                        <div class="filter-card shadow-xs bg-white p-4 rounded-4" style="border:1px solid #f1f5f9;">
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.1rem; border-bottom:2px solid #0d9488; width:fit-content; padding-bottom:5px;">Location</h5>
                            <div class="filter-list d-flex flex-column gap-2 mt-3">
                                @foreach([
                                    'Bengaluru' => 'Bengaluru',
                                    'Mumbai' => 'Mumbai',
                                    'Pune' => 'Pune',
                                    'Delhi' => 'Delhi NCR',
                                    'Remote' => 'Remote'
                                ] as $val => $label)
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="form-check text-start">
                                            <input class="form-check-input filter-radio-custom" type="radio" name="city" id="loc_{{ Str::slug($val) }}" value="{{ $val }}" {{ request('city') == $val ? 'checked' : '' }}>
                                            <label class="form-check-label text-muted small fw-600 cursor-pointer" for="loc_{{ Str::slug($val) }}">
                                                {{ $label }}
                                            </label>
                                        </div>
                                        <span class="text-muted small fw-500">({{ mt_rand(1, 15) }})</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Apply Filters & Clear Buttons -->
                        <div class="d-flex gap-2">
                            <a href="{{ route('companies.index') }}" class="btn btn-outline-glass flex-fill py-3 fw-700 shadow-sm" style="border-radius:12px; font-size:0.92rem;">Clear All</a>
                            <button type="submit" class="btn btn-primary-gradient flex-fill py-3 fw-800" style="border-radius:12px; font-size:0.92rem;">Search Company</button>
                        </div>

                    </div>
                </div>

                <!-- ─── RESULTS COLUMN ─── -->
                <div class="col-lg-8 col-md-12">
                    
                    <!-- Upper Filter Sorting bar -->
                    <div class="d-flex justify-content-between align-items-center mb-4 p-3 bg-white rounded-4 shadow-sm" style="border:1px solid #f1f5f9;">
                        <p class="text-muted mb-0 fw-600" style="font-size:0.92rem;">
                            Showing results <span class="text-dark fw-800">{{ $companies->count() }}</span> in <span class="text-dark fw-800">{{ $companies->total() }}</span> companies list
                        </p>
                        
                        <div class="d-flex align-items-center gap-3">
                            <select name="sort" class="form-select border shadow-xs" style="width:170px; border-radius:10px; font-weight:600; font-size:0.85rem;" onchange="this.form.submit()">
                                <option value="default">Sort By(Default)</option>
                                <option value="jobs_count">Most Open Roles</option>
                            </select>

                            <!-- List/Grid Switcher Icons -->
                            <div class="d-flex gap-1">
                                <button type="button" class="btn p-2 rounded-2 border-0 view-switch-btn" id="btn-grid-view" style="width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; color:#475569;"><i class="fas fa-th-large fs-6"></i></button>
                                <button type="button" class="btn p-2 rounded-2 border-0 view-switch-btn" id="btn-list-view" style="width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#0d9488; color:#fff;"><i class="fas fa-list fs-6"></i></button>
                            </div>
                        </div>
                    </div>

                    <!-- ── LAYOUT 1: LIST VIEW CONTAINER ── -->
                    <div id="list-layout-container" class="d-flex flex-column gap-3">
                        @forelse($companies as $company)
                            <div class="card bg-white border shadow-sm p-4 rounded-4 hover-lift hover-shadow transition-all-300 position-relative" style="border-color:#f1f5f9 !important;">
                                <div class="d-flex flex-column flex-md-row align-items-start gap-4">
                                    
                                    <!-- Circular Company Logo -->
                                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-light shadow-xs" style="width:64px; height:64px; border:1px solid #f1f5f9; flex-shrink:0;">
                                        <img src="{{ $company->logo_url }}" alt="{{ $company->name }}" class="rounded-circle" style="width:52px; height:52px; object-fit:contain;">
                                    </div>
                                    
                                    <!-- Company Details Content -->
                                    <div class="flex-fill text-start">
                                        <div class="d-flex align-items-start justify-content-between mb-1">
                                            <div>
                                                <h4 class="fw-800 text-dark mb-0 fs-5 hover-teal">
                                                    <a href="{{ route('companies.show', $company->slug) }}" class="text-decoration-none text-dark">{{ $company->name }}</a>
                                                    @if($company->is_verified)
                                                        <i class="fas fa-check-circle text-teal-accent fs-6 ms-1" title="Verified"></i>
                                                    @endif
                                                </h4>
                                                <p class="text-muted mb-3 fw-600 small">{{ $company->industry ?? 'Technology' }}</p>
                                            </div>
                                        </div>

                                        <!-- Bulleted Meta Details -->
                                        <div class="row g-2 mb-3 text-muted small fw-600">
                                            <div class="col-md-6 d-flex align-items-center gap-2">
                                                <span style="color:#0d9488;">●</span> Location: <span class="text-dark fw-700">{{ $company->city ?? 'Bengaluru' }}, {{ $company->state ?? 'IN' }}</span>
                                            </div>
                                            <div class="col-md-6 d-flex align-items-center gap-2">
                                                <span style="color:#2fd1c5;">●</span> Size: <span class="text-dark fw-700">{{ $company->company_size ?? '50-200' }} Employees</span>
                                            </div>
                                        </div>

                                        <!-- Tags & Action row -->
                                        <div class="d-flex align-items-center justify-content-between pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                            <div class="d-flex gap-2">
                                                <span class="badge" style="background:#ccfbf1; color:#0d9488; border-radius:20px; font-weight:700; padding:0.35rem 0.75rem; font-size:0.75rem;">
                                                    {{ $company->jobs_count }} Open Positions
                                                </span>
                                                <span class="badge" style="background:#fef9c3; color:#ca8a04; border-radius:20px; font-weight:700; padding:0.35rem 0.75rem; font-size:0.75rem;">
                                                    Est: {{ $company->founded_year ?? '2018' }}
                                                </span>
                                            </div>

                                            <a href="{{ route('companies.show', $company->slug) }}" class="fw-800 text-teal-accent text-decoration-none small hover-teal d-flex align-items-center gap-1">
                                                Explore Jobs <i class="fas fa-arrow-right fs-7"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card shadow-sm border-0 p-5 text-center bg-white rounded-4">
                                <div style="font-size:5rem; margin-bottom:1rem;">🏢</div>
                                <h4 class="text-dark fw-800 mb-2">No Matching Companies Found</h4>
                                <p class="text-muted mb-4">Try clearing filters or search queries to find companies.</p>
                                <a href="{{ route('companies.index') }}" class="btn btn-primary-gradient px-5 py-3 fw-700 rounded-3">Browse All Companies</a>
                            </div>
                        @endforelse
                    </div>

                    <!-- ── LAYOUT 2: GRID VIEW CONTAINER ── -->
                    <div id="grid-layout-container" class="row g-4 d-none">
                        @php
                            $gradients = [
                                'linear-gradient(135deg, #fda4af 0%, #f43f5e 100%)', // Rose
                                'linear-gradient(135deg, #c084fc 0%, #8b5cf6 100%)', // Purple
                                'linear-gradient(135deg, #fed7aa 0%, #f97316 100%)', // Orange
                                'linear-gradient(135deg, #99f6e4 0%, #0d9488 100%)', // Teal
                                'linear-gradient(135deg, #bfdbfe 0%, #2563eb 100%)', // Blue
                                'linear-gradient(135deg, #fed7aa 0%, #ea580c 100%)'  // Warm Orange
                            ];
                        @endphp
                        @foreach($companies as $idx => $company)
                            <div class="col-md-6">
                                <div class="card bg-white border shadow-sm rounded-4 overflow-hidden hover-lift hover-shadow transition-all-300 position-relative h-100" style="border-color:#f1f5f9 !important;">
                                    
                                    <!-- Header cover pattern -->
                                    <div class="cover-pattern position-relative" style="height:110px; background:{{ $gradients[$idx % count($gradients)] }};">
                                        @if($company->is_verified)
                                            <span class="badge position-absolute" style="top:12px; left:12px; background:#0d9488; color:#fff; border-radius:4px; font-weight:800; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px; z-index:5;"><i class="fas fa-check-circle me-1"></i>Verified</span>
                                        @endif
                                    </div>

                                    <!-- Overlapping avatar -->
                                    <div class="position-relative text-start px-4" style="margin-top:-32px; z-index:6;">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center bg-white shadow-md" style="width:64px; height:64px; border:2px solid #ffffff; overflow:hidden;">
                                            <img src="{{ $company->logo_url }}" alt="{{ $company->name }}" style="width:100%; height:100%; object-fit:contain; padding:4px;">
                                        </div>
                                    </div>

                                    <!-- Card Content body -->
                                    <div class="card-body p-4 text-start">
                                        <h5 class="fw-800 text-dark mb-1 hover-teal fs-5">
                                            <a href="{{ route('companies.show', $company->slug) }}" class="text-decoration-none text-dark">{{ $company->name }}</a>
                                        </h5>
                                        <p class="text-muted small fw-700 mb-3">{{ $company->industry ?? 'Technology' }}</p>

                                        <!-- Bullet attributes -->
                                        <div class="d-flex flex-column gap-2 mb-4 text-muted small fw-600 border-top pt-3" style="border-top-color:#f1f5f9 !important;">
                                            <div class="d-flex align-items-center gap-2">
                                                <span style="color:#0d9488;">●</span> Location: <span class="text-dark fw-700">{{ $company->city ?? 'Bengaluru' }}, IN</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <span style="color:#2fd1c5;">●</span> Size: <span class="text-dark fw-700">{{ $company->company_size ?? '50-200' }}</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <span style="color:#a855f7;">●</span> Est. Year: <span class="text-dark fw-700">{{ $company->founded_year ?? '2018' }}</span>
                                            </div>
                                        </div>

                                        <!-- Card Footer row -->
                                        <div class="d-flex align-items-center justify-content-between pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                            <span class="badge" style="background:#ccfbf1; color:#0d9488; border-radius:20px; font-weight:700; padding:0.35rem 0.75rem; font-size:0.75rem;">
                                                {{ $company->jobs_count }} Open Roles
                                            </span>

                                            <a href="{{ route('companies.show', $company->slug) }}" class="fw-800 text-teal-accent text-decoration-none small hover-teal d-flex align-items-center gap-1">
                                                Explore Jobs <i class="fas fa-arrow-right fs-7"></i>
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Styled circular pagination -->
                    @if($companies->hasPages())
                        <div class="d-flex justify-content-center mt-5">
                            <nav>
                                <ul class="pagination gap-2 border-0">
                                    {{-- Previous Page Link --}}
                                    @if ($companies->onFirstPage())
                                        <li class="page-item disabled"><span class="page-link rounded-circle d-flex align-items-center justify-content-center text-muted" style="width:40px; height:40px; background:#f1f5f9; border:1px solid #cbd5e1;"><i class="fas fa-arrow-left"></i></span></li>
                                    @else
                                        <li class="page-item"><a href="{{ $companies->previousPageUrl() }}" class="page-link rounded-circle d-flex align-items-center justify-content-center hover-teal text-dark" style="width:40px; height:40px; border:1px solid #cbd5e1;"><i class="fas fa-arrow-left"></i></a></li>
                                    @endif

                                    {{-- Pagination Elements --}}
                                    @foreach ($companies->links()->elements[0] as $page => $url)
                                        @if ($page == $companies->currentPage())
                                            <li class="page-item active"><span class="page-link rounded-circle d-flex align-items-center justify-content-center bg-primary-gradient text-white fw-700" style="width:40px; height:40px; border:none;">{{ sprintf("%02d", $page) }}</span></li>
                                        @else
                                            <li class="page-item"><a href="{{ $url }}" class="page-link rounded-circle d-flex align-items-center justify-content-center text-dark fw-700" style="width:40px; height:40px; border:1px solid #cbd5e1;">{{ sprintf("%02d", $page) }}</a></li>
                                        @endif
                                    @endforeach

                                    {{-- Next Page Link --}}
                                    @if ($companies->hasMorePages())
                                        <li class="page-item"><a href="{{ $companies->nextPageUrl() }}" class="page-link rounded-circle d-flex align-items-center justify-content-center hover-teal text-dark" style="width:40px; height:40px; border:1px solid #cbd5e1;"><i class="fas fa-arrow-right"></i></a></li>
                                    @else
                                        <li class="page-item disabled"><span class="page-link rounded-circle d-flex align-items-center justify-content-center text-muted" style="width:40px; height:40px; background:#f1f5f9; border:1px solid #cbd5e1;"><i class="fas fa-arrow-right"></i></span></li>
                                    @endif
                                </ul>
                            </nav>
                        </div>
                    @endif

                </div>

            </div>
        </form>

    </div>
</section>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // ─── List/Grid Switcher Logic ───
    const storedView = localStorage.getItem('companies_view_mode') || 'grid';
    setViewMode(storedView);

    $('#btn-list-view').on('click', function() {
        setViewMode('list');
    });

    $('#btn-grid-view').on('click', function() {
        setViewMode('grid');
    });

    function setViewMode(mode) {
        if (mode === 'list') {
            $('#grid-layout-container').addClass('d-none');
            $('#list-layout-container').removeClass('d-none');
            $('#btn-list-view').css({'background': '#0d9488', 'color': '#ffffff'});
            $('#btn-grid-view').css({'background': '#f1f5f9', 'color': '#475569'});
        } else {
            $('#list-layout-container').addClass('d-none');
            $('#grid-layout-container').removeClass('d-none');
            $('#btn-grid-view').css({'background': '#0d9488', 'color': '#ffffff'});
            $('#btn-list-view').css({'background': '#f1f5f9', 'color': '#475569'});
        }
        localStorage.setItem('companies_view_mode', mode);
    }

    // Auto submit filters
    $('.filter-radio-custom').on('change', function() {
        $('#company-search-form').submit();
    });
});
</script>
@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;
    }
    .text-teal-accent:hover {
        color: #0f766e !important;
    }
    .bg-teal-accent-light {
        background: rgba(13,148,136,0.08) !important;
    }

    .hover-teal:hover {
        color: #0d9488 !important;
    }

    /* Custom Radio checkbox styles */
    .filter-radio-custom {
        width: 17px;
        height: 17px;
        border-color: #cbd5e1;
        cursor: pointer;
    }
    .filter-radio-custom:checked {
        background-color: #0d9488 !important;
        border-color: #0d9488 !important;
    }

    /* hover lift transition */
    .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;
        border-color: rgba(13,148,136,0.2) !important;
    }

    .pagination .page-item .page-link {
        color: #475569;
        background-color: #fff;
    }
    .pagination .page-item.active .page-link {
        color: #fff;
    }
</style>
@endsection