Sindbad~EG File Manager

<div>
    <style>
        .main-content {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        h1 {
            text-align: center;
            color: white;
            margin-bottom: 2rem;
        }

        .balance-card {
            background-color: white;
            border-radius: 10px;
            padding: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0.7rem 0;
            flex-wrap: wrap;
            border: 4px solid #c29e52;
        }

        .balance-text {
            color: #1c2b3e;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 1rem;
        }

        .balance-amount {
            background-color: #c29e52;
            color: white;
            padding: 1rem 2rem;
            border-radius: 5px;
            font-size: 2rem;
            min-width: 50px;
            text-align: center;
        }

        .table-tranfs {
            background-color: transparent;
            border: 2px solid #c29e52;
            width: calc(100% + 2.4rem);
            box-sizing: border-box;
            margin-left: -1.2rem;
            margin-right: -1.2rem;
            border-bottom: none;
        }

        .table-tranfs th, .table-tranfs td {
            border: 1px solid #c29e52;
            padding: 0.5rem;
        }

        .table-tranfs th:last-child, .table-tranfs td:last-child {
            border-right: none;
        }

        .table-tranfs tr:last-child td {
            border-bottom: none;
        }

        .transfer-section {
            background-color: white;
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .transfer-form {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .transfer-input {
            flex: 1;
            padding: 0.5rem;
            border: 3px solid #c29e52;
            border-radius: 25px;
            min-width: 200px;
        }
        .transfer-button {
            background-color: #c29e52;
            color: white;
            padding: 0.5rem 2rem;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            width: 100%;
            text-align: start;
        }

        .transactions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        .transaction-table {
            background-color: white;
            border-radius: 10px;
            padding: 1rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            color: #1c2b3e;
        }
        th {
            border-bottom: 2px solid #c29e52;
            padding: 0.5rem;
            text-align: left;
        }

        @media (max-width: 768px) {
            .transactions-grid {
                grid-template-columns: 1fr;
            }

            .balance-card {
                flex-direction: column;
                align-items: flex-start;
            }

            .balance-amount {
                margin-top: 1rem;
            }
        }
    </style>
    <div class="main-content">
        <h1 style="font-size: 4vw; text-align: center; font-weight: bold;">Mis Transacciones</h1>
        <div class="col-md-12 balance-card" style="margin: 0 auto; float: none; padding: 0.8rem 0 !important;">
            <div class="col-md-3" style="padding: 0 !important;">
                <img src="/frontend/transfer.png" alt="Coin Image" class="coin" style="width: 80%; height: auto;">
            </div>
            <div class="col-md-3">
                <div class="balance-text col-md-12" style="margin-left: 0; font-weight: bold; color: #1c2b3e;">Carsanies</div>
                <div class="balance-text col-md-12" style="margin-left: 0; font-weight: bold; color: #1c2b3e;">Disponibles:</div>
            </div>
            <div class="col-md-3">
                <div class="balance-amount">{{$usuario_monedas}}</div>
            </div>
            <div class="col-md-3" style="padding: 0 !important; margin-left: auto; display: flex; justify-content: flex-end;">
                <img src="/frontend/transfer2.png" alt="Coin Image" class="coin" style="width: 200px;">
            </div>
        </div>
        <div aria-live="polite" aria-atomic="true" style="position: relative;">
            <div id="toastContainer" style="position: fixed; top: 10px; right: 10px;"></div>
        </div>
        <div style="padding: 1em !important;" class="balance-card row mx-auto">
            <div class="col-12 text-center">
                <h2>Transferir Carsanies</h2>
                <br>
            </div>
            <div class="col-md-9 d-flex flex-wrap gap-1">
                <input type="number" class="transfer-input" placeholder="ID del usuario a transferir" wire:model="userId" autocomplete="off">
                @error('userId') <span class="error">{{ $message }}</span> @enderror
                <input type="number" class="transfer-input" placeholder="Cantidad de monto a transferir" wire:model="amount" autocomplete="off">
                @error('amount') <span class="error">{{ $message }}</span> @enderror
            </div>
            <div class="col-md-3">
                <button type="button" class="transfer-button" data-toggle="modal" data-target="#confirmModal" 
                        @if($usuario_monedas < $this->amount) disabled @endif>Enviar
                </button>
                @if($usuario_monedas < $this->amount)
                    <div style="color: red; margin-top: 0.5rem;">Monedas insuficientes</div>
                @endif
            </div>
            <!-- Modal -->
            <div class="modal fade" wire:ignore.self id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="confirmModalLabel">Confirmar Transferencia</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>Es necesario ingresar su contraseña para poder realizar la transacción.</p>
                            <input type="password" class="form-control" placeholder="Ingrese su contraseña" wire:model="password">
                            @error('password') <span class="error">{{ $message }}</span> @enderror
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal" wire:click="transferir">Guardar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="transactions-grid">
            <div class="transaction-table balance-card">
                <div class="text-center" style="color: #1c2b3e; font-weight: bold;">
                    <h2>Carsanies Recibidos</h2>
                </div>
                @if($transferencias_recibidas->count())
                    <table class="table-tranfs">
                        <thead>
                            <tr>
                                <th>EMISOR</th>
                                <th>CARSANIES</th>
                                <th>FECHA</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($transferencias_recibidas as $transferencia)
                                <tr>
                                    <td>{{$transferencia->emisor_name}}</td>
                                    <td>{{$transferencia->cantidad}}</td>
                                    <td>{{ \Carbon\Carbon::parse($transferencia->created_at)->format('d/m/Y') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="justify-content-center" style="display: flex; justify-content: center !important; margin-top: 1rem;">
                        {{ $transferencias_recibidas->links() }}
                    </div>
                @else
                    <span>Sin transferencias recibidas</span>
                @endif
            </div>
            <div class="transaction-table balance-card">
                <div class="text-center" style="color: #1c2b3e; font-weight: bold;">
                    <h2>Carsanies Enviados</h2>
                </div>
                @if($transferencias_enviadas->count())
                    <table class="table-tranfs">
                        <thead>
                            <tr>
                                <th>RECEPTOR</th>
                                <th>CARSANIES</th>
                                <th>FECHA</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($transferencias_enviadas as $transferencia)
                                <tr>
                                    <td>{{$transferencia->receptor_name}}</td>
                                    <td>{{$transferencia->cantidad}}</td>
                                    <td>{{ \Carbon\Carbon::parse($transferencia->created_at)->format('d/m/Y') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="justify-content-center" style="display: flex; justify-content: center !important; margin-top: 1rem;">
                        {{ $transferencias_enviadas->links() }}
                    </div>
                @else
                    <span>Sin transferencias enviadas</span>
                @endif
            </div>
        </div>
    </div>
</div>