@extends('operations.layout.mainlayout')

@section('content')
<style>
.item {
    background-color: rgb(18 221 24 / 13%) !important;
}

#ai-transactions-table {
    font-size: 14px;
}

.btn-blz {
    color: var(--blazma-primary);
    border-color: var(--blazma-primary);
    padding: 4px 16px;
    border-radius: 30px;
    font-size: 14px;
    margin: 2px;
    min-width: 80px;
    background: transparent;
}

.btn-blz:hover {
    color: #fff;
    background-color: var(--blazma-primary);
    border-color: var(--blazma-primary);
}

#ai-transactions-table .badge {
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: normal;
}

.badge-credit {
    background: #28a745;
    color: #ffffff !important;
}

.badge-debit {
    background: #dc3545;
    color: #ffffff !important;
}

div.dataTables_wrapper div.dataTables_filter {
    display: inline;
    float: left;
}

.action-buttons {
    white-space: nowrap;
}

#ai-transactions-table_wrapper .dataTables_paginate {
    float: right;
    margin-top: 10px;
}

#ai-transactions-table_wrapper .dataTables_info {
    padding-top: 10px;
}

.table-responsive {
    overflow-x: hidden;
}

#ai-transactions-table_wrapper .dt-buttons {
    float: right;
}

#ai-transactions-table_filter {
    float: left;
}

#ai-transactions-table_filter input {
    border-radius: 30px;
    border: 1px solid #ddd;
    padding: 4px 12px;
}

.balance-display {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.balance-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.balance-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    margin: 0;
}

.balance-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.balance-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.balance-badge.positive {
    color: #28a745;
    border-color: #28a745;
}

.balance-badge.warning {
    color: #ffc107;
    border-color: #ffc107;
}

.balance-badge.danger {
    color: #dc3545;
    border-color: #dc3545;
}

.balance-number {
    font-size: 1.1rem;
    font-weight: 700;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.positive {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.status-badge.warning {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.status-badge.danger {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

@media (max-width: 768px) {
    .balance-inline {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .balance-badge {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .balance-number {
        font-size: 1rem;
    }

    .status-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .balance-label {
        font-size: 0.8rem;
    }
}
</style>
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">

<div class="content-header p-0">
    <div class="container-fluid card m-0">
        <div class="row">
            <div class="col-sm-8 m-0 card">
                <h1 class="card-body m-0 text-dark" style="color: var(--blazma-text)!important;">AI Transaction Balance</h1>
            </div>
            <div class="col-sm-4 m-0 card d-flex align-items-center justify-content-end">
                <div class="card-body m-0 p-2">
                    <div class="balance-display">
                        <div class="balance-inline">
                            <div class="balance-badge {{ $balance > 0 ? 'positive' : ($balance == 0 ? 'warning' : 'danger') }}">
                                <i class="fas fa-coins"></i>
                                <span class="balance-number">{{ number_format($balance) }}</span>
                                <span>Credits</span>
                                @if($balance > 0)
                                    <span class="status-badge positive">
                                    <i class="fas fa-check-circle"></i>
                                    Available
                                </span>
                                @elseif($balance == 0)
                                    <span class="status-badge warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    Empty
                                </span>
                                @else
                                    <span class="status-badge danger">
                                    <i class="fas fa-times-circle"></i>
                                    Negative
                                </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ai-transactions-table" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Transaction Type</th>
                                        <th>Quantity</th>
                                        <th>Order ID</th>
                                        <th>Identification</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('footer-scripts')
<script>
$(document).ready(function() {
    $('#ai-transactions-table').DataTable({
        dom: '<"row"<"col-sm-6"f><"col-sm-6"B>>rt<"row"<"col-sm-12"ip>>',
        language: {
            paginate: {
                next: '&#8594;',
                previous: '&#8592;',
            },
            searchPlaceholder: "Search here"
        },
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        pageLength: 10,
        lengthChange: false,
        processing: true,
        serverSide: true,
        "autoWidth": false,
        "order": [[ 0, "desc" ]],
        ajax: {url: '/operations/ai-transactions/datatable'},
        columns: [
            {data: 'ID', title: 'ID'},
            {
                data: 'TRANSACTION_TYPE',
                title: 'Transaction Type',
                render: function(data, type, row) {
                    if (data) {
                        const badgeClass = data.toUpperCase() === 'CREDIT' ? 'badge-credit' : 'badge-debit';
                        return '<span class="badge ' + badgeClass + '">' + data + '</span>';
                    }
                    return '';
                }
            },
            {
                data: 'QTY',
                title: 'Quantity',
                render: function(data, type, row) {
                    if (data) {
                        const isCredit = row.TRANSACTION_TYPE && row.TRANSACTION_TYPE.toUpperCase() === 'CREDIT';
                        const sign = isCredit ? '+' : '-';
                        const color = isCredit ? 'text-success' : 'text-danger';
                        return '<span class="' + color + '">' + sign + Math.abs(data) + '</span>';
                    }
                    return '';
                }
            },
            {
                data: 'END_USER_LAB_ORDER_ID',
                title: 'Order ID',
                render: function(data, type, row) {
                    if (data) {
                        return '<a href="/operations/reservations/' + data + '" class="btn-blz" style="text-decoration: none;">' + data + '</a>';
                    }
                    return '';
                }
            },
            {data: 'IDENTIFICATION', title: 'Identification'},
            {
                data: 'created_at',
                title: 'Date',
                render: function(data, type, row) {
                    if (data) {
                        const date = new Date(data);
                        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
                    }
                    return '';
                }
            }
        ]
    });
});
</script>
@endsection