@extends('layouts.user_dashboard')

@section('content')
<div class="flex flex-col md:flex-row justify-between items-center my-2 mt-6 p-4 bg-white border-2 border-gray-700 shadow-md">
    <h1 class="text-2xl font-bold text-gray-800">{{$title}}</h1>

    <div class="flex flex-col md:flex-row gap-2 mt-4 md:mt-0">
        <div class="flex gap-2">
            <label class="font-bold">Usuário:</label>
            <span class="text-gray-700">{{ auth()->user()->name }}</span>
        </div>
        <div class="flex gap-2">
            <label class="font-bold">Perfil:</label>
            <span class="text-gray-700">
                {{ auth()->user()->roles()->first()->name ?? 'Sem perfil' }}
            </span>
        </div>

    </div>
</div>
            <!-- Mensagem de Sucesso -->
            @if(session('success'))
            <div class="my-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 relative mb-4">
                <strong class="font-bold">Sucesso!</strong>
                <span class="block sm:inline">{{ session('success') }}</span>
            </div>
            @endif

            <!-- Mensagem de Erro -->
            @if($errors->any())
            <div class="my-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative mb-4">
                <strong class="font-bold">Erro!</strong>
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
<div class="container mx-auto mt-5 p-6 bg-white border-2 border-gray-600 shadow-lg ">

    <div class="py-1 px-1">
        <form action="{{ route('restrito.user.medicamentos.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Nome --}}
                <div>
                    <label for="name" class="block text-gray-700 font-semibold mb-1">Nome do Medicamento:</label>
                    <input type="text" id="name" name="name" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>

                {{-- Laboratório --}}
                <div>
                    <label for="laboratorio" class="block text-gray-700 font-semibold mb-1">Laboratório:</label>
                    <input type="text" id="laboratorio" name="laboratorio" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>

                {{-- Lote --}}
                <div>
                    <label for="lote" class="block text-gray-700 font-semibold mb-1">Lote:</label>
                    <input type="text" id="lote" name="lote"
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>

                {{-- Validade --}}
                <div>
                    <label for="validade" class="block text-gray-700 font-semibold mb-1">Validade (Mês/Ano):</label>
                    <input type="month" id="validade" name="validade"
                        class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-400" required>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {{-- Forma Farmacêutica --}}
                <div>
                    <label for="pharmaceutical_form" class="block text-gray-700 font-semibold mb-1">Forma Farmacêutica:</label>
                    <select id="pharmaceutical_form" name="pharmaceutical_form"
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                        <option value="comprimido">Comprimido</option>
                        <option value="líquido">Líquido</option>
                        <option value="pomada">Pomada</option>
                    </select>
                </div>

                {{-- Dosagem --}}
                <div>
                    <label for="dosage" class="block text-gray-700 font-semibold mb-1">Dosagem (mg, ml, etc):</label>
                    <input type="text" id="dosage" name="dosage" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>

                {{-- Quantidade Total --}}
                <div>
                    <label for="volume_quantity" class="block text-gray-700 font-semibold mb-1">Quantidade Total:</label>
                    <input type="number" id="volume_quantity" name="volume_quantity" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {{-- Quantidade Restante --}}
                <div>
                    <label for="remaining_quantity" class="block text-gray-700 font-semibold mb-1">Quantidade Restante:</label>
                    <input type="number" id="remaining_quantity" name="remaining_quantity" alt="Se usado, informe a quantidade restante" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>

                {{-- Princípio Ativo --}}
                <div>
                    <label for="active_principle" class="block text-gray-700 font-semibold mb-1">Princípio Ativo:</label>
                    <input type="text" id="active_principle" name="active_principle"
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>

                {{-- Genérico --}}
                <div>
                    <label for="generic" class="block text-gray-700 font-semibold mb-1">Genérico?</label>
                    <select id="generic" name="generic" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                        <option value="1">Sim</option>
                        <option value="0">Não</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {{-- Disponibilidade --}}
                <div>
                    <label for="is_available" class="block text-gray-700 font-semibold mb-1">Disponível para Troca?</label>
                    <select id="is_available" name="is_available" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                        <option value="1">Sim</option>
                        <option value="0">Não</option>
                    </select>
                </div>

                {{-- Receita Obrigatória --}}
                <div>
                    <label for="prescription_required" class="block text-gray-700 font-semibold mb-1">Receita Obrigatória?</label>
                    <select id="prescription_required" name="prescription_required" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                        <option value="1">Sim</option>
                        <option value="0">Não</option>
                    </select>
                </div>

                {{-- Status --}}
                <div>
                    <label for="status" class="block text-gray-700 font-semibold mb-1">Status:</label>
                    <select id="status" name="status" required
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                        <option value="novo">Novo</option>
                        <option value="usado">Usado</option>
                    </select>
                </div>
            </div>

            {{-- Descrição --}}
            <div>
                <label for="description" class="block text-gray-700 font-semibold mb-1">Descrição:</label>
                <textarea id="description" name="description" rows="3" required
                    class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400"></textarea>
            </div>

            {{-- Upload de Imagens --}}
            <div>
                <label for="image" class="block text-gray-700 font-semibold mb-1">Fotos do Medicamento:</label>
                <input type="file" id="image" name="image[]" multiple accept="image/*"
                    class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
            </div>

            {{-- Botão de Envio --}}
            <div class="flex flex-col md:flex-row gap-3 justify-center">
                <a href="{{ route('restrito.user.medicamentos.index') }}"
                    class="block px-4 py-2 w-full md:w-1/4 text-center bg-gray-700 text-white hover:bg-gray-800 transition">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Voltar
                </a>
                <button type="submit"
                    class="bg-green-600 text-white px-6 py-2 w-full md:w-1/4 text-center hover:bg-green-700 transition">
                    <i class="fa-regular fa-floppy-disk mr-2"></i>Salvar
                </button>
            </div>

        </form>
    </div>
</div>
@endsection