@extends('layouts.tecnico.app')

@section('content')
<div class="container-fluid py-4">

@php
    $now = now();

    $onPromo = $produto->promo_price
        && $produto->promo_start
        && $produto->promo_end
        && $now->between($produto->promo_start, $produto->promo_end);

    $mainImage = $produto->images->where('is_primary',1)->first()
        ?? $produto->images->first();
@endphp

{{-- HEADER --}}
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">

    <div>
        <h3 class="fw-bold text-gold mb-1">
            <i class="fas fa-spray-can-sparkles me-2"></i>
            {{ $produto->name }}
        </h3>
        <small class="text-muted">SKU: {{ $produto->slug }}</small>
    </div>

    <div class="d-flex flex-wrap gap-2">

        {{-- DESTACAR / REMOVER DESTAQUE --}}
        <form method="POST" action="{{ route('dashboard.admin.produtos.toggle-featured',$produto) }}">
            @csrf @method('PATCH')
            <button class="btn btn-sm {{ $produto->is_featured ? 'btn-warning' : 'btn-outline-warning' }}">
                <i class="fas fa-star"></i>
                {{ $produto->is_featured ? 'Remover Destaque' : 'Destacar' }}
            </button>
        </form>

        {{-- DISPONIBILIDADE --}}
        <form method="POST" action="{{ route('dashboard.admin.produtos.toggle-status',$produto) }}">
            @csrf @method('PATCH')
            <button class="btn btn-sm {{ $produto->is_available ? 'btn-success' : 'btn-danger' }}">
                <i class="fas fa-power-off"></i>
                {{ $produto->is_available ? 'Disponível' : 'Indisponível' }}
            </button>
        </form>

        {{-- EDITAR --}}
        <a href="{{ route('dashboard.admin.produtos.edit',$produto) }}" class="btn btn-gold btn-sm">
            <i class="fas fa-edit"></i> Editar
        </a>

        {{-- REMOVER --}}
        <form method="POST"
              action="{{ route('dashboard.admin.produtos.destroy',$produto) }}"
              onsubmit="return confirm('Remover este produto?')">
            @csrf @method('DELETE')
            <button class="btn btn-danger btn-sm">
                <i class="fas fa-trash"></i>
            </button>
        </form>

    </div>
</div>

<div class="row g-4">

{{-- ================= IMAGEM ================= --}}
<div class="col-lg-5">

    <div class="perfume-main-image mb-3">
        @if($mainImage)
            <img id="mainImage" src="{{ asset('storage/'.$mainImage->image) }}">
        @else
            <div class="empty-image">Sem imagem</div>
        @endif
    </div>

    <div class="thumb-row">
        @foreach($produto->images as $img)
            <div class="position-relative">
                <img src="{{ asset('storage/'.$img->image) }}"
                     class="thumb {{ $img->is_primary ? 'active' : '' }}"
                     onclick="changeImage(this)">

                {{-- DEFINIR PRINCIPAL --}}
                <form method="POST"
                      action="{{ route('dashboard.admin.produtos.image.primary',$img) }}"
                      class="position-absolute top-0 start-0">
                    @csrf @method('PATCH')
                    <button class="btn btn-sm btn-warning">
                        <i class="fas fa-star"></i>
                    </button>
                </form>
            </div>
        @endforeach
    </div>

</div>

{{-- ================= INFO ================= --}}
<div class="col-lg-7">

{{-- DETALHES --}}
<div class="info-card">
    <h5 class="section-title">Detalhes</h5>

    <div class="grid-info">
        <div><span>Categoria</span><b>{{ $produto->category->name ?? '-' }}</b></div>
        <div><span>Marca</span><b>{{ $produto->brand ?? '-' }}</b></div>
        <div><span>Modelo</span><b>{{ $produto->model ?? '-' }}</b></div>
        <div><span>Quantidade</span><b>{{ $produto->quantity }}</b></div>
    </div>
</div>

{{-- PREÇOS --}}
<div class="info-card mt-3">

<h5 class="section-title">Preço & Promoção</h5>

<form method="POST" action="{{ route('dashboard.admin.produtos.pricing',$produto) }}">
@csrf @method('PATCH')

<div class="row g-3">

    <div class="col-md-4">
        <label>Preço Base</label>
        <input name="price" class="form-control dark-input" value="{{ $produto->price }}">
    </div>

    <div class="col-md-4">
        <label>Preço Promo</label>
        <input name="promo_price" class="form-control dark-input" value="{{ $produto->promo_price }}">
    </div>

    <div class="col-md-4">
        <label>Início</label>
        <input type="date" name="promo_start" class="form-control dark-input"
               value="{{ $produto->promo_start }}">
    </div>

    <div class="col-md-4">
        <label>Fim</label>
        <input type="date" name="promo_end" class="form-control dark-input"
               value="{{ $produto->promo_end }}">
    </div>

</div>

<button class="btn btn-gold mt-3 w-100">Atualizar Promoção</button>

</form>

{{-- PREÇO VISUAL --}}
<div class="mt-3">

@if($onPromo)
    <span class="old-price">
        {{ number_format($produto->price,2,',','.') }} Kz
    </span>

    <span class="new-price">
        {{ number_format($produto->promo_price,2,',','.') }} Kz
    </span>
@else
    <span class="new-price">
        {{ number_format($produto->price,2,',','.') }} Kz
    </span>
@endif

</div>

</div>

{{-- ESTADO --}}
<div class="info-card mt-3">
    <h5 class="section-title">Estado</h5>

    <div class="badges">
        <span class="badge {{ $produto->is_available ? 'b-success' : 'b-danger' }}">
            {{ $produto->is_available ? 'Disponível' : 'Indisponível' }}
        </span>

        <span class="badge {{ $produto->is_featured ? 'b-gold' : 'b-dark' }}">
            {{ $produto->is_featured ? 'Destaque' : 'Normal' }}
        </span>
    </div>
</div>

{{-- DESCRIÇÃO --}}
<div class="info-card mt-3">
    <h5 class="section-title">Descrição Olfativa</h5>
    <div class="text-muted small">
        {!! nl2br(e($produto->description ?? 'Sem descrição.')) !!}
    </div>
</div>

</div>
</div>
</div>

{{-- SCRIPT --}}
<script>
function changeImage(el){
    document.getElementById('mainImage').src = el.src;
}
</script>

{{-- STYLE --}}
<style>
body{background:#0b0f1a;color:#fff}

.text-gold{color:#d4af37}

.btn-gold{
    background:linear-gradient(135deg,#d4af37,#b8860b);
    color:#000;
    font-weight:600;
}

.perfume-main-image{
    background:#fff;
    border-radius:18px;
    padding:20px;
    text-align:center;
}

.perfume-main-image img{
    max-width:100%;
    max-height:420px;
    object-fit:contain;
}

.thumb-row{display:flex;gap:10px;flex-wrap:wrap}

.thumb{
    width:70px;height:70px;
    object-fit:cover;
    border-radius:10px;
    border:2px solid transparent;
    cursor:pointer;
}

.thumb.active{border-color:#d4af37}

.info-card{
    background:#0f172a;
    border:1px solid #1f2937;
    border-radius:16px;
    padding:18px;
}

.section-title{color:#d4af37;font-size:14px;margin-bottom:12px}

.grid-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.grid-info span{font-size:11px;color:#9ca3af}
.grid-info b{font-size:14px}

.dark-input{
    background:#0b1220;
    border:1px solid #1f2937;
    color:#fff;
}

.badges{display:flex;gap:8px;flex-wrap:wrap}

.badge{padding:6px 10px;border-radius:999px;font-size:12px}

.b-success{background:#16a34a}
.b-danger{background:#dc2626}
.b-gold{background:#d4af37;color:#000}
.b-dark{background:#374151}

.old-price{
    text-decoration:line-through;
    color:#ef4444;
    margin-right:8px;
}

.new-price{
    color:#d4af37;
    font-weight:700;
    font-size:18px;
}

@media(max-width:768px){
    .grid-info{grid-template-columns:1fr}
}
</style>

@endsection