@extends('layout.user')

@section('content')
@php
  // ✅ Theme from GeneralSetting (safe fallbacks)
  $gs   = \App\Models\GeneralSetting::first();

  // 🔵 Blue theme (forced for this page)
  $b1   = '#2563eb';
  $b2   = '#1d4ed8';
  $ink  = $gs->text_color ?? '#0f172a';
  $bgc  = $gs->background_color ?? '#ffffff';

  // ✅ General logo fallback (when user photo missing)
  $logoRaw = $gs->logo ?? null;
  $logoUrl = null;
  if($logoRaw){
    if(preg_match('/^https?:\/\//i', $logoRaw)){
      $logoUrl = $logoRaw;
    }else{
      $logoUrl = asset($logoRaw);
    }
  }

  // Average & count
  $avg   = (float) (\App\Models\Review::avg('rating') ?? 0);
  $count = (int) (\App\Models\Review::count() ?? 0);
@endphp

<style>
  :root{
    --b1: {{ $b1 }};
    --b2: {{ $b2 }};
    --ink: {{ $ink }};
    --bg: {{ $bgc }};
    --ring: rgba(37,99,235,.35);
    --ring2: rgba(29,78,216,.55);
    --soft: #eff6ff;
    --card: #ffffff;
  }

  #reviewPage a,
  #reviewPage a:hover,
  #reviewPage a:active,
  #reviewPage a:visited{
    text-decoration:none !important;
    -webkit-tap-highlight-color:transparent;
  }

  .bd-card{
    background:var(--card);
    border:1.5px solid var(--ring);
    border-radius:18px;
    box-shadow:0 10px 22px rgba(2,6,23,.06);
  }
  .bd-soft{
    border:1.5px solid var(--ring);
    border-radius:14px;
    background:var(--soft);
  }

  .hero{
    background:linear-gradient(135deg,var(--b1),var(--b2));
    border-radius:18px;
    border:1.5px solid rgba(255,255,255,.18);
    overflow:hidden;
    position:relative;
  }
  .hero:before{
    content:"";
    position:absolute;
    top:-60px; right:-60px;
    width:180px; height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
  }
  .hero:after{
    content:"";
    position:absolute;
    bottom:-70px; left:-70px;
    width:220px; height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
  }
  .hero .content{position:relative; z-index:2; color:#fff; text-align:center; padding:20px 14px}
  .hero h2{font-weight:1000; margin:0}
  .hero p{margin:6px auto 0; max-width:680px; opacity:.95; font-weight:600}

  .title-grad{
    -webkit-background-clip:text;background-clip:text;color:transparent;
    background-image:linear-gradient(90deg,var(--b1),var(--b2));
  }
  .chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius:999px;
    background:linear-gradient(90deg,var(--b1),var(--b2));
    color:#fff; font-weight:1000;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 10px 18px rgba(37,99,235,.18);
    white-space:nowrap;
  }

  .field{
    width:100%;
    border:1.5px solid var(--ring);
    border-radius:12px;
    padding:10px 12px;
    outline:none;
    transition:.15s;
    background:#fff;
    color:var(--ink);
  }
  .field:focus{
    border-color:var(--ring2);
    box-shadow:0 0 0 4px rgba(37,99,235,.16);
  }

  .btn-blue{
    border:1.5px solid rgba(255,255,255,.18);
    background:linear-gradient(135deg,var(--b1),var(--b2));
    color:#fff;
    font-weight:1000;
    border-radius:12px;
    padding:10px 18px;
    box-shadow:0 12px 22px rgba(37,99,235,.22);
    transition:.15s;
  }
  .btn-blue:hover{filter:brightness(1.06); transform:translateY(-1px)}
  .btn-blue:active{transform:translateY(0)}

  .star-rating{
    direction:rtl;
    display:flex;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .star-rating input[type="radio"]{ display:none }
  .star-rating label{
    font-size:34px;
    color:#cbd5e1;
    cursor:pointer;
    transition:color .15s ease;
    line-height:1;
    user-select:none;
  }
  .star-rating input[type="radio"]:checked ~ label,
  .star-rating label:hover,
  .star-rating label:hover ~ label{ color:#f59e0b; }

  .avatar{
    width:54px; height:54px;
    border-radius:999px;
    border:2px solid rgba(37,99,235,.40);
    background:#fff;
    overflow:hidden;
    display:grid;
    place-items:center;
    flex-shrink:0;
    box-shadow:0 10px 18px rgba(37,99,235,.10);
  }
  .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:999px;
    display:block;
  }
  .avatar-fallback{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-weight:1000;
    color:#fff;
    background:linear-gradient(135deg,var(--b1),var(--b2));
    border-radius:999px;
  }

  .review-card{ position:relative; overflow:hidden; }
  .review-card:before{
    content:"";
    position:absolute;
    top:-26px; right:-26px;
    width:110px;height:110px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
  }

  .pg-btn{
    border:1.5px solid var(--ring);
    border-radius:10px;
    padding:8px 12px;
    background:#fff;
    font-weight:800;
    color:var(--ink);
    display:inline-block;
  }
  .pg-btn:hover{background:var(--soft)}
  .pg-disabled{opacity:.6; pointer-events:none; background:#f8fafc}
</style>

<div id="reviewPage" class="container py-4" style="background:var(--bg);">

  {{-- ===== Header ===== --}}
  <div class="hero mb-4">
    <div class="content">
      <h2><i class="fa fa-star"></i> রেটিংস & রিভিউ</h2>
      <p>আপনার মতামত আমাদের জন্য অমূল্য। ⭐ আপনার অভিজ্ঞতা শেয়ার করুন এবং অন্যদের সাহায্য করুন।</p>
    </div>
  </div>

  {{-- ===== Alerts ===== --}}
  @if(session('success'))
    <div class="bd-soft p-3 mb-3" style="color:#065f46;background:#ecfdf5;border-color:#86efac;">
      <i class="fa-solid fa-circle-check me-1"></i> {{ session('success') }}
    </div>
  @endif

  @if($errors->any())
    <div class="bd-soft p-3 mb-3" style="color:#7f1d1d;background:#fef2f2;border-color:#fecaca;">
      <ul class="mb-0 ps-3">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
      </ul>
    </div>
  @endif

  {{-- ===== Review Form ===== --}}
  <div class="bd-card mb-5">
    <div class="p-3 text-white fw-bold"
         style="border-bottom:1.5px solid rgba(255,255,255,.18);background:linear-gradient(90deg,var(--b1),var(--b2));border-top-left-radius:18px;border-top-right-radius:18px;">
      আপনার রিভিউ দিন
    </div>

    <div class="p-4">
      <form action="{{ route('reviews.store') }}" method="POST">
        @csrf

        {{-- Rating --}}
        <div class="text-center mb-3">
          <label class="d-block mb-2 fw-semibold" style="color:var(--ink)">রেটিং (১-৫ স্টার)</label>
          <div class="star-rating">
            @for ($i = 5; $i >= 1; $i--)
              <input type="radio" name="rating" id="star{{ $i }}" value="{{ $i }}" {{ old('rating') == $i ? 'checked' : '' }} required>
              <label for="star{{ $i }}">★</label>
            @endfor
          </div>
        </div>

        {{-- Comment --}}
        <div class="mb-3">
          <label for="comment" class="fw-semibold mb-2 d-block" style="color:var(--ink)">আপনার রিভিউ</label>
          <textarea name="comment" id="comment" class="field" rows="3" placeholder="কিছু লিখুন..." required>{{ old('comment') }}</textarea>
        </div>

        <div class="text-center">
          <button type="submit" class="btn-blue">
            সাবমিট করুন <i class="fa-solid fa-paper-plane ms-1"></i>
          </button>
        </div>
      </form>
    </div>
  </div>

  {{-- ===== Title + Avg chip ===== --}}
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <h4 class="mb-0 title-grad fw-bold">সকল ইউজারের রিভিউ</h4>

    @if($count > 0)
      <div class="chip" title="মোট {{ $count }}টি রিভিউ">
        <i class="fa-solid fa-star"></i>
        {{ number_format($avg, 1) }}/5 • {{ $count }}
      </div>
    @endif
  </div>

  {{-- ===== Reviews ===== --}}
  <div class="row">
    @foreach($reviews as $review)
      @php
        $user = $review->user;

        // ✅ user photo raw
        $userPhotoRaw = $user ? ($user->profile_photo ?? null) : null;

        // ✅ build user photo URL safely (NO nested ternary)
        $userPhotoUrl = null;
        if($userPhotoRaw){
          if(preg_match('/^https?:\/\//i', $userPhotoRaw)){
            $userPhotoUrl = $userPhotoRaw;
          }else{
            // If already saved like "images/profile/xx.jpg" or "storage/xx.jpg"
            if(strpos($userPhotoRaw, 'images/') === 0 || strpos($userPhotoRaw, 'storage/') === 0){
              $userPhotoUrl = asset($userPhotoRaw);
            }else{
              $userPhotoUrl = asset('images/profile/'.$userPhotoRaw);
            }
          }
        }

        $initial = $user ? strtoupper(mb_substr($user->name ?? 'U', 0, 1)) : '?';
      @endphp

      <div class="col-md-6 col-lg-4 mb-4">
        <div class="bd-card p-4 h-100 review-card">

          {{-- User row --}}
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="avatar">
              @if($userPhotoUrl)
                <img src="{{ $userPhotoUrl }}" alt="Profile">
              @elseif($logoUrl)
                <img src="{{ $logoUrl }}" alt="Logo">
              @else
                <div class="avatar-fallback">{{ $initial }}</div>
              @endif
            </div>

            <div class="min-w-0">
              <div class="fw-bold text-truncate" style="color:var(--ink)" title="{{ $user ? $user->name : '' }}">
                {{ $user ? ($user->name ?? 'Unknown User') : 'Unknown User' }}
              </div>

              @if($user && $user->referral_code)
                <small class="text-muted">আইডি: {{ $user->referral_code }}</small>
              @endif
            </div>
          </div>

          {{-- Stars --}}
          <div class="mb-2" style="font-size:18px;">
            @for ($i = 1; $i <= (int)$review->rating; $i++)
              <span class="text-warning">★</span>
            @endfor
            @for ($i = (int)$review->rating + 1; $i <= 5; $i++)
              <span class="text-muted">★</span>
            @endfor
          </div>

          {{-- Comment --}}
          <p class="text-secondary fst-italic mb-0">“{{ $review->comment }}”</p>

          {{-- Date --}}
          <div class="mt-3 pt-2" style="border-top:1.5px solid var(--ring);">
            <small class="text-muted">
              <i class="fa-regular fa-clock me-1" style="color:var(--b1)"></i>
              {{ $review->created_at->format('d M, Y') }}
            </small>
          </div>

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

  {{-- ===== Pagination ===== --}}
  @if($reviews->hasPages())
    <div class="mt-3 d-flex justify-content-center">
      @if ($reviews->onFirstPage())
        <span class="pg-btn pg-disabled mx-1">← পূর্ববর্তী</span>
      @else
        <a href="{{ $reviews->previousPageUrl() }}" class="pg-btn mx-1">← পূর্ববর্তী</a>
      @endif

      @if ($reviews->hasMorePages())
        <a href="{{ $reviews->nextPageUrl() }}" class="pg-btn mx-1">পরবর্তী →</a>
      @else
        <span class="pg-btn pg-disabled mx-1">পরবর্তী →</span>
      @endif
    </div>
  @endif

</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
@endsection