@extends('theme::layout.layout')

@section('title', ''.env('APP_NAME_DASHBOARD').' | Criar Grupo')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Formulário para Criar Novo Grupo -->
    <div class="bg-white shadow-md rounded-lg p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold text-gray-800 uppercase">Criar Grupo</h2>
            <a href="{{ url('/user/telegram/index') }}" class="flex items-center text-blue-600 hover:text-blue-800">
                <i data-feather="arrow-left" class="mr-2"></i> Voltar
            </a>
        </div>

        <p class="text-gray-600 mb-6" style="margin-top: -1em;">
            Essas informações serão exibidas publicamente, portanto, tome cuidado com o que você compartilha.
        </p>

        @if ($errors->any())
            <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
                <ul class="list-disc pl-5 text-red-700">
                    @foreach ($errors->all() as $error)
                        <li class="mt-1">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('modulotelegramboot.store') }}" method="POST">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Token do Grupo -->
                <div>
                    <label for="group_token" class="block text-sm font-medium text-gray-700">Token do Grupo</label>
                    <input type="text" name="group_token" id="group_token" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                </div>
        
                <!-- Nome do Grupo -->
                <div>
                    <label for="group_name" class="block text-sm font-medium text-gray-700">Nome do Grupo</label>
                    <input type="text" name="group_name" id="group_name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                </div>
        
                <!-- Tipo de Grupo -->
                <div class="md:col-span-1">
                    <label for="group_type" class="block text-sm font-medium text-gray-700">Tipo de Grupo</label>
                    <select name="group_type" id="group_type" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                        <option value="">Selecione um tipo</option>
                        <option value="Mines">Mines</option>
                        <option value="BacBo">BacBo</option>
                        <option value="Roleta">Roleta</option>
                        <option value="Aviator">Aviator</option>
                    </select>
                </div>
        
                <!-- ID do Grupo -->
                <div>
                    <label for="group_id" class="block text-sm font-medium text-gray-700">ID do Grupo</label>
                    <input type="text" name="group_id" id="group_id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                </div>
        
                <!-- Bet -->
                <div>
                    <label for="bet" class="block text-sm font-medium text-gray-700">Bet</label>
                    <input type="text" name="bet" id="bet" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                </div>
        
                <!-- Taxa de Green -->
                <div>
                    <label for="taxa_de_green" class="block text-sm font-medium text-gray-700">Taxa de Green</label>
                    <input type="number" min="1" max="100" name="taxa_de_green" id="taxa_de_green" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                </div>
            </div>
        
            <div class="mt-8">
                <button type="submit" class="w-full md:w-auto px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500" style="width: 100%; text-transform: uppercase;">
                    <i data-feather="plus" class="inline-block mr-2"></i>Criar Grupo
                </button>
            </div>
        </form>
        
    </div>
</div>
@endsection