@extends('layouts.user')

@section('content')

    <div>
        <!-- Pages Header -->
        <div class="panelHeader">
            <h3 class="panelHeaderTitle">Your Orders</h3>
        </div>

        <div class="mb-4 px-4">

            <div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-6 lg:gap-8 mt-5">

                <div class="p-8  text-white flex flex-col gap-1 rounded overflow-hidden relative !bg-[#f0f9ff] dashboardCard">
                    <span class="text-xl font-syne font-medium firstLetter before:!text-[#c4dae9] text-gray-700">Grand Total</span>
                    <span class="text-3xl font-bold [letter-spacing:2px]  text-darkblue">{{ sprintf("$%0.2f",
                    $allInvoice->sum('grand_total')) }}</span>
                </div>

                <div
                    class="p-8 text-white flex flex-col gap-1 rounded overflow-hidden relative !bg-[#f7fee7] dashboardCard">
                            <span
                                class="text-xl font-syne font-medium firstLetter before:!text-[#d9e3c0] text-gray-700">Delete Amount</span>
                    <span class="text-3xl font-bold [letter-spacing:2px] text-darkblue">{{ sprintf("$%0.2f",
                    $allInvoice->where('status', 'delete')->sum('grand_total')) }}</span>
                </div>

                <div
                    class="p-8  text-white flex flex-col gap1  rounded overflow-hidden relative !bg-[#ebf5ff] dashboardCard">
                            <span
                                class="text-xl font-syne font-medium firstLetter before:!text-[#c4d2e0]  text-gray-700">Paid Amount</span>
                    <span class="text-3xl font-bold [letter-spacing:2px] text-darkblue">{{ sprintf("$%0.2f",
                    $allInvoice->where('status', 'paid')->sum('grand_total')) }}</span>
                </div>

                <div
                    class="p-8  text-white flex flex-col gap1  rounded overflow-hidden relative !bg-[#ecfeff] dashboardCard">
                            <span
                                class="text-xl font-syne font-medium firstLetter before:!text-[#c9e0e1] text-gray-700">Due Amount</span>
                    <span class="text-3xl font-bold [letter-spacing:2px] text-darkblue">{{ sprintf("$%0.2f",
                    $allInvoice->where('status', 'unpaid')->sum('grand_total')) }}</span>
                </div>
            </div>


            <div class="relative overflow-hidden shadow-sm border rounded mt-5 p-5">
                <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-3">

                    <div id="custom_date_range">
                        <input type="text" name="date_range" id="dateRange" value="{{ $info->date_range }}"
                               placeholder="Custom Date Range" class="inputField !bg-white"/>
                    </div>

                    <div>
                        <select name="status" id="status" onchange="getFilterData()" class="inputField select2"
                                style="width: 100% !important">
                            <option value="">Select Status</option>
                            <option value="pending" {{ $info->status == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="unpaid" {{ $info->status == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                            <option value="paid" {{ $info->status == 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="delete" {{ $info->status == 'delete' ? 'selected' : '' }}>Delete</option>
                        </select>
                    </div>

                    <div>
                        <button type="button" onclick="getFilterData(true)"
                                class="button button--destructive">Reset
                        </button>
                    </div>

                </div>
            </div>
        </div>

        @if (!empty($info->results) && $info->results->isNotEmpty())
            <div class="custom-data-table">
                <table id="dataTable">
                    <thead>
                    <tr>
                        <th>Invoice No</th>
                        <th>Created At</th>
                        <th>Method</th>
                        <th>Paid Date</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Amount</th>
                        <th>Link</th>
                    </tr>

                    </thead>
                    <tbody>
                    @php($allAmount = 0)
                    @foreach ($info->results as $key => $row)
                        @php($allAmount += $row->grand_total)
                        <tr>
                            <td>#{{ $row->invoice_no }}</td>

                            <td class="whitespace-nowrap">
                                {{ !empty($row->created) ? date('d F, Y', strtotime($row->created)) : '' }}
                            </td>

                            <td>{{ !empty($row->method->name) ? $row->method->name : '' }}</td>

                            <td class="whitespace-nowrap">
                                {{ !empty($row->payment_date) ? date('d F, Y', strtotime($row->payment_date)) : '' }}
                            </td>

                            <td>
                                <div class="w-[120px] overflow-hidden [word-break:break-all]">
                                    {{ $row->email }}
                                </div>
                            </td>

                            <td>
                                @if ($row->status == 'pending')
                                    <span class="badge badge-premium mb-2">{{ strFilter($row->status) }}</span>
                                @elseif($row->status == 'unpaid')
                                    <span class="badge badge-warning mb-2">{{ strFilter($row->status) }}</span>
                                @elseif($row->status == 'delete')
                                    <span class="badge badge-danger mb-2">{{ strFilter($row->status) }}</span>
                                @else
                                    <span class="badge badge-success mb-2">{{ strFilter($row->status) }}</span>
                                @endif
                            </td>

                            <td>{{ sprintf("$%0.2f", $row->grand_total) }}</td>

                            <td class="whitespace-nowrap">
                                <a href="{{ url('invoice', $row->ref_code) }}" target="_blank"
                                   class="py-2 px-3 rounded duration-300  bg-green-600/20 text-green-600 cursor-pointer hover:bg-green-600 hover:text-white gap-4">
                                    View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                    <tfoot>
                    <tr>
                        <th colspan="6" class="total"> Total</th>
                        <th class="pl-2.5">{{ sprintf("$%0.2f", $allAmount) }}</th>
                        <th colspan="2">&nbsp;</th>
                    </tr>
                    </tfoot>
                </table>

                <!-- Display pagination links -->
                {{ $info->results->links() }}
            </div>
        @endif
    </div>

@endsection

@push('headerPartial')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
    <link rel="stylesheet" href="{{ asset('css/custom-data-table.css') }}">

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <style>
        .custom-data-table .dt-scroll-body {
            min-height: 350px
        }

        .custom-data-table table tfoot tr th.total {
            text-align: right !important;
        }

        .custom-data-table table tfoot tr th.amount {
            text-align: center !important;
        }

        .firstLetter::before {
            content: attr(data-capitalized-text);
            font-weight: bold;
            color: #eeeeee29;
            position: absolute;
            right: 25px;
            bottom: 25px;
            font-size: 55px;
        }
    </style>
@endpush

@push('footerPartial')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>

    <script>
        $(document).ready(function () {
            $('.select2').select2();
            $('#dataTable').DataTable({
                searching: false, // Disable searching
                paging: false, // Disable pagination
                ordering: false, // Disable ordering (sorting)
                info: false, // Hide "Showing 1 to 5 of 5 entries"
                scrollX: true, // Enable horizontal scrolling if needed
                "aaSorting": []
            });
        });

        function copyText(rowId) {
            var linkElement = document.querySelector(`a[data-tooltip="Copy Link"][data-id="${rowId}"]`);
            linkElement.setAttribute('data-tooltip', 'Copying...');

            var copyText = document.getElementById("copyUrl" + rowId).value;
            if (navigator.clipboard) {
                navigator.clipboard.writeText(copyText)
                    .then(function () {
                        linkElement.setAttribute('data-tooltip', 'Copied');
                    })
                    .catch(function (err) {
                        console.error('Failed to copy text: ', err);
                        linkElement.setAttribute('data-tooltip', 'Copy failed');
                    });
            } else {
                var textarea = document.createElement('textarea');
                textarea.value = copyText;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                linkElement.setAttribute('data-tooltip', 'Copied');
            }
        }

        function outFunc(rowId) {
            var linkElement = document.querySelector(`a[data-tooltip="Copied"][data-id="${rowId}"]`);
            if (linkElement) {
                linkElement.setAttribute('data-tooltip', 'Copy Link');
            }
        }

        flatpickr("#dateRange", {
            mode: "range",
            clickOpens: true,
            onChange: function (selectedDates, dateStr, instance) {
                const regex = /^\d{4}\-\d{2}\-\d{2} to \d{4}\-\d{2}\-\d{2}$/;
                if (regex.test(dateStr)) {
                    return getFilterData();
                }
            }
        });

        function getFilterData(reset = '') {

            let mainUrl = "{{ route('user.orders') }}";
            let getUrl = window.location.href;
            const [url, data] = getUrl.split('?');

            const dateRange = document.getElementById('dateRange').value;
            const status = document.getElementById('status').value;

            const filters = [
                {
                    value: dateRange,
                    paramName: 'date_range'
                },
                {
                    value: status,
                    paramName: 'status'
                },
            ];

            let queryParams = filters
                .filter(filter => filter.value && filter.value !== 'all')
                .map(filter => filter.paramName + '=' + filter.value)
                .join('&');
            if (queryParams) {
                mainUrl += '?' + queryParams;
            }

            if (reset) {
                location.href = "{{ route('user.orders') }}";
            } else {
                location.href = mainUrl;
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            const spanElements = document.querySelectorAll('.firstLetter');
            spanElements.forEach(spanElement => {
                let textContent = spanElement.textContent.trim();
                let firstLetter = textContent.charAt(0).toUpperCase();

                spanElement.setAttribute('data-capitalized-text', firstLetter);
            });
        });
    </script>
@endpush