@extends('backend.layout.app')

@section('content')
    @push('css')
        <style>
            .summary-card h4 {
                margin: 8px 0 0;
                font-weight: bold;
            }

            .summary-card h6 {
                margin: 0;
                color: #555;
            }
        </style>
    @endpush

    <div class="page-content">

        <!-- Filters -->
        <div class="row mb-3">
            <div class="col-md-3">
                <label for="courseSelect">Course</label>
                <select name="course_id" class="form-select  select2" id="courseSelect">
                    <option value="">All Courses</option>
                    @foreach ($courses as $course)
                        <option value="{{ $course->id }}">{{ $course->title }}</option>
                    @endforeach
                </select>
            </div>
         
            <div class="col-md-2">
                <label for="payment_method">Time Frame</label>
                <select name="enrollment_period" class="form-select " id="timeframeSelect">
                    <option value="">All Periods</option>
                    <option value="today">Today</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                    <option value="year">This Year</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="start_date">Start Date</label>
                <input type="date" name="start_date" id="start_date" class="form-control">
            </div>
            <div class="col-md-2">
                <label for="end_date">End Date</label>
                <input type="date" name="end_date" id="end_date" class="form-control">
            </div>
        </div>

        <!-- Summary -->
        <div class="row mb-4 bg-white p-3" style="border-radius: 0.4rem; box-shadow: 0 0 5px rgba(0,0,0,0.1);">
            <div class="col-md-4 mb-2">
                <div class="summary-card d-flex justify-content-between align-items-center"
                    style="background-color: rgba(13, 110, 253, 0.1); border-left: 4px solid #0d6efd; padding: 1rem; border-radius: 0.4rem; flex: 1;">
                    <div>
                        <h6>Total Earning</h6>
                        <h4 id="totalEarning"> </h4>
                    </div>
                    <div class="icon rounded-circle p-3" style="background-color:#c4dbff">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="lucide lucide-trending-up " style="color:#0d6efd">
                            <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
                            <polyline points="16 7 22 7 22 13"></polyline>
                        </svg>
                    </div>
                </div>
            </div>

        </div>


        <!-- Transactions Table -->
        <div class="card">
            <div class="card-body table-responsive">
                <table class="table table-striped my-table2 dataTable no-footer yajraDataDelete" id="transactionsTable">
                    <thead>
                        <tr>
                            <th>Transaction ID</th>
                            <th>Invoice No</th>
                            <th>User</th>
                            <th>Total</th>
                            <th>Discount</th>
                            <th>Final</th>
                            <th>Paid</th>
                            <th>Payment Status</th>
                            <th style="max-width: 130px">Payment Method</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(function() {
                        let table = $('#transactionsTable').DataTable({
                                processing: true,
                                serverSide: true,
                                pageLength: 25,
                                searching: false,   
                                ajax: {
                                    url: "{{ route('admin.earnings.index') }}",
                                    data: function(d) {
                                        d.payment_method = $('#payment_method').val();
                                        d.start_date = $('#start_date').val();
                                        d.end_date = $('#end_date').val();
                                        d.course_id = $('#courseSelect').val();
                                        d.timeframe = $('#timeframeSelect').val();
                                    }
                                },
                                columns: [{
                                        data: 'transaction_id',
                                        name: 'transaction_id'
                                    },
                                    {
                                        data: 'invoice_no',
                                        name: 'invoice_no'
                                    },
                                    {
                                        data: 'user',
                                        name: 'user.name'
                                    },
                                    {
                                        data: 'total_amount',
                                        name: 'total_amount'
                                    },
                                    {
                                        data: 'discount',
                                        name: 'discount'
                                    },
                                    {
                                        data: 'final_amount',
                                        name: 'final_amount'
                                    },
                                    {
                                        data: 'paid_amount',
                                        name: 'paid_amount'
                                    }, 
                                    {
                                        data: 'payment_status',
                                        name: 'payment_status'
                                    },
                                    {
                                        data: 'payment_method',
                                        name: 'payment_method'
                                    },

                                    {
                                        data: 'created_at',
                                        name: 'created_at'
                                    }
                                ],
                                drawCallback: function(settings) {
                                    var json = settings.json;
                                    if (json) {
                                        $('#totalEarning').text(json.totalEarning || 0);
                                    }
                                }
                            });

                            // Reload on filter change
                            $('#search, #payment_method, #start_date, #end_date, #courseSelect, #timeframeSelect').on(
                                'change',
                                function() {
                                    table.ajax.reload();
                                });
                            
                        });
                        
        </script>
    @endpush
@endsection