@extends('layouts.default')

@section('content')

<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">

<div class="card-section-header">
    <div class="d-flex justify-content-between align-items-start w-100">
        <div>
            <h2 class="card-section-title">Transactions</h2>
            <p class="card-section-subtitle">Manage transactions.</p>
        </div>
        <a href="{{ route('transactions.create') }}" class="btn btn-primary">
            <i class="fa fa-plus"></i><span class="btn-text">&nbsp;New Transaction</span>
        </a>
    </div>
</div>
<div class="wrapper wrapper-content">

    <!-- Desktop DataTable View -->
    <div class="row d-none d-lg-block">
        <div class="col-lg-12">
            <table class="table table-striped table-bordered table-hover" style="width: 100%;" id="transactions-table">
                <thead>
                    <tr>
                        <th>Sr. NO</th>
                        <th>Date</th>
                        <th>Transaction No</th>
                        <th>Customer Name</th>
                        <th>Total Sales</th>
                        <th>Total Purchase</th>
                        <th>Total Net Amount</th>
                        <th>Payment Mode</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Mobile Card View -->
    <div class="mobile-transactions-container d-lg-none">
        <div class="mb-3">
            <label class="form-label fw-bold">Search:</label>
            <input type="text" class="form-control" id="mobile-search-input" placeholder="Search transactions...">
        </div>
        <div id="mobile-transactions-cards" class="mobile-transactions-list">
            <!-- Cards will be populated here -->
        </div>
        <div id="mobile-transactions-pagination" class="mt-3 d-flex justify-content-center">
            <!-- Pagination will be populated here -->
        </div>
        <div id="mobile-transactions-loading" class="text-center py-4" style="display: none;">
            <i class="fa fa-spinner fa-spin fa-3x"></i>
        </div>
    </div>
</div>
@push('scripts')
<script>
    $(document).ready(function() {
        window.transactionsTable = $('#transactions-table').DataTable({
            processing: true,
            serverSide: true,
            info: false,
            lengthChange: false,
            ajax: '{{ route('transactions.data') }}',
            columns: [
                { data: 'trans_id', name: 'trans_id', render: function(data, type, row, meta) { return meta.row + 1; } },
                { 
                    data: 'entry_date', 
                    name: 'entry_date',
                    render: function(data) {
                        if(!data) return '-';
                        let date = new Date(data);
                        let day = ("0" + date.getDate()).slice(-2);
                        let month = ("0" + (date.getMonth() + 1)).slice(-2);
                        let year = date.getFullYear();
                        return day + '-' + month + '-' + year;
                    }
                },
                { data: 'transaction_no', name: 'transaction_no', defaultContent: '-' },
                {
                    data: 'customer.name',
                    name: 'customer.name',
                    defaultContent: '-',
                    orderable: false,
                    searchable: false
                },
                { 
                    data: 'sale_amount', 
                    name: 'sale_amount',
                    render: function(data) {
                        return formatAmount(data);
                    }
                },
                { 
                    data: 'purchase_amount', 
                    name: 'purchase_amount',
                    render: function(data) {
                        return formatAmount(data);
                    }
                },
                { 
                    data: 'total_amount', 
                    name: 'total_amount',
                    render: function(data) {
                        let formatted = formatAmount(Math.abs(data));
                        if(parseFloat(data) < 0) {
                            return `<span class="text-danger">(${formatted})</span>`;
                        }
                        return formatted;
                    }
                },
                { data: 'transaction_mode', name: 'transaction_mode' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return `
                            <a href="{{ url('transactions') }}/${row.trans_id}/edit" class="btn btn-info btn-circle" type="button"><i class="fa fa-edit"></i></a>
                            <button class="btn btn-danger btn-circle delete-button" type="button" data-id="${row.trans_id}"><i class="fa fa-times"></i></button>
                        `;
                    },
                    width: '150px', orderable: false, searchable: false
                }
            ],
            order: [[0, 'desc']],
            language: {
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="visually-hidden">Loading...</span>'
            }
        });

        // Initialize Mobile CRUD Manager for Transactions
        window.transactionsMobileManager = MobileCrudManager.init({
            moduleName: 'transactions',
            dataUrl: '{{ route('transactions.data') }}',
            deleteUrl: '{{ url('transactions') }}',
            cardRenderer: function(transaction) {
                let customerName = transaction.customer ? transaction.customer.name : '-';
                let transactionNo = transaction.transaction_no || '-';
                
                // Format Date
                let dateStr = '-';
                if(transaction.entry_date) {
                    let date = new Date(transaction.entry_date);
                    let day = ("0" + date.getDate()).slice(-2);
                    let month = ("0" + (date.getMonth() + 1)).slice(-2);
                    let year = date.getFullYear();
                    dateStr = day + '-' + month + '-' + year;
                }

                // Format Total Amount
                let totalAmountVal = parseFloat(transaction.total_amount) || 0;
                let totalAmountHtml = formatAmount(Math.abs(totalAmountVal));
                let totalAmountClass = 'fw-bold';
                
                if(totalAmountVal < 0) {
                    totalAmountHtml = `(${totalAmountHtml})`;
                    totalAmountClass += ' text-danger';
                }

                return `
                    <div class="card mb-3 mobile-brand-card">
                        <div class="card-body">
                            <div class="mobile-brand-name">${transactionNo}</div>
                            <div class="mobile-brand-field mb-2">
                                <span class="mobile-brand-label">Transaction No</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value">${dateStr}</div>
                                <span class="mobile-brand-label">Date</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value">${customerName}</div>
                                <span class="mobile-brand-label">Customer Name</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value text-success">${formatAmount(transaction.sale_amount)}</div>
                                <span class="mobile-brand-label text-success">Total Sales</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value text-danger">${formatAmount(transaction.purchase_amount)}</div>
                                <span class="mobile-brand-label text-danger">Total Purchase</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value ${totalAmountClass}">${totalAmountHtml}</div>
                                <span class="mobile-brand-label fw-bold">Total Net Amount</span>
                            </div>
                            <div class="mobile-brand-field mb-2">
                                <div class="mobile-brand-value">${transaction.transaction_mode}</div>
                                <span class="mobile-brand-label">Payment Mode</span>
                            </div>
                            <div class="mobile-brand-actions">
                                <a href="{{ url('transactions') }}/${transaction.trans_id}/edit" class="btn btn-info btn-circle">
                                     <i class="fa fa-edit"></i>
                                </a>
                                <button class="btn btn-danger btn-circle delete-button" type="button" data-id="${transaction.trans_id}">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            },
            dataTable: window.transactionsTable
        });

        // Initialize Delete Helper for Transactions
        DeleteHelper.init({
            deleteUrl: '{{ url('transactions') }}',
            dataTable: window.transactionsTable,
            mobileManager: window.transactionsMobileManager
        });
    });   
</script>
@endpush
@endsection