@extends('../layouts.navigation')
@section('content')
    <form class="form-valide" method="POST" action="{{route('produto.create')}}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="quantidade" value="0">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="app-ecommerce">
                <!-- Add Product -->
                <div
                    class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
                    <div class="d-flex flex-column justify-content-center">
                        <h4 class="mb-1">Adicionar um Novo Produto</h4>
                        <p class="mb-0">Pedidos realizados em toda a sua loja</p>
                    </div>
                    <div class="d-flex align-content-center flex-wrap gap-4">
                        <div class="d-flex gap-4">
                            <button type="reset" class="btn btn-label-secondary">Descartar</button>
                            <!-- button class="btn btn-label-primary">Salvar rascunho</button-->
                        </div>
                        <button type="submit" class="btn btn-primary">Publicar produto</button>
                    </div>
                </div>
                @if (session('status'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('status') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                <div class="row">
                    <!-- First column-->
                    <div class="col-12 col-lg-8">
                        <!-- Product Information -->
                        <div class="card mb-6">
                            <div class="card-header">
                                <h5 class="card-tile mb-0">Informações do produto</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-6">
                                    <label class="form-label" for="ecommerce-product-name">Nome *</label>
                                    <input required maxlength="150" type="text" class="form-control" id="ecommerce-product-name"
                                        placeholder="Título do produto" name="produto_nome" aria-label="Título do produto" value="{{old('produto_nome')}}">
                                    
                                </div>
                                <div class="row mb-6">
                                    <div class="col"> 
                                        <label class="form-label" for="ecommerce-product-barcode">Código de barras</label>
                                        <input type="text" class="form-control" id="ecommerce-product-barcode"
                                            placeholder="0123-4567" name="codigo"
                                            aria-label="Código de barras do produto" >
                                    </div>
                                </div>
                                <div class="mb-6">
                                    <label class="form-label" for="ecommerce-product-name">Marca</label>
                                    <input type="text" class="form-control" id="ecommerce-product-marca"
                                        placeholder="Marca do produto" name="marca" aria-label="Marca do produto" value="{{old('marca')}}">
                                </div>
                                <div class="mb-6">
                                    <label class="form-label" for="ecommerce-product-name">Modelo</label>
                                    <input type="text" class="form-control" id="ecommerce-product-model"
                                        placeholder="Modelo do produto" name="modelo" aria-label="Modelo do produto" value="{{old('modelo')}}">
                                </div>
                                <!-- Description -->
                                <div>
                                    <label class="mb-1">Descrição (Opcional)</label>
                                    <div class="form-control p-0">
                                        <textarea name="descricao" id="descricao" cols="103" rows="8">{{old('desccricao')}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Product Information -->
                        <!-- Media -->
                        <div class="card mb-6">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0 card-title">Imagem do Produto</h5>
                                <a href="javascript:void(0);" class="fw-medium">Adicionar mídia pela URL</a>
                            </div>
                            <div class="card-body">
                                <!-- form action="/upload" class="dropzone needsclick p-0" id="dropzone-basic"-->
                                    <div class="dz-message needsclick">
                                        <p class="h4 needsclick pt-3 mb-2">Arraste e solte sua imagem aqui</p>
                                        <p class="h6 text-body-secondary d-block fw-normal mb-2">ou</p>
                                        <span class="needsclick btn btn-sm btn-label-primary" id="btnBrowse">Procurar
                                            imagem</span>
                                    </div>
                                    <div class="fallback">
                                        <input name="imagem" type="file">
                                    </div>
                                    @error('imagem')
                                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                                    {{ $message }}
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                            </div>
                                    @enderror
                                <!--</form> -->
                            </div>
                        </div>
                        <!-- /Media -->
                        
                    
                    </div>
                    <!-- /Second column -->

                    <!-- Second column -->
                    <div class="col-12 col-lg-4">
                        <!-- Pricing Card -->
                        <div class="card mb-6">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Preço</h5>
                            </div>
                            <div class="card-body">
                                <!-- Base Price -->
                                <div class="mb-6">
                                    <label class="form-label" for="ecommerce-product-price">Preço Unitário *</label>
                                    <input required type="number" class="form-control" id="ecommerce-product-price"
                                        placeholder="Preço" name="preco_unitario" aria-label="Preço do produto" value="{{old('preco_unitario')}}">
                                </div>
                                <!-- Discounted Price -->
                                <div class="mb-6">
                                    <label class="form-label" for="ecommerce-product-discount-price">Imposto</label>
                                    <input required type="number" class="form-control" id="ecommerce-product-discount-price"
                                        placeholder="Valor do Imposto." name="imposto"
                                        aria-label="Valor do Imposto." value="{{old('imposto')}}">
                                </div>
                                <!-- Charge tax check box -->
                                <div class="form-check ms-2 mt-2 mb-4">
                                    <input class="form-check-input" type="checkbox" value="" id="price-charge-tax"
                                        checked="">
                                    <label class="switch-label" for="price-charge-tax">Cobrar imposto sobre este
                                        produto</label>
                                </div>
                                <!-- Instock switch -->
                                <div class="d-flex justify-content-between align-items-center border-top pt-2">
                                    <span class="mb-0">Em estoque</span>
                                    <div class="w-25 d-flex justify-content-end">
                                        <div class="form-check form-switch me-n3">
                                            <input type="checkbox" class="form-check-input" checked="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Pricing Card -->
                        <!-- Organize Card -->
                        <div class="card mb-6">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Organizar</h5>
                            </div> 
                            <div class="card-body">
                                <!-- Vendor -->
                                <div class="mb-6 col ecommerce-select2-dropdown">
                                    <label class="form-label mb-1" for="expira">O produto expira? </label>
                                    <select id="expira" name="expira" class="select2 form-select"
                                        data-placeholder="Seleccione Uma opção" value="{{ old('expira') }}">
                                        <option value="1">Sim, Expira</option>
                                        <option value="0">Não, Não expira</option>
                                        
                                    </select>
                                </div>
                                <!-- Vendor -->
                                <div class="mb-6 col ecommerce-select2-dropdown">
                                    <label class="form-label mb-1" for="unidade"> Unidade </label>
                                    <select id="unidade" name="unidade" class="select2 form-select"
                                        data-placeholder="Select unidade"  value="{{old('unidade')}}">
                                        <option value="">Sem unidade</option>
                                        <optgroup label="Peso">
                                            <option value="grama">Grama (g)</option>
                                            <option value="quilograma">Quilograma (Kg)</option>
                                            <option value="tonelada">Tonelada (t)</option>
                                            <option value="quilate">Quilate (ct)</option>
                                        </optgroup>

                                        <optgroup label="Comprimento">
                                            <option value="metro">Metro (m)</option>
                                            <option value="centimetro">Centímetro (cm)</option>
                                            <option value="metro-quadrado">Metro quadrado (m²)</option>
                                            <option value="metro-cubico">Metro cúbico (m³)</option>
                                        </optgroup>

                                        <optgroup label="Volume">
                                            <option value="litro">Litro (L)</option>
                                            <option value="mililitro">Mililitro (mL)</option>
                                            <option value="litro-quadrado">Litro quadrado (L²)</option>
                                        </optgroup>

                                        <optgroup label="Quantidade/Unidade">
                                            <option value="unidade">Unidade (un)</option>
                                            <option value="caixa">Caixa (cx)</option>
                                            <option value="pacote">Pacote (pc)</option>
                                            <option value="conjunto">Conjunto (ct)</option>
                                        </optgroup>
                                    </select>
                                </div>
                                
                                <!-- Category -->
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="mb-6 col ecommerce-select2-dropdown">
                                        <label class="form-label mb-1" for="category-org">
                                            <span>Categoria</span>
                                        </label>
                                        <select id="category-org" class="select2 form-select"
                                            data-placeholder="Selecionar Categoria">
                                            <option value="">Selecionar Categoria</option>
                                            <option value="Household">Casa</option>
                                            <option value="Management">Gestão</option>
                                            <option value="Electronics">Eletrônicos</option>
                                            <option value="Office">Escritório</option>
                                            <option value="Automotive">Automotivo</option>
                                        </select>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-medium btn btn-icon btn-label-primary ms-4"><i
                                            class="icon-base ti tabler-plus icon-md"></i></a>
                                </div>
                                <!-- Collection
                                    <div class="mb-6 col ecommerce-select2-dropdown">
                                        <label class="form-label mb-1" for="collection">Collection </label>
                                        <select id="collection" class="select2 form-select" data-placeholder="Collection">
                                            <option value="">Collection</option>
                                            <option value="men-clothing">Men's Clothing</option>
                                            <option value="women-clothing">Women's-clothing</option>
                                            <option value="kid-clothing">Kid's-clothing</option>
                                        </select>
                                    </div>-->
                                <!-- Status -->
                                <div class="mb-6 col ecommerce-select2-dropdown">
                                    <label class="form-label mb-1" for="status-org">Estado *</label>
                                    <select required id="status-org" name="venda" class="select2 form-select" data-placeholder="Published" value="{{old('venda')}}">
                                        <option value="1" title="Disponível para venda">Publicado</option>
                                        <option value="0" title="Não Disponível para venda">Inativo</option>
                                    </select>
                                </div>
                                <!-- Tags -->
                                
                            </div>
                        </div>
                        <!-- /Organize Card -->
                    </div>
                    <!-- /Second column -->
                </div>
            </div>
        </div>
        <!-- / Content -->
    </form>
@endsection