<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>NAJDI IGRALCA - Brezplačno poišči soigralca za šport (Slovenija)</title>
    <meta name="description" content="Manjka vam igralec? NajdiIgralca.si je vodilna brezplačna aplikacija za iskanje soigralcev za tenis, padel, nogomet in rekreacijo v Ljubljani, Mariboru in celi Sloveniji.">
    <meta name="keywords" content="najdi igralca, iščem soigralca, tenis partner, padel ljubljana, nogometni vratar, rekreacija, športni partner, slovenija, najdiigralca.si">
    <meta name="author" content="NajdiIgralca.si">
    <meta name="robots" content="index, follow">
    
    <link rel="canonical" href="https://www.najdiigralca.si/">
    
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.najdiigralca.si/">
    <meta property="og:title" content="NAJDI IGRALCA - Manjka vam en igralec?">
    <meta property="og:description" content="Ne odpoveduj termina! Poišči zamenjavo ali novega partnerja za tenis, nogomet, padel in druge športe v tvojem kraju v manj kot minuti.">
    <meta property="og:image" content="https://images.unsplash.com/photo-1526676037777-05a232554f77?q=80&w=1200">

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "NajdiIgralca.si",
      "url": "https://www.najdiigralca.si/",
      "description": "Spletna aplikacija za iskanje športnih partnerjev in soigralcev v Sloveniji.",
      "applicationCategory": "SportsApplication",
      "operatingSystem": "All",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "EUR"
      },
      "areaServed": "SI"
    }
    </script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #0ea5e9; --primary-dark: #0284c7; --secondary: #10b981; 
            --bg-body: #f8fafc; --text-main: #0f172a; --text-muted: #64748b; --radius: 12px;
        }
        body { font-family: 'Inter', sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; }
        
        /* HEADER */
        header { background: white; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
        .brand { font-size: 1.8rem; font-weight: 900; text-decoration: none; letter-spacing: -2px; font-style: italic; display: flex; align-items: center; }
        .brand-icon { color: var(--primary); margin-right: 8px; font-size: 1.6rem; }
        .brand-first { color: var(--text-main); }
        .brand-second { color: var(--primary); }

        /* HERO */
        .hero { 
            background-color: #0f172a;
            background-image: linear-gradient(rgba(15,23,42,0.85), rgba(15,23,42,0.85)), url('https://images.unsplash.com/photo-1461896836934-ffe607ba8211?auto=format&fit=crop&q=80&w=2070'); 
            background-size: cover; background-position: center; color: white; text-align: center; padding: 90px 20px; 
        }
        .hero h1 { font-size: 2.8rem; font-weight: 900; margin: 0 0 15px; letter-spacing: -1px; }
        .hero p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 25px; line-height: 1.6; opacity: 0.95; }
        
        /* UI ELEMENTS */
        .btn { padding: 12px 28px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer; transition: 0.2s; font-size: 1rem; }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { background: var(--primary); color: white; }
        .btn-sms { background: var(--secondary); color: white; display:block; text-align:center; text-decoration:none; padding:10px; border-radius:8px; width:100%; box-sizing:border-box; font-weight: 600; }
        .fab { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: var(--secondary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; box-shadow: 0 10px 20px rgba(16,185,129,0.3); z-index: 990; transition: transform 0.2s; }
        .badge { position: absolute; top: -5px; right: -5px; background: red; color: white; width: 20px; height: 20px; border-radius: 50%; font-size: 0.7rem; display: none; align-items: center; justify-content: center; font-weight: 800; border: 2px solid white; }

        /* FILTERS & GRID */
        .filters-grid { max-width: 1100px; margin: -30px auto 40px; padding: 25px; background: white; border-radius: var(--radius); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1); margin-left: 20px; margin-right: 20px; border: 1px solid #e2e8f0; }
        label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.85rem; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.5px; }
        select, textarea, input { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-family: inherit; box-sizing: border-box; font-size: 0.95rem; outline: none; }
        select:focus, textarea:focus, input:focus { border-color: var(--primary); }

        .main-grid { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
        .card { background: white; border-radius: var(--radius); padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); position: relative; border: 1px solid #f1f5f9; transition: transform 0.2s; }
        .card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08); }
        
        /* INBOX & MODALS */
        .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 2000; display: none; justify-content: center; align-items: center; }
        .modal-content { background: white; width: 95%; max-width: 480px; height: 85vh; border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
        .modal-header { padding: 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; background: white; }
        .modal-body { flex: 1; overflow-y: auto; padding: 0; background: #f8fafc; }
        
        .conv-item { padding: 18px 20px; border-bottom: 1px solid #e2e8f0; cursor: pointer; display: flex; align-items: center; gap: 15px; background: white; }
        .conv-item:hover { background: #f1f5f9; }
        .conv-item.unread { background: #ecf9ff; }
        .conv-avatar { width: 45px; height: 45px; background: linear-gradient(135deg, #cbd5e1, #94a3b8); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: white; font-size: 1.2rem; }
        
        /* Chat View */
        .chat-container { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
        .chat-bubble { background: white; padding: 12px 18px; border-radius: 18px; border-bottom-left-radius: 4px; max-width: 80%; font-size: 0.95rem; align-self: flex-start; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        /* Tvoja sporočila (Mine) - Modra */
        .chat-bubble.mine { background: var(--primary); color: white; align-self: flex-end; border-bottom-left-radius: 18px; border-bottom-right-radius: 4px; border-top-right-radius: 18px; }
        .chat-time { font-size: 0.7rem; opacity: 0.7; display: block; margin-top: 6px; text-align: right; }
        
        .chat-input-area { padding: 15px 20px; border-top: 1px solid #e2e8f0; background: white; display: flex; gap: 12px; align-items: center; }
        .chat-input-area input { border-radius: 25px; padding: 12px 20px; border: 1px solid #e2e8f0; background: #f8fafc; }
        
        .post-modal-content { height: auto; max-height: 90vh; padding: 30px; overflow-y: auto; }

        /* FOOTER (SEO Text) */
        footer { background: white; padding: 40px 20px; text-align: center; border-top: 1px solid #e2e8f0; color: var(--text-muted); }
        .footer-content { max-width: 800px; margin: 0 auto; }
        .contact-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 800; font-size: 1.3rem; text-decoration: none; }
        .seo-text { margin-top: 40px; font-size: 0.85rem; color: #cbd5e1; text-align: center; line-height: 1.5; }
    </style>
</head>
<body>

<header>
    <a href="#" class="brand"><i class="fas fa-running brand-icon"></i><span class="brand-first">NAJDI</span><span class="brand-second">IGRALCA</span></a>
    <div style="display:flex; gap:25px; align-items:center">
        <div style="position:relative; cursor:pointer" onclick="window.openInbox()">
            <i class="far fa-envelope" style="font-size:1.6rem; color:var(--text-muted); transition:color 0.2s"></i>
            <div id="inboxBadge" class="badge">0</div>
        </div>
        <div id="authSection"></div>
    </div>
</header>

<section class="hero">
    <h1>Najdi soigralca. Takoj.</h1>
    <p>Ne odpoveduj termina! Najdi zamenjavo ali novega partnerja za igro v svojem kraju v manj kot minuti.</p>
    <button class="btn btn-primary" onclick="window.postAd()">OBJAVI OGLAS 📢</button>
</section>

<div class="filters-grid">
    <div><label>Lokacija</label>
        <select id="fLoc" onchange="window.renderAds()">
            <option value="all">📍 Vsa Slovenija</option>
            <option value="ajdovscina">Ajdovščina</option><option value="beltinci">Beltinci</option><option value="bled">Bled</option><option value="bohinj">Bohinj</option><option value="borovnica">Borovnica</option><option value="bovec">Bovec</option><option value="brezice">Brežice</option><option value="celje">Celje</option><option value="cerknica">Cerknica</option><option value="crnomelj">Črnomelj</option><option value="domzale">Domžale</option><option value="dravograd">Dravograd</option><option value="gornja_radgona">Gornja Radgona</option><option value="grosuplje">Grosuplje</option><option value="hrastnik">Hrastnik</option><option value="idrija">Idrija</option><option value="ilirska_bistrica">Ilirska Bistrica</option><option value="izola">Izola</option><option value="jesenice">Jesenice</option><option value="kamnik">Kamnik</option><option value="kocevje">Kočevje</option><option value="koper">Koper</option><option value="kostanjevica">Kostanjevica na Krki</option><option value="kranj">Kranj</option><option value="kranjska_gora">Kranjska Gora</option><option value="krsko">Krško</option><option value="lasko">Laško</option><option value="lenart">Lenart</option><option value="lendava">Lendava</option><option value="litija">Litija</option><option value="ljubljana">Ljubljana</option><option value="ljutomer">Ljutomer</option><option value="logatec">Logatec</option><option value="lucija">Lucija</option><option value="maribor">Maribor</option><option value="medvode">Medvode</option><option value="menges">Mengeš</option><option value="metlika">Metlika</option><option value="mezica">Mežica</option><option value="miklavz_na_dravskem_polju">Miklavž na Dravskem polju</option><option value="murska_sobota">Murska Sobota</option><option value="nova_gorica">Nova Gorica</option><option value="novo_mesto">Novo mesto</option><option value="ormoz">Ormož</option><option value="piran">Piran</option><option value="pivka">Pivka</option><option value="polzela">Polzela</option><option value="portoroz">Portorož</option><option value="postojna">Postojna</option><option value="prevalje">Prevalje</option><option value="ptuj">Ptuj</option><option value="radovljica">Radovljica</option><option value="ravne">Ravne na Koroškem</option><option value="ribnica">Ribnica</option><option value="rogaska_slatina">Rogaška Slatina</option><option value="sevnica">Sevnica</option><option value="sezana">Sežana</option><option value="skofja_loka">Škofja Loka</option><option value="skofljica">Škofljica</option><option value="slovenj_gradec">Slovenj Gradec</option><option value="slovenska_bistrica">Slovenska Bistrica</option><option value="slovenske_konjice">Slovenske Konjice</option><option value="sentjur">Šentjur</option><option value="tolmin">Tolmin</option><option value="trbovlje">Trbovlje</option><option value="trebnje">Trebnje</option><option value="trzic">Tržič</option><option value="velenje">Velenje</option><option value="vipava">Vipava</option><option value="vrhnika">Vrhnika</option><option value="zalec">Žalec</option><option value="zelezniki">Železniki</option><option value="ziri">Žiri</option>
        </select>
    </div>
    <div><label>Šport</label>
        <select id="fSport" onchange="window.renderAds()">
            <option value="all">🏆 Vsi športi</option>
            <option value="badminton">Badminton</option><option value="fitnes">Fitnes / Gym</option><option value="futsal">Futsal</option><option value="golf">Golf</option><option value="hokej">Hokej</option><option value="hribi">Hribolazenje</option><option value="joga">Joga / Pilates</option><option value="kolesarjenje">Kolesarjenje</option><option value="kosarka">Košarka</option><option value="namizni_tenis">Namizni tenis</option><option value="nogomet">Nogomet</option><option value="odbojka">Odbojka</option><option value="odbojka_na_mivki">Odbojka na mivki</option><option value="padel">Padel</option><option value="ples">Ples</option><option value="plavanje">Plavanje</option><option value="rokomet">Rokomet</option><option value="squash">Squash</option><option value="tek">Tek</option><option value="tenis">Tenis</option>
        </select>
    </div>
    <div><label>Nivo</label>
        <select id="fLevel" onchange="window.renderAds()">
            <option value="0">Vsi nivoji</option><option value="1">1 - Začetnik</option><option value="2">2 - Slabši rekreativec</option><option value="3">3 - Srednji</option><option value="4">4 - Boljši</option><option value="5">5 - PRO</option></select>
    </div>
</div>

<div id="grid" class="main-grid"></div>
<div class="fab" onclick="window.postAd()"><i class="fas fa-plus"></i></div>

<div id="postModal" class="modal">
    <div class="modal-content post-modal-content">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:25px">
            <h2 style="margin:0; font-size:1.8rem">Nov oglas 📢</h2>
            <button onclick="closeModal('postModal')" style="border:none; background:none; cursor:pointer; font-size:1.5rem; color:var(--text-muted)">✕</button>
        </div>
        <div style="margin-bottom:20px">
            <label>Šport</label>
            <select id="adSport">
                <option value="badminton">Badminton</option><option value="fitnes">Fitnes / Gym</option><option value="futsal">Futsal</option><option value="golf">Golf</option><option value="hokej">Hokej</option><option value="hribi">Hribolazenje</option><option value="joga">Joga / Pilates</option><option value="kolesarjenje">Kolesarjenje</option><option value="kosarka">Košarka</option><option value="namizni_tenis">Namizni tenis</option><option value="nogomet">Nogomet</option><option value="odbojka">Odbojka</option><option value="odbojka_na_mivki">Odbojka na mivki</option><option value="padel">Padel</option><option value="ples">Ples</option><option value="plavanje">Plavanje</option><option value="rokomet">Rokomet</option><option value="squash">Squash</option><option value="tek">Tek</option><option value="tenis">Tenis</option>
            </select>
        </div>
        <div style="margin-bottom:20px">
            <label>Kraj</label>
            <select id="adLoc">
                <option value="ajdovscina">Ajdovščina</option><option value="beltinci">Beltinci</option><option value="bled">Bled</option><option value="bohinj">Bohinj</option><option value="borovnica">Borovnica</option><option value="bovec">Bovec</option><option value="brezice">Brežice</option><option value="celje">Celje</option><option value="cerknica">Cerknica</option><option value="crnomelj">Črnomelj</option><option value="domzale">Domžale</option><option value="dravograd">Dravograd</option><option value="gornja_radgona">Gornja Radgona</option><option value="grosuplje">Grosuplje</option><option value="hrastnik">Hrastnik</option><option value="idrija">Idrija</option><option value="ilirska_bistrica">Ilirska Bistrica</option><option value="izola">Izola</option><option value="jesenice">Jesenice</option><option value="kamnik">Kamnik</option><option value="kocevje">Kočevje</option><option value="koper">Koper</option><option value="kostanjevica">Kostanjevica na Krki</option><option value="kranj">Kranj</option><option value="kranjska_gora">Kranjska Gora</option><option value="krsko">Krško</option><option value="lasko">Laško</option><option value="lenart">Lenart</option><option value="lendava">Lendava</option><option value="litija">Litija</option><option value="ljubljana">Ljubljana</option><option value="ljutomer">Ljutomer</option><option value="logatec">Logatec</option><option value="lucija">Lucija</option><option value="maribor">Maribor</option><option value="medvode">Medvode</option><option value="menges">Mengeš</option><option value="metlika">Metlika</option><option value="mezica">Mežica</option><option value="miklavz_na_dravskem_polju">Miklavž na Dravskem polju</option><option value="murska_sobota">Murska Sobota</option><option value="nova_gorica">Nova Gorica</option><option value="novo_mesto">Novo mesto</option><option value="ormoz">Ormož</option><option value="piran">Piran</option><option value="pivka">Pivka</option><option value="polzela">Polzela</option><option value="portoroz">Portorož</option><option value="postojna">Postojna</option><option value="prevalje">Prevalje</option><option value="ptuj">Ptuj</option><option value="radovljica">Radovljica</option><option value="ravne">Ravne na Koroškem</option><option value="ribnica">Ribnica</option><option value="rogaska_slatina">Rogaška Slatina</option><option value="sevnica">Sevnica</option><option value="sezana">Sežana</option><option value="skofja_loka">Škofja Loka</option><option value="skofljica">Škofljica</option><option value="slovenj_gradec">Slovenj Gradec</option><option value="slovenska_bistrica">Slovenska Bistrica</option><option value="slovenske_konjice">Slovenske Konjice</option><option value="sentjur">Šentjur</option><option value="tolmin">Tolmin</option><option value="trbovlje">Trbovlje</option><option value="trebnje">Trebnje</option><option value="trzic">Tržič</option><option value="velenje">Velenje</option><option value="vipava">Vipava</option><option value="vrhnika">Vrhnika</option><option value="zalec">Žalec</option><option value="zelezniki">Železniki</option><option value="ziri">Žiri</option>
            </select>
        </div>
        <div style="margin-bottom:20px">
            <label>Tvoj nivo znanja</label>
            <select id="adLevel">
                <option value="1">1 - Začetnik (Se še učim osnovnih pravil in gibanja)</option>
                <option value="2">2 - Slabši rekreativec (Poznam pravila, a igra še ni tekoča)</option>
                <option value="3">3 - Srednji rekreativec (Igram redno, igra teče brez težav)</option>
                <option value="4">4 - Boljši rekreativec (Močni udarci, taktika, visok nivo)</option>
                <option value="5">5 - PRO / Tekmovalec (Aktivno tekmujem ali sem bivši profi)</option>
            </select>
        </div>
        <div style="margin-bottom:20px">
            <label>Kontaktna možnost?</label>
            <select id="adContactType" onchange="togglePhone()"><option value="app">Samo Inbox (na strani)</option><option value="sms">SMS / Tel (javno)</option></select>
        </div>
        <div id="phoneDiv" style="display:none; margin-bottom:20px"><label>Tel. številka</label><input type="text" id="adPhone" placeholder="040 123 456"></div>
        
        <label>Opis (Datum, ura, točna lokacija/igrišče...)</label>
        <textarea id="adDesc" rows="4" placeholder="Npr: Iščemo četrtega za padel, ta četrtek ob 19:00 v Športnem centru..." style="margin-bottom:25px"></textarea>
        
        <button class="btn btn-primary" onclick="saveAd()" style="width:100%; padding: 15px; font-size: 1.1rem;">OBJAVI OGLAS</button>
    </div>
</div>

<div id="inboxModal" class="modal">
    <div class="modal-content">
        <div id="inboxListView" style="display:flex; flex-direction:column; height:100%">
            <div class="modal-header">
                <h3 style="margin:0; font-size:1.3rem">Sporočila 📬</h3>
                <button onclick="closeModal('inboxModal')" style="border:none; background:none; font-size:1.5rem; cursor:pointer; color:var(--text-muted)">✕</button>
            </div>
            <div class="modal-body" id="conversationsList"></div>
        </div>

        <div id="chatView" style="display:none; flex-direction:column; height:100%">
            <div class="modal-header" style="padding: 15px 20px;">
                <button onclick="showInboxList()" style="border:none; background:none; font-weight:700; cursor:pointer; color:var(--primary); display:flex; align-items:center; gap:5px; font-size:1rem;"><i class="fas fa-chevron-left"></i> Nazaj</button>
                <h3 style="margin:0; font-size:1.1rem" id="chatPartnerName">Uporabnik</h3>
                <div style="width:60px"></div>
            </div>
            <div class="modal-body" style="padding:20px; background:#f1f5f9">
                <div id="chatMessages" class="chat-container"></div>
            </div>
            <div class="chat-input-area">
                <input type="text" id="replyInput" placeholder="Napiši odgovor...">
                <button class="btn btn-primary" style="width:auto; border-radius:25px; padding: 12px 25px;" onclick="sendReply()"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>
</div>

<div id="authModal" class="modal"><div class="modal-content" style="height:auto; text-align:center; padding:40px 30px; max-width:400px">
    <h2 style="margin-top:0; font-size:1.8rem">Prijava</h2>
    <p style="font-size:1.1rem; color:var(--text-muted); margin-bottom:30px">Za objavo oglasa ali pošiljanje sporočil se prijavi z Google računom.</p>
    <button class="btn btn-primary" onclick="loginGoogle()" style="width:100%; padding:15px; font-size:1.1rem; display:flex; align-items:center; justify-content:center; gap:10px;"><i class="fab fa-google"></i> Nadaljuj z Google</button>
    <p style="font-size:0.85rem; color:var(--danger); margin-top:20px; background:#fee2e2; padding:10px; border-radius:8px;">⚠️ Če uporabljaš Facebook/Instagram brskalnik, odpri stran v Chrome ali Safari!</p>
    <button onclick="closeModal('authModal')" style="margin-top:20px; border:none; background:none; cursor:pointer; color:var(--text-muted); font-weight:600">Prekliči</button>
</div></div>

<footer>
    <div class="footer-content">
        <p style="font-weight: 700; color: var(--text-main); font-size: 1.2rem;">Potrebuješ pomoč ali imaš predlog?</p>
        <p>Če imaš težave pri uporabi strani, želiš predlagati izboljšavo ali pa samo pozdraviti, nam piši.</p>
        <a href="mailto:info@lukezic.si" class="contact-link"><i class="far fa-envelope"></i> info@lukezic.si</a>
        
        <div class="seo-text">
            <p>NajdiIgralca je brezplačna spletna aplikacija in skupnost za rekreativne športnike v Sloveniji. Povezujemo igralce tenisa, padla, nogometa, košarke in odbojke. Iščeš soigralca za tenis v Ljubljani? Rabiš vratarja za mali nogomet v Mariboru? Ali pa partnerja za tek v Kranju? Naša aplikacija omogoča hitro iskanje zamenjav za odpadle termine.</p>
            <p>Pokrivamo kraje: Ljubljana, Maribor, Celje, Kranj, Koper, Novo mesto, Nova Gorica in ostale kraje po Sloveniji. Pridruži se in ne odpoveduj terminov!</p>
        </div>

        <p style="margin-top: 30px; font-size: 0.9rem; opacity: 0.6;">&copy; 2024 NajdiIgralca.si</p>
    </div>
</footer>

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
    import { getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";
    import { getFirestore, collection, addDoc, updateDoc, deleteDoc, doc, query, orderBy, where, onSnapshot } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js";

    const app = initializeApp({
        apiKey: "AIzaSyCGGWyvooOg1reJca5cKmTyZBFR2Dct0FI",
        authDomain: "najdi-igralca.firebaseapp.com",
        projectId: "najdi-igralca",
        storageBucket: "najdi-igralca.firebasestorage.app",
        messagingSenderId: "596231546458",
        appId: "1:596231546458:web:34a0722433a31c2a53da63"
    });

    const auth = getAuth(app);
    const db = getFirestore(app);
    let currentUser = null;
    let allAds = [];
    
    // Ločeno shranjujemo prejeta in poslana sporočila
    let incomingMessages = [];
    let outgoingMessages = [];
    let allMessages = []; 

    let currentChatPartnerId = null;
    const ADMIN_EMAIL = "jure@lukezic.si"; // TVOJ ADMIN EMAIL

    const testAds = [
        { id: 't1', name: 'Marko (Primer)', sport: 'tenis', location: 'ljubljana', level: 3, desc: 'Iščem partnerja za tenis, SMS na 040...', contactType: 'sms', phone: '040111222', uid: 'test', createdAt: { toDate: () => new Date() } },
        { id: 't2', name: 'Anže (Primer)', sport: 'nogomet', location: 'kranj', level: 4, desc: 'Rabimo golmana za danes ob 20h!', contactType: 'app', uid: 'test', createdAt: { toDate: () => new Date() } }
    ];

    window.closeModal = (id) => document.getElementById(id).style.display = 'none';
    window.togglePhone = () => document.getElementById('phoneDiv').style.display = document.getElementById('adContactType').value === 'sms' ? 'block' : 'none';
    window.postAd = () => !currentUser ? document.getElementById('authModal').style.display='flex' : document.getElementById('postModal').style.display='flex';
    window.loginGoogle = () => signInWithPopup(auth, new GoogleAuthProvider()).then(() => window.closeModal('authModal'));
    window.logoutUser = () => confirm("Odjava?") && signOut(auth).then(() => window.location.reload());

    onSnapshot(query(collection(db, "ads"), orderBy("createdAt", "desc")), (snap) => {
        allAds = []; snap.forEach(d => allAds.push({ id: d.id, ...d.data() }));
        window.renderAds();
    });

    window.renderAds = () => {
        const grid = document.getElementById('grid');
        const loc = document.getElementById('fLoc').value;
        const sport = document.getElementById('fSport').value;
        const lvl = parseInt(document.getElementById('fLevel').value);
        grid.innerHTML = "";
        
        const source = allAds.length ? allAds : testAds;
        const filtered = source.filter(ad => (loc === 'all' || ad.location === loc) && (sport === 'all' || ad.sport === sport) && (ad.level >= lvl));

        filtered.forEach(ad => {
            const isMe = currentUser && currentUser.uid === ad.uid;
            const isAdmin = currentUser && currentUser.email === ADMIN_EMAIL;
            
            let dateStr = "";
            if (ad.createdAt && ad.createdAt.toDate) {
                const d = ad.createdAt.toDate();
                dateStr = d.toLocaleDateString('sl-SI', {day: '2-digit', month: '2-digit'}) + " ob " + d.toLocaleTimeString('sl-SI', {hour: '2-digit', minute:'2-digit'});
            }

            let btn = ad.contactType === 'sms' ? `<a href="sms:${ad.phone}" class="btn-sms"><i class="fas fa-mobile-alt"></i> SMS: ${ad.phone}</a>` : `<button class="btn btn-primary" onclick="window.startChat('${ad.uid}', '${ad.name}')"><i class="far fa-comment-dots"></i> POŠLJI SPOROČILO</button>`;
            
            grid.innerHTML += `
                <div class="card">
                    ${(isMe || isAdmin) ? `<button onclick="window.deleteAd('${ad.id}')" style="position:absolute;top:15px;right:15px;background:#fee2e2;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--danger);display:flex;align-items:center;justify-content:center"><i class="fas fa-trash-alt"></i></button>` : ''}
                    <div style="display:flex;align-items:center;gap:15px;margin-bottom:15px">
                        <div style="width:50px;height:50px;background:linear-gradient(135deg, #e0f2fe, #bae6fd);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--primary-dark);font-size:1.2rem">${ad.name[0]}</div>
                        <div>
                            <h3 style="margin:0;font-size:1.2rem;font-weight:800">${ad.name}</h3>
                            <small style="color:var(--text-muted);font-weight:600"><i class="fas fa-map-marker-alt" style="margin-right:5px"></i>${ad.location.toUpperCase()}</small>
                            <small style="display:block; color:#94a3b8; font-size:0.75rem; margin-top:2px">Objavljeno: ${dateStr}</small>
                        </div>
                    </div>
                    <div style="margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap"><span style="background:#e0f2fe;color:var(--primary-dark);padding:6px 12px;border-radius:20px;font-size:0.85rem;font-weight:700"><i class="fas fa-trophy" style="margin-right:5px"></i>${ad.sport.toUpperCase()}</span> <span style="background:#f1f5f9;color:var(--text-muted);padding:6px 12px;border-radius:20px;font-size:0.85rem;font-weight:700">NIVO ${ad.level}</span></div>
                    <p style="color:var(--text-main);margin-bottom:25px;line-height:1.6;font-size:1.05rem">${ad.desc}</p>
                    ${btn}
                </div>`;
        });
    };

    window.saveAd = async () => {
        const desc = document.getElementById('adDesc').value; if(!desc) return;
        await addDoc(collection(db, "ads"), {
            name: currentUser.displayName, uid: currentUser.uid, 
            sport: document.getElementById('adSport').value, location: document.getElementById('adLoc').value, level: parseInt(document.getElementById('adLevel').value),
            desc, contactType: document.getElementById('adContactType').value, phone: document.getElementById('adPhone').value, createdAt: new Date()
        });
        window.closeModal('postModal');
    };
    
    window.deleteAd = async (id) => {
        if(confirm("Ali res želite izbrisati ta oglas?")) {
            await deleteDoc(doc(db, "ads", id));
        }
    };

    window.startChat = async (targetUid, name) => {
        if(targetUid === 'test') return alert("To je testni oglas.");
        if(!currentUser) return document.getElementById('authModal').style.display='flex';
        const msg = prompt(`Sporočilo za: ${name}`);
        if(msg) {
            await addDoc(collection(db, "messages"), { fromUid: currentUser.uid, fromName: currentUser.displayName, toUid: targetUid, text: msg, read: false, createdAt: new Date() });
            alert("Poslano!");
        }
    };

    window.openInbox = () => {
        if(!currentUser) return document.getElementById('authModal').style.display='flex';
        document.getElementById('inboxModal').style.display = 'flex';
        renderConversationList();
    };

    function updateMessagesUI() {
        allMessages = [...incomingMessages, ...outgoingMessages];
        const unreadCount = incomingMessages.filter(m => !m.read).length;
        const badge = document.getElementById('inboxBadge');
        if(unreadCount > 0) { badge.style.display = 'flex'; badge.innerText = unreadCount; } else { badge.style.display = 'none'; }
        if(document.getElementById('inboxModal').style.display === 'flex' && !currentChatPartnerId) { renderConversationList(); }
        if(currentChatPartnerId) { renderChatMessages(); }
    }

    function renderConversationList() {
        document.getElementById('inboxListView').style.display = 'flex';
        document.getElementById('chatView').style.display = 'none';
        const listDiv = document.getElementById('conversationsList');
        listDiv.innerHTML = "";
        const senders = {};
        
        incomingMessages.forEach(m => {
            if(!senders[m.fromUid]) { senders[m.fromUid] = { name: m.fromName, unread: 0, lastMsg: m }; }
            if(!m.read) senders[m.fromUid].unread++;
            if(m.createdAt.seconds > senders[m.fromUid].lastMsg.createdAt.seconds) { senders[m.fromUid].lastMsg = m; }
        });

        if(Object.keys(senders).length === 0) { listDiv.innerHTML = "<div style='text-align:center;padding:50px 20px;color:var(--text-muted)'><i class='far fa-comment-alt' style='font-size:3rem;margin-bottom:20px;opacity:0.3'></i><p style='font-size:1.2rem;font-weight:600'>Še nimaš sporočil.</p><p>Ko ti bo nekdo pisal, se bo pojavil tukaj.</p></div>"; return; }
        
        Object.keys(senders).forEach(uid => {
            const s = senders[uid];
            listDiv.innerHTML += `<div class="conv-item ${s.unread > 0 ? 'unread' : ''}" onclick="window.openChat('${uid}', '${s.name}')"><div class="conv-avatar">${s.name[0]}</div><div style="flex:1; overflow:hidden"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:5px"><strong style="font-size:1.1rem">${s.name}</strong>${s.unread > 0 ? `<span style="background:var(--primary);color:white;padding:4px 10px;border-radius:12px;font-size:0.75rem;font-weight:800">${s.unread} NOVA</span>` : ''}</div><small style="color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:0.95rem">${s.lastMsg.text}</small></div></div>`;
        });
    }

    window.openChat = async (partnerId, partnerName) => {
        currentChatPartnerId = partnerId;
        document.getElementById('inboxListView').style.display = 'none';
        document.getElementById('chatView').style.display = 'flex';
        document.getElementById('chatPartnerName').innerText = partnerName;
        renderChatMessages();
        const unreadMsgs = incomingMessages.filter(m => m.fromUid === partnerId && !m.read);
        unreadMsgs.forEach(async (m) => { await updateDoc(doc(db, "messages", m.id), { read: true }); });
    };

    function renderChatMessages() {
        const chatDiv = document.getElementById('chatMessages');
        chatDiv.innerHTML = "";
        const chatMsgs = allMessages.filter(m => 
            (m.fromUid === currentChatPartnerId && m.toUid === currentUser.uid) || 
            (m.fromUid === currentUser.uid && m.toUid === currentChatPartnerId)
        ).sort((a,b) => a.createdAt.seconds - b.createdAt.seconds);
        
        if(chatMsgs.length === 0) { chatDiv.innerHTML = "<p style='text-align:center;color:var(--text-muted);margin-top:30px'>Začetek pogovora.</p>"; }
        
        chatMsgs.forEach(m => {
            const isMine = m.fromUid === currentUser.uid;
            const time = new Date(m.createdAt.seconds * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
            chatDiv.innerHTML += `<div class="chat-bubble ${isMine ? 'mine' : ''}">${m.text}<span class="chat-time">${time}</span></div>`;
        });
        chatDiv.scrollTop = chatDiv.scrollHeight;
    }

    window.showInboxList = () => { currentChatPartnerId = null; renderConversationList(); };

    window.sendReply = async () => {
        const text = document.getElementById('replyInput').value; if(!text) return;
        await addDoc(collection(db, "messages"), { fromUid: currentUser.uid, fromName: currentUser.displayName, toUid: currentChatPartnerId, text: text, read: false, createdAt: new Date() });
        document.getElementById('replyInput').value = "";
    };

    onAuthStateChanged(auth, (user) => {
        currentUser = user;
        const section = document.getElementById('authSection');
        if(user) {
            section.innerHTML = `<div style="display:flex;align-items:center;gap:15px"><img src="${user.photoURL}" style="width:45px;height:45px;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,0.1)"><button class="btn btn-logout" onclick="logoutUser()" style="font-weight:600;padding:8px 15px;font-size:0.9rem"><i class="fas fa-sign-out-alt" style="margin-right:5px"></i> Odjava</button></div>`;
            onSnapshot(query(collection(db, "messages"), where("toUid", "==", user.uid)), (snap) => {
                incomingMessages = [];
                snap.forEach(d => incomingMessages.push({ id: d.id, ...d.data() }));
                updateMessagesUI();
            });
            onSnapshot(query(collection(db, "messages"), where("fromUid", "==", user.uid)), (snap) => {
                outgoingMessages = [];
                snap.forEach(d => outgoingMessages.push({ id: d.id, ...d.data() }));
                updateMessagesUI();
            });
        } else {
            section.innerHTML = `<button class="btn btn-primary" style="width:auto; font-weight:800; letter-spacing:0.5px" onclick="window.postAd()">PRIJAVA <i class="fas fa-chevron-right" style="margin-left:5px; font-size:0.9rem"></i></button>`;
        }
        window.renderAds();
    });
</script>
</body>
</html>