@extends('layouts.admin.app')

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

    {{-- HEADER --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h3 class="fw-bold text-gradient mb-1">
                <i class="fas fa-spray-can-sparkles me-2"></i> Novo Produto
            </h3>
            <small class="text-muted">Cadastro de produtos da perfumaria</small>
        </div>
    </div>

    {{-- CARD FORM --}}
    <div class="card glass-card border-0 shadow-lg">
        <div class="card-body p-4">

            <form action="{{ route('dashboard.admin.produtos.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row g-4">

                    {{-- CATEGORIA --}}
                    <div class="col-md-6">
                        <label class="form-label text-light">Categoria</label>
                        <select name="category_id" class="form-select modern-input" required>
                            <option disabled selected>Selecionar categoria</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- NOME --}}
                    <div class="col-md-6">
                        <label class="form-label text-light">Nome do Produto</label>
                        <input name="name" class="form-control modern-input" placeholder="Ex: Dior Sauvage 100ml" required>
                    </div>

                    {{-- MARCA --}}
                    <div class="col-md-6">
                        <label class="form-label text-light">Marca</label>
                        <input name="brand" class="form-control modern-input" placeholder="Ex: Dior">
                    </div>

                    {{-- PREÇO --}}
                    <div class="col-md-6">
                        <label class="form-label text-light">Preço</label>
                        <input name="price" type="number" step="0.01" class="form-control modern-input" required>
                        <small class="text-muted">IVA calculado automaticamente pelo sistema</small>
                    </div>

                    {{-- PROMOÇÃO --}}
                    <div class="col-md-4">
                        <label class="form-label text-light">Preço Promocional</label>
                        <input name="promo_price" type="number" step="0.01" class="form-control modern-input">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label text-light">Início Promoção</label>
                        <input name="promo_start" type="date" class="form-control modern-input">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label text-light">Fim Promoção</label>
                        <input name="promo_end" type="date" class="form-control modern-input">
                    </div>

                    {{-- FLAGS --}}
                    <div class="col-12 d-flex gap-4 mt-2">

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_available" checked>
                            <label class="form-check-label text-light">Disponível</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_featured">
                            <label class="form-check-label text-light">Destaque</label>
                        </div>

                    </div>

                    {{-- DESCRIÇÃO (substitui specifications) --}}
                    <div class="col-12">
                        <label class="form-label text-light">Descrição do Produto</label>
                        <textarea name="description" rows="5" class="form-control modern-input"
                                  placeholder="Descreva o perfume, notas olfativas, etc..."></textarea>
                    </div>

                    {{-- IMAGENS --}}
                    <div class="col-12">
                        <label class="form-label text-light">Imagens do Produto</label>
                        <input type="file" name="images[]" multiple class="form-control modern-input">
                    </div>

                </div>

                {{-- BOTÃO --}}
                <div class="mt-4">
                    <button class="btn btn-gradient w-100 py-2 fw-semibold">
                        <i class="fas fa-save me-2"></i> Guardar Produto
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

{{-- STYLE PREMIUM PERFUMARIA --}}
<style>

body {
    background: #020617;
}

/* GRADIENT TEXT */
.text-gradient {
    background: linear-gradient(90deg, #f97316, #fb923c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* GLASS CARD */
.glass-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    border-radius: 18px;
}

/* INPUTS MODERNOS */
.modern-input {
    background: #0f172a;
    border: 1px solid #1e293b;
    color: #fff;
    border-radius: 12px;
    padding: 12px;
    transition: .3s;
}

.modern-input:focus {
    border-color: #fb923c;
    box-shadow: 0 0 0 .2rem rgba(251,146,60,.25);
    background: #0f172a;
    color: #fff;
}

/* LABEL */
.form-label {
    font-weight: 600;
    font-size: .9rem;
}

/* BUTTON PREMIUM */
.btn-gradient {
    background: linear-gradient(135deg, #fb923c, #f97316);
    border: none;
    color: #fff;
    border-radius: 12px;
    transition: .3s;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(249,115,22,.3);
}

/* CHECKBOX */
.form-check-input {
    background-color: #0f172a;
    border: 1px solid #334155;
}

.form-check-input:checked {
    background-color: #fb923c;
    border-color: #fb923c;
}

/* RESPONSIVO */
@media(max-width:768px){
    .glass-card {
        padding: 10px;
    }
}

</style>
@endsection