@extends('layouts.app')

@section('content')
    <div x-data="{ showTokenModal: false, showTopdownModal: false }" class="card">
        <div class="card-header flex justify-between items-center">
            <div class="flex items-center gap-4">
                <h4>Modifica Utente</h4>
                <span class="text-sm text-gray-600 dark:text-gray-300">
                    Token attuali: {{ $data['User']->saldo_token ?? 0 }}
                </span>
            </div>
            <div class="flex items-center gap-2">
                <button type="button" @click="showTokenModal = true" class="text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800">
                    Top-up Token
                </button>
                <button type="button" @click="showTopdownModal = true" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-800">
                    Top-down Token
                </button>
            </div>
        </div>
        <div class="card-body">
            <form action="{{route('user.update',$data['User'])}}" method="POST" class="max-w-md mx-auto">
                @csrf
                @method('PUT')
                <div class="mb-5 flex flex-row items-center gap-2">
                  <label for="email" class="block mb-2 text-sm font-medium w-20 text-gray-900 dark:text-white">Nome</label>
                  <input type="text" value="{{$data['User']->name}}" id="name" name="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"  />
                </div>
                <div class="mb-5 flex flex-row items-center gap-2">
                  <label for="email" class="block mb-2 text-sm font-medium w-20 text-gray-900 dark:text-white">Mail</label>
                  <input type="email" id="email" value="{{$data['User']->email}}" name="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@flowbite.com"  />
                </div>
                <div class="mb-5 flex flex-row items-center gap-2">
                  <label for="password" class="block mb-2 text-sm  w-20 font-medium text-gray-900 dark:text-white">Password</label>
                  <input type="password" id="password" name="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"  />
                </div>

                <div class="flex items-center justify-between">
                    <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
                </div>
            </form>

            <!-- Tabella Movimenti Token -->
            <div class="mt-8">
                <h4 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Movimenti Token</h4>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="px-6 py-3">Data</th>
                                <th scope="col" class="px-6 py-3">Numero Token</th>
                                <th scope="col" class="px-6 py-3">Tipo Movimento</th>
                                <th scope="col" class="px-6 py-3">Dettagli</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data['User']->tokens()->orderBy('created_at', 'desc')->get() as $token)
                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td class="px-6 py-4">
                                        {{ $token->created_at->format('d/m/Y H:i') }}
                                    </td>
                                    <td class="px-6 py-4 font-medium
                                        {{ $token->TipoMovimento == 'CREDITO' ? 'text-green-600' : 'text-red-600' }}">
                                        {{ $token->Numero }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="px-2 py-1 rounded
                                            {{ $token->TipoMovimento == 'CREDITO' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ $token->TipoMovimento }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        @if($token->TipoMovimento == 'DEBITO')
                                            @php
                                                $activeToken = App\Models\ActiveToken::where('idMovimento', $token->id)->first();
                                            @endphp
                                            @if($activeToken)
                                                Locale: {{ $activeToken->locali_id }} <br>
                                                Attivazione: {{ $activeToken->data_attivazione->format('d/m/Y H:i') }} <br>
                                                Scadenza: {{ $activeToken->data_scadenza->format('d/m/Y H:i') }}
                                            @endif
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                        Nessun movimento token
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Token Top-up Modal -->
            <div x-show="showTokenModal" x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-90"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-300"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-90"
                 class="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none">
                <div class="relative w-auto max-w-3xl mx-auto my-6">
                    <div class="relative flex flex-col w-full bg-white border-0 rounded-lg shadow-lg outline-none dark:bg-gray-800 focus:outline-none">
                        <div class="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200 dark:border-gray-700">
                            <h3 class="text-3xl font-semibold text-gray-900 dark:text-white">
                                Top-up Token
                            </h3>
                            <button @click="showTokenModal = false" class="float-right p-1 ml-auto text-3xl font-semibold leading-none text-black bg-transparent border-0 outline-none focus:outline-none">
                                <span class="block w-6 h-6 text-2xl text-black bg-transparent outline-none opacity-50 focus:outline-none">
                                    ×
                                </span>
                            </button>
                        </div>

                        <div class="relative flex-auto p-6">
                            <form action="{{ route('user.topup', $data['User']) }}" method="POST">
                                @csrf
                                <div class="mb-4">
                                    <label for="token_amount" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                        Importo Token
                                    </label>
                                    <input type="number" id="token_amount" name="token_amount" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" required>
                                </div>
                                <div class="flex items-center justify-end p-6 border-t border-solid rounded-b border-blueGray-200 dark:border-gray-700">
                                    <button type="button" @click="showTokenModal = false" class="px-6 py-2 mb-1 mr-1 text-sm font-bold text-red-500 uppercase transition-all duration-150 ease-linear outline-none background-transparent focus:outline-none">
                                        Annulla
                                    </button>
                                    <button type="submit" class="px-6 py-3 mb-1 mr-1 text-sm font-bold text-white uppercase transition-all duration-150 ease-linear bg-green-500 rounded shadow outline-none active:bg-green-600 hover:shadow-lg focus:outline-none">
                                        Conferma Top-up
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Overlay -->
            <div x-show="showTokenModal"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 z-40 bg-black opacity-50"></div>

            <!-- Top-down Token Modal -->
            <div x-show="showTopdownModal" x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-90"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-300"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-90"
                 class="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none">
                <div class="relative w-auto max-w-3xl mx-auto my-6">
                    <div class="relative flex flex-col w-full bg-white border-0 rounded-lg shadow-lg outline-none dark:bg-gray-800 focus:outline-none">
                        <div class="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200 dark:border-gray-700">
                            <h3 class="text-3xl font-semibold text-gray-900 dark:text-white">
                                Top-down Token
                            </h3>
                            <button @click="showTopdownModal = false" class="float-right p-1 ml-auto text-3xl font-semibold leading-none text-black bg-transparent border-0 outline-none focus:outline-none">
                                <span class="block w-6 h-6 text-2xl text-black bg-transparent outline-none opacity-50 focus:outline-none">
                                    ×
                                </span>
                            </button>
                        </div>

                        <div class="relative flex-auto p-6">
                            <form action="{{ route('user.topdown', $data['User']) }}" method="POST">
                                @csrf
                                <div class="mb-4">
                                    <label for="topdown_amount" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                        Importo Token da Rimuovere
                                    </label>
                                    <input type="number" id="topdown_amount" name="token_amount"
                                           min="1"
                                           max="{{ $data['User']->saldo_token ?? 0 }}"
                                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                                           required>
                                </div>
                                <div class="flex items-center justify-end p-6 border-t border-solid rounded-b border-blueGray-200 dark:border-gray-700">
                                    <button type="button" @click="showTopdownModal = false" class="px-6 py-2 mb-1 mr-1 text-sm font-bold text-red-500 uppercase transition-all duration-150 ease-linear outline-none background-transparent focus:outline-none">
                                        Annulla
                                    </button>
                                    <button type="submit" class="px-6 py-3 mb-1 mr-1 text-sm font-bold text-white uppercase transition-all duration-150 ease-linear bg-red-500 rounded shadow outline-none active:bg-red-600 hover:shadow-lg focus:outline-none">
                                        Conferma Top-down
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Overlay per Top-down Modal -->
            <div x-show="showTopdownModal"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 z-40 bg-black opacity-50"></div>
        </div>
    </div>
@endsection