@extends('layouts.user_dashboard')
@php
    /*dump([
        'Usuário' => auth()->id(),
        'Permissão' => auth()->user()->hasPermission('editar_medicamento'),
        'Dono do medicamento' => auth()->id() === $medicamento->user_id,
        'Autorizado?' => auth()->user()->can('update_medicamento', $medicamento),
    ]);*/
@endphp
@php
    /*if (Gate::allows('update_medicamento', $medicamento)) {
        echo '<p class="text-green-500">Autorizado!</p>';
    } else {
        echo '<p class="text-red-500">Não autorizado!</p>';
    }*/
@endphp
@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>

@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

@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.update', ['medicamento' => $medicamento->slug]) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT') <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-gray-700 font-semibold mb-1">Nome do Medicamento:</label>
                    <input type="text" id="name" name="name" value="{{ old('name', $medicamento->name) }}" required
                           class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>
                <div>
                    <label for="laboratorio" class="block text-gray-700 font-semibold mb-1">Laboratório:</label>
                    <input type="text" id="laboratorio" name="laboratorio" value="{{ old('laboratorio', $medicamento->laboratorio) }}" 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-2 gap-6">
                <div>
                    <label for="lote" class="block text-gray-700 font-semibold mb-1">Lote:</label>
                    <input type="text" id="lote" name="lote" value="{{ old('lote', $medicamento->lote) }}" required
                           class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>
                <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"
                           value="{{ old('validade', $medicamento->validade ? \Carbon\Carbon::parse($medicamento->validade)->format('Y-m') : '') }}"
                           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">
                <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" required
                            class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                        <option value="comprimido" {{ old('pharmaceutical_form', $medicamento->pharmaceutical_form) == 'comprimido' ? 'selected' : '' }}>Comprimido</option>
                        <option value="líquido" {{ old('pharmaceutical_form', $medicamento->pharmaceutical_form) == 'líquido' ? 'selected' : '' }}>Líquido</option>
                        <option value="pomada" {{ old('pharmaceutical_form', $medicamento->pharmaceutical_form) == 'pomada' ? 'selected' : '' }}>Pomada</option>
                    </select>
                </div>
                <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" value="{{ old('dosage', $medicamento->dosage) }}" required
                           class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>
                <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" value="{{ old('volume_quantity', $medicamento->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">
                <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" value="{{ old('remaining_quantity', $medicamento->remaining_quantity) }}" required
                           class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>
                <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" value="{{ old('active_principle', $medicamento->active_principle) }}" required
                           class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>
                <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" {{ old('generic', $medicamento->generic) == 1 ? 'selected' : '' }}>Sim</option>
                        <option value="0" {{ old('generic', $medicamento->generic) == 0 ? 'selected' : '' }}>Não</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <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" {{ old('is_available', $medicamento->is_available) == 1 ? 'selected' : '' }}>Sim</option>
                        <option value="0" {{ old('is_available', $medicamento->is_available) == 0 ? 'selected' : '' }}>Não</option>
                    </select>
                </div>
                <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" {{ old('prescription_required', $medicamento->prescription_required) == 1 ? 'selected' : '' }}>Sim</option>
                        <option value="0" {{ old('prescription_required', $medicamento->prescription_required) == 0 ? 'selected' : '' }}>Não</option>
                    </select>
                </div>
                <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" {{ old('status', $medicamento->status) == 'novo' ? 'selected' : '' }}>Novo</option>
                        <option value="usado" {{ old('status', $medicamento->status) == 'usado' ? 'selected' : '' }}>Usado</option>
                    </select>
                </div>
            </div>

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

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-gray-700 font-semibold mb-1">Fotos Atuais:</label>
                    <div class="flex flex-wrap gap-4">

                        <!-- Imprime a msg de sucesso na exclusão das imagens-->
                        <div id="alert-success" class="hidden bg-green-500 text-white p-2 rounded-md mb-4"></div>

                        @if($medicamento->imagens->isNotEmpty())
                            @foreach($medicamento->imagens as $imagem)
                                <div class="relative w-24 h-24">
                                    <img src="{{ asset('storage/' . $imagem->path) }}" alt="Imagem do Medicamento"
                                        class="w-full h-full object-cover rounded-md shadow-sm">
                                    <button type="button" class="delete-image absolute top-0 right-0 p-1 bg-red-500 text-white rounded-full shadow-md" data-id="{{ $imagem->id }}" aria-label="Excluir imagem">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </div>
                            @endforeach
                        @else
                            <p class="text-gray-500">Nenhuma imagem disponível.</p>
                        @endif
                    </div>
                    <div id="mensagem-exclusao" class="mt-2 text-sm"></div>
                </div>

                <div class="mt-4">
                    <label for="new_images" class="block text-gray-700 font-semibold mb-1">Adicionar novas imagens:</label>
                    <input type="file" id="new_images" name="images[]" multiple
                        class="w-full px-4 py-2 border focus:ring-2 focus:ring-blue-400">
                </div>
            </div>

            <div class="flex flex-col md:flex-row gap-3 justify-center mt-6">
                <a href="{{ url()->previous() }}"
                   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-yellow-400 text-white px-6 py-2 w-full md:w-1/4 text-center hover:bg-yellow-500 transition">
                    <i class="fa-solid fa-pen mr-2"></i>Atualizar
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.delete-image').forEach(button => {
            button.addEventListener('click', function (event) {
                event.preventDefault();

                if (confirm('Tem certeza que deseja excluir esta imagem?')) {
                    let imageId = this.getAttribute('data-id');

                    fetch(`/restrito/medicamento/remove-image/${imageId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            this.closest('.relative').remove();
                        } else {
                            alert('Erro ao excluir imagem.');
                            console.error('Erro ao excluir imagem:', data);
                        }
                    })
                    .catch(error => {
                        alert('Ocorreu um erro ao tentar excluir a imagem.');
                        console.error('Erro na requisição:', error);
                    });
                }
            });
        });
    });
</script>