@extends('front/app/layout')
@section('content')
    <!-- //wrapper -->
    <div class="wrapper" id="wrapper">
        <div class="product_row" style="background-image:url('{{ asset('assets/images/product_detiles.png') }}');">
            <div class="container">
                <div class="row g-2">
                    <div class="col-lg-auto col-md-auto col-sm-auto col-12 me-auto">
                        <h2 class="pro_duct_title">My Reward</h2>
                    </div>
                    @php
                        $startYear = 2024;
                        $currentYear = date('Y');
                    @endphp

                    <div class="col-lg-2 col-md-2 col-sm-3 col-6">
                        <select class="form-select js-example-basic-single" id="filterYear">
                            <option value="">Select Year</option>
                            @for ($year = $startYear; $year <= $currentYear; $year++)
                                @php
                                    $startYearShort = substr($year, -2);
                                    $endYearShort = substr($year + 1, -2);
                                @endphp
                                <option value="{{ $year }}">FY {{ $startYearShort }}-{{ $endYearShort }}</option>
                            @endfor
                        </select>
                    </div>


                    <div class="col-lg-2 col-md-2 col-sm-3 col-6">
                        <select class="form-select js-example-basic-single" id="filterQuarter">
                            <option value="">Select Quarter</option>
                            {{-- @foreach ($quarters as $quarter)
                                @php
                                    switch ($quarter->quarter_name) {
                                        case 'Q1':
                                            $displayName = 'Quarter 1 (Apr – Jun)';
                                            break;
                                        case 'Q2':
                                            $displayName = 'Quarter 2 (Jul – Sep)';
                                            break;
                                        case 'Q3':
                                            $displayName = 'Quarter 3 (Oct – Dec)';
                                            break;
                                        case 'Q4':
                                            $displayName = 'Quarter 4 (Jan – Mar)';
                                            break;
                                        default:
                                            $displayName = $quarter->quarter_name;
                                            break;
                                    }
                                @endphp
                                <option value="{{ $quarter->id }}">{{ $displayName }}</option>
                            @endforeach --}}
                            @php
                                $shownQuarters = [];
                            @endphp

                            @foreach ($quarters as $quarter)
                                @if (!in_array($quarter->quarter_name, $shownQuarters))
                                    @php
                                        $shownQuarters[] = $quarter->quarter_name;
                                        switch ($quarter->quarter_name) {
                                            case 'Q1':
                                                $displayName = 'Quarter 1 (Apr – Jun)';
                                                break;
                                            case 'Q2':
                                                $displayName = 'Quarter 2 (Jul – Sep)';
                                                break;
                                            case 'Q3':
                                                $displayName = 'Quarter 3 (Oct – Dec)';
                                                break;
                                            case 'Q4':
                                                $displayName = 'Quarter 4 (Jan – Mar)';
                                                break;
                                            default:
                                                $displayName = $quarter->quarter_name;
                                                break;
                                        }
                                    @endphp
                                    <option value="{{ $quarter->quarter_name }}">{{ $displayName }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                        <div class="d-flex align-items-center">
                            <a href="javascript:void(0);" class="btn btn-primary pd__rs ms-0" id="applyFilters">
                                <i class="fa fa-search"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-danger ms-2" id="resetFilters">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="white_table">
                            <div class="row g-2">
                                <div class="col-lg-auto my-auto ms-auto">
                                    <div class="budget_final">
                                        <div class="left">
                                            <span>Balance Points </span>
                                            <p><img src="{{ asset('assets/images/coin.png') }}" class="me-2"
                                                    width="20px"><b
                                                    id="totalAmount">{{ Auth::user()->total_points ?? 0 }}</b></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-striped  datatable" id="RewardDataList" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Sr No</th>
                                        <th>Year </th>
                                        <th>Quarter </th>
                                        <th>Earning</th>
                                        <th>Spent</th>
                                        <th>Remaining</th>
                                        <th>Date And Time</th>

                                    </tr>
                                </thead>
                                <tbody>

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

            </div>
        </div>
    </div> <!--  wrapper end  -->
    <!-- //wrapper-end -->
@endsection
@section('js')
    <script>
        @if (Auth::user())
            var carts = @json($carts);
            var orders = carts.map(function(cart) {
                return {
                    product_id: cart.product_id,
                    product_quantity: cart.quantity,
                    product_size: cart.size
                };
            });
            localStorage.setItem('orders', JSON.stringify(orders));

            var totalOrders = orders.length;
            $('#cart_items').html(totalOrders);
        @endif
    </script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var table = $('#RewardDataList').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    paginate: {
                        previous: '<i class="fa-solid fa-chevron-left"></i>',
                        next: '<i class="fa-solid fa-chevron-right"></i>'
                    }
                },
                ajax: {
                    url: "{{ route('myRewardPaginate') }}",
                    data: function(d) {
                        d.year = $('#filterYear').val();
                        d.quarter = $('#filterQuarter').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'year',
                        name: 'year'
                    },
                    {
                        data: 'quarter_name',
                        name: 'quarter_name'
                    },
                    {
                        data: 'earning',
                        name: 'earning',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'spent',
                        name: 'spent',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'remaining',
                        name: 'remaining',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: false,
                        searchable: false
                    }
                ],
                initComplete: function() {
                    $('#RewardDataList_filter input').attr('placeholder', 'Search');
                },
                drawCallback: function() {
                    $('[data-bs-toggle="tooltip"]').tooltip();
                }
            });

            $('#applyFilters').on('click', function() {
                table.ajax.reload();
            });

            $('#resetFilters').on('click', function() {
                $('#filterYear').val('').trigger('change');
                $('#filterQuarter').val('').trigger('change');
                table.ajax.reload();
            });
        });
    </script>
@endsection