@extends('layouts.master')

@section('title')
    @lang('translation.Transaction_Report')
@endsection

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        .amount-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            white-space: nowrap;
        }

        .action-buttons .btn {
            padding: 0.25rem 0.5rem;
            margin-right: 0.25rem;
            font-size: 0.875rem;
        }

        .table-container {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .page-header {
            background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .stats-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            border-left: 4px solid #6f42c1;
        }

        .contact-info {
            font-size: 0.875rem;
        }

        .tenant-info {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .tenant-badge {
            font-size: 0.65rem;
            padding: 2px 6px;
        }

        .avatar-sm {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .text-purple {
            color: #6f42c1 !important;
        }

        .bg-purple {
            background-color: #6f42c1 !important;
        }

        .text-primary {
            color: #6f42c1 !important;
        }

        .filter-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        /* Improved Pagination Styles */
        .pagination-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }

        .pagination-info {
            color: #6c757d;
            font-size: 0.875rem;
        }

        .pagination-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .per-page-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .per-page-selector select {
            width: auto;
            padding: 0.375rem 2rem 0.375rem 0.75rem;
            font-size: 0.875rem;
        }

        .per-page-selector label {
            margin: 0;
            font-size: 0.875rem;
            color: #6c757d;
        }

        .pagination {
            margin: 0;
        }

        .page-link {
            color: #6f42c1;
            border: 1px solid #dee2e6;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
        }

        .page-link:hover {
            color: #fff;
            background-color: #6f42c1;
            border-color: #6f42c1;
        }

        .page-item.active .page-link {
            background-color: #6f42c1;
            border-color: #6f42c1;
        }

        .page-item.disabled .page-link {
            color: #6c757d;
            background-color: #fff;
            border-color: #dee2e6;
        }

        /* Make pagination responsive */
        @media (max-width: 768px) {
            .pagination-wrapper {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }

            .pagination-controls {
                flex-direction: column;
                width: 100%;
                align-items: flex-start;
            }

            .pagination {
                width: 100%;
                justify-content: center;
            }
        }

        .no-data-message {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
        }

        .no-data-message i {
            font-size: 3rem;
            color: #dee2e6;
            margin-bottom: 15px;
        }
    </style>
@endsection

@section('content')
    {{-- Page Header --}}
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h3 class="mb-1">@lang('translation.Transaction_Report')</h3>
                <p class="mb-0 opacity-75">Manage and monitor all subscription transactions</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('transactions.export') }}?{{ http_build_query(request()->query()) }}"
                   class="btn btn-light btn-lg px-4">
                    <i class="fas fa-download me-2"></i>Export CSV
                </a>
            </div>
        </div>
    </div>

    {{-- Stats Cards --}}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <h4 class="text-primary mb-1">₹{{ number_format($transactions->where('payment_status', 'completed')->sum('final_amount'), 2) }}</h4>
                <p class="mb-0 text-muted">Total Revenue</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #28a745;">
                <h4 class="text-success mb-1">{{ $transactions->where('payment_status', 'completed')->count() }}</h4>
                <p class="mb-0 text-muted">Completed</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #ffc107;">
                <h4 class="text-warning mb-1">{{ $transactions->where('payment_status', 'pending')->count() }}</h4>
                <p class="mb-0 text-muted">Pending</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #17a2b8;">
                <h4 class="text-info mb-1">₹{{ number_format($transactions->where('payment_status', 'completed')->where('payment_date', '>=', \Carbon\Carbon::now()->startOfMonth())->sum('final_amount'), 2) }}</h4>
                <p class="mb-0 text-muted">This Month</p>
            </div>
        </div>
    </div>

    {{-- Filters Section --}}
    <div class="filter-card">
        <form method="GET" action="{{ route('transactions.index') }}" id="filterForm">
            <div class="row">
                <div class="col-md-2">
                    <label class="form-label">Date From</label>
                    <input type="date" class="form-control" name="date_from"
                           value="{{ request('date_from') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Date To</label>
                    <input type="date" class="form-control" name="date_to"
                           value="{{ request('date_to') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Tenant</label>
                    <select class="form-select" name="tenant_id">
                        <option value="">All Tenants</option>
                        @foreach($tenants as $tenant)
                            <option value="{{ $tenant->id }}"
                                {{ request('tenant_id') == $tenant->id ? 'selected' : '' }}>
                                {{ $tenant->tenant_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Transaction Type</label>
                    <select class="form-select" name="transaction_type">
                        <option value="">All Types</option>
                        @foreach($transactionTypes as $key => $label)
                            <option value="{{ $key }}"
                                {{ request('transaction_type') == $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" name="payment_status">
                        <option value="">All Status</option>
                        @foreach($paymentStatuses as $key => $label)
                            <option value="{{ $key }}"
                                {{ request('payment_status') == $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Search</label>
                    <input type="text" class="form-control" name="search"
                           value="{{ request('search') }}" placeholder="Transaction ID, Tenant...">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-12 d-flex justify-content-between">
                    <div>
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-filter me-1"></i>Apply Filters
                        </button>
                        <a href="{{ route('transactions.index') }}" class="btn btn-secondary">
                            <i class="fas fa-refresh me-1"></i>Reset
                        </a>
                    </div>
                    <div class="text-muted">
                        Total Records: {{ $transactions->total() }}
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- Main Table Container --}}
    <div class="table-container">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">
                <i class="fas fa-receipt me-2 text-primary"></i>Transaction Directory
            </h5>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary btn-sm" id="refreshBtn">
                    <i class="fas fa-sync-alt me-1"></i>Refresh
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table id="transactionTable" class="table table-bordered dt-responsive nowrap w-100">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" width="60">Sr.</th>
                        <th>Transaction Details</th>
                        <th>Tenant Information</th>
                        <th>Payment Details</th>
                        <th class="text-center">Branch Count</th>
                        <th class="text-center">Amount</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Payment Date</th>
                        <th class="text-center" width="150">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($transactions as $key => $transaction)
                        <tr>
                            <td class="text-center">
                                <span class="badge bg-light text-dark">{{ $transactions->firstItem() + $key }}</span>
                            </td>

                            {{-- Transaction Details --}}
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center me-2">
                                        <span class="text-white fw-bold">T</span>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ $transaction->transaction_id }}</h6>
                                        <div class="tenant-info mt-1">
                                            <span class="badge bg-{{ $transaction->getTypeBadgeColor() }} tenant-badge">
                                                {{ $transaction->getTransactionTypeLabel() }}
                                            </span>
                                            <span class="badge bg-secondary tenant-badge">
                                                {{ ucfirst($transaction->restaurant_type) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            {{-- Tenant Information --}}
                            <td>
                                <div>
                                    <h6 class="mb-0">{{ $transaction->tenant->tenant_name ?? 'N/A' }}</h6>
                                    <div class="contact-info">
                                        <i class="fas fa-id-card me-1 text-muted"></i>
                                        <small>ID: {{ $transaction->tenant->tenant_id ?? 'N/A' }}</small>
                                    </div>
                                    @if($transaction->tenant && $transaction->tenant->email)
                                    <div class="contact-info">
                                        <i class="fas fa-envelope me-1 text-muted"></i>
                                        <small>{{ $transaction->tenant->email }}</small>
                                    </div>
                                    @endif
                                </div>
                            </td>

                            {{-- Payment Details --}}
                            <td>
                                <div class="tenant-info">
                                    @if($transaction->payment_method)
                                        <span class="badge bg-info amount-badge">
                                            <i class="fas fa-credit-card me-1"></i>{{ ucfirst($transaction->payment_method) }}
                                        </span>
                                    @endif
                                    @if($transaction->getRazorpayPaymentId())
                                        <span class="badge bg-secondary tenant-badge">
                                            <i class="fas fa-receipt me-1"></i>Ref: {{ substr($transaction->getRazorpayPaymentId(), 0, 8) }}...
                                        </span>
                                    @endif
                                </div>
                                @if ($transaction->created_by)
                                    <small class="text-muted mt-1 d-block">
                                        <i class="fas fa-user me-1"></i>Created by: System
                                    </small>
                                @endif
                            </td>

                            {{-- Branch Count --}}
                            <td class="text-center">
                                <span class="badge bg-warning amount-badge">
                                    <i class="fas fa-code-branch me-1"></i>{{ $transaction->branch_count }}
                                </span>
                            </td>

                            {{-- Amount --}}
                            <td class="text-center">
                                <div>
                                    <strong class="text-primary">₹{{ number_format($transaction->final_amount, 2) }}</strong>
                                    @if($transaction->discount_amount > 0)
                                        <br>
                                        <small class="text-success">
                                            -₹{{ number_format($transaction->discount_amount, 2) }} discount
                                        </small>
                                    @endif
                                </div>
                            </td>

                            {{-- Status --}}
                            <td class="text-center">
                                <span class="badge bg-{{ $transaction->getStatusBadgeColor() }} status-badge">
                                    @if($transaction->payment_status == 'completed')
                                        <i class="fas fa-check-circle me-1"></i>
                                    @elseif($transaction->payment_status == 'pending')
                                        <i class="fas fa-clock me-1"></i>
                                    @else
                                        <i class="fas fa-times-circle me-1"></i>
                                    @endif
                                    {{ ucfirst($transaction->payment_status) }}
                                </span>
                            </td>

                            {{-- Payment Date --}}
                            <td class="text-center">
                                <div>
                                    <strong>
                                        @if($transaction->payment_date)
                                            {{ $transaction->payment_date->format('d M Y') }}
                                        @else
                                            <span class="text-muted">Pending</span>
                                        @endif
                                    </strong>
                                </div>
                                @if($transaction->payment_date)
                                <small class="text-muted">{{ $transaction->payment_date->format('H:i A') }}</small>
                                @endif
                            </td>

                            {{-- Actions --}}
                            <td class="text-center">
                                <div class="action-buttons">
                                    <a href="{{ route('transactions.view-invoice', $transaction->id) }}"
                                       class="btn btn-sm btn-outline-info" data-bs-toggle="tooltip"
                                       title="View Invoice">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('transactions.download-invoice', $transaction->id) }}"
                                       class="btn btn-sm btn-outline-success" data-bs-toggle="tooltip"
                                       title="Download Invoice">
                                        <i class="fas fa-download"></i>
                                    </a>
                                    <a href="{{ route('transactions.show', $transaction->id) }}"
                                       class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip"
                                       title="View Details">
                                        <i class="fas fa-info-circle"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="no-data-message">
                                    <i class="fas fa-inbox"></i>
                                    <h5>No Transactions Found</h5>
                                    <p>Try adjusting your filters or search criteria</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            {{-- Improved Pagination Section --}}
            @if($transactions->isNotEmpty())
                <div class="pagination-wrapper">
                    <div class="pagination-info">
                        <strong>Showing {{ $transactions->firstItem() ?? 0 }} to {{ $transactions->lastItem() ?? 0 }}</strong>
                        of <strong>{{ $transactions->total() }}</strong> entries
                    </div>

                    <div class="pagination-controls">
                        <div class="per-page-selector">
                            <label for="perPage">Show:</label>
                            <select id="perPage" class="form-select form-select-sm" onchange="changePerPage(this.value)">
                                <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                                <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                            </select>
                            <label>entries</label>
                        </div>

                        {{ $transactions->onEachSide(1)->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('script')
    <!-- Required datatable js -->
    <script src="{{ URL::asset('build/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>

    <!-- SweetAlert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            // Initialize tooltips
            $('[data-bs-toggle="tooltip"]').tooltip();

            // Refresh button
            $('#refreshBtn').on('click', function() {
                const button = $(this);
                const icon = button.find('i');

                icon.addClass('fa-spin');
                button.prop('disabled', true);

                setTimeout(function() {
                    location.reload();
                }, 500);
            });

            // Auto-submit form when filters change
            $('select[name="tenant_id"], select[name="transaction_type"], select[name="payment_status"]').on('change', function() {
                $('#filterForm').submit();
            });

            // Date filters auto-submit
            $('input[name="date_from"], input[name="date_to"]').on('change', function() {
                $('#filterForm').submit();
            });
        });

        // Change per page function
        function changePerPage(perPage) {
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', perPage);
            url.searchParams.set('page', 1); // Reset to first page
            window.location.href = url.toString();
        }

        // Show session messages
        @if (session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        @endif

        @if (session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: '{{ session('error') }}',
                timer: 3000,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        @endif
    </script>
@endsection