@extends('layout.user')

@section('title', 'আমার ফেভারিট')

@section('content')

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

<style>
  .blue-border{
    border:1.5px solid #2563eb !important;
  }

  .product-card{
    position:relative;
  }

  .fav-btn{
    position:absolute;
    top:8px;
    right:8px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#ef4444;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    border:1px solid #ef4444;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    cursor:pointer;
    z-index:5;
  }

  .fav-btn i{
    color:#fff;
  }

  .title-box{
    border:1.5px solid #2563eb;
    border-radius:6px;
    padding:4px 6px;
    margin-bottom:6px;
  }

  .price-row{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-top:2px;
  }

  .price-label{
    color:#6b7280;
  }

  .price-value{
    font-weight:600;
  }

  .admin-price{
    color:#2563eb;
    font-weight:700;
  }
</style>

<div class="mx-auto max-w-6xl px-2 sm:px-3 md:px-4 mt-2">

  {{-- Header --}}
  <div class="flex items-center justify-between mb-3">
    <h1 class="text-lg font-semibold">আমার ফেভারিট</h1>

    <a href="{{ route('shop.index') }}"
       class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm blue-border bg-white">
      <i class="fa-solid fa-shop text-indigo-600"></i> শপে ফিরে যান
    </a>
  </div>

  {{-- Success Message --}}
  @if(session('success'))
    <div class="mb-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-emerald-800 text-sm shadow-sm">
      <i class="fa-solid fa-check-circle text-emerald-600"></i> {{ session('success') }}
    </div>
  @endif

  {{-- Products --}}
  @if($favorites->count())

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">

      @foreach($favorites as $fav)
        @php $p = $fav->product; @endphp
        @if($p)

        <div class="rounded-xl bg-white blue-border overflow-hidden product-card">

          {{-- ❤️ Always Active Favorite --}}
          <form action="{{ route('user.favorites.remove',$p->id) }}"
                method="POST">
            @csrf
            <button type="submit" class="fav-btn">
              <i class="fa fa-heart"></i>
            </button>
          </form>

          <a href="{{ route('shop.product', $p->slug) }}">
            <div class="aspect-[4/3] bg-gray-50 flex items-center justify-center">
              <img src="{{ $p->banner_photo }}"
                   class="h-[92%] w-[92%] object-contain">
            </div>
          </a>

          <div class="p-2">

            {{-- Title --}}
            <div class="title-box text-[13px] font-medium text-gray-900 line-clamp-2 min-h-[36px]">
              {{ $p->title }}
            </div>

            {{-- Reseller Price --}}
            <div class="price-row">
              <span class="price-label">Reseller Price</span>
              <span class="price-value">
                ৳{{ number_format($p->reseller_price,2) }}
              </span>
            </div>

            {{-- Admin Price --}}
            <div class="price-row">
              <span class="price-label">Admin Price</span>
              <span class="admin-price">
                ৳{{ number_format($p->admin_price,2) }}
              </span>
            </div>

            {{-- Order Button --}}
            <a href="{{ route('order.create',$p->slug) }}"
               class="mt-2 block text-center rounded-lg bg-indigo-600 text-white text-[12px] py-1.5">
              অর্ডার
            </a>

          </div>
        </div>

        @endif
      @endforeach

    </div>

    {{-- Pagination --}}
    <div class="mt-4">
      {{ $favorites->links() }}
    </div>

  @else

    <div class="blue-border p-6 text-center text-gray-500 rounded-xl bg-white">
      <i class="fa-regular fa-heart text-xl mb-1 block text-gray-400"></i>
      কোনো ফেভারিট প্রোডাক্ট নেই।
    </div>

  @endif

</div>

@endsection