@extends('admin.dashboard.layout.app')

@section('style')
    <link href="{{ asset('assets/vendor/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/vendor/datatables/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/notyf/style.css') }}">
    <style>
        #example th {
            font-size: 1.1em !important;
        }

        #example td {
            font-size: 1em !important;
        }

        .search-area {
            max-width: 400px;
        }

        @media (max-width: 576px) {
            .response-message-cell {
                width: auto;
            }
        }
    </style>
@endsection

@section('content')
    @include('admin.dashboard.layout.header', ['title' => 'JazzCash Collection'])

    @if (request()->has('daterange'))
        @php
            $exploded_date = explode(' to ', request()->get('daterange'));
            $start_date = $exploded_date[0] ?? null;
            $end_date = $exploded_date[1] ?? null;
        @endphp
    @endif

    <div class="card">
        <div class="card-body">
            <form action="" method="GET">
                <div class="row d-flex align-items-center mb-3">
                    <div class="col-12 col-md-3 mb-2 mb-md-0">
                        <select name="user_id" class="form-control">
                            <option value="">Select User</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}"
                                    {{ request()->get('user_id') == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-9">
                        <div class="basic-form">
                            <div class="input-group">
                                @php
                                    $today = \Carbon\Carbon::now()->format('Y-m-d');
                                @endphp
                                <input
                                    class="form-control input-daterange-datepicker"
                                    type="text"
                                    name="daterange"
                                    value="{{ isset($start_date) ? $start_date : $today }} to {{ isset($end_date) ? $end_date : $today }}"
                                    autocomplete="off"
                                >
                                <button class="btn btn-primary" type="submit">Search</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            @if (request()->has('daterange'))
                <div class="d-flex justify-content-end">
                    <form action="" method="GET" id="searchform">
                        <div class="input-group search-area" style="cursor: pointer;">
                            <input
                                value="{{ request()->get('search') }}"
                                type="text"
                                name="search"
                                class="form-control"
                                id="data-table-search"
                                placeholder="Search here..."
                            >
                            <button
                                type="button"
                                onclick="searchSubmit()"
                                class="input-group-text border-0 bg-primary text-white"
                                aria-label="Search"
                            >
                                <i class="fi fi-rr-search"></i>
                            </button>
                        </div>
                    </form>
                </div>

                <div class="table-responsive mt-3">
                    <table id="example" class="table table-striped table-responsive-md mb-0">
                        <thead class="bg-primary text-white">
                            <tr>
                                <th style="border-top-left-radius:15px;" scope="col"><strong>#</strong></th>
                                <th scope="col"><strong>Order ID</strong></th>
                                <th scope="col"><strong>Transaction Ref No</strong></th>
                                <th scope="col"><strong>Merchant Name</strong></th>
                                <th scope="col"><strong>Provider</strong></th>
                                <th scope="col"><strong>Bill Reference</strong></th>
                                <th scope="col"><strong>Phone Number</strong></th>
                                <th scope="col"><strong>Amount</strong></th>
                                <th scope="col"><strong>Amount after Fees</strong></th>
                                <th scope="col"><strong>Status</strong></th>
                                <th scope="col" class="response-message-cell"><strong>Response Message</strong></th>
                                <th scope="col" class="response-message-cell"><strong>Response Message IPN</strong></th>
                                <th scope="col"><strong>Date/Time</strong></th>
                                <th style="border-top-right-radius:15px;" scope="col"><strong>Action</strong></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($jazzcash_transactions ?? [] as $transaction)
                                <tr>
                                    <th scope="row">
                                        {{ ($jazzcash_transactions->currentPage() - 1) * $jazzcash_transactions->perPage() + $loop->iteration }}
                                    </th>
                                    <td>{{ $transaction->order_id }}</td>
                                    <td>{{ $transaction->transaction_ref_no }}</td>
                                    <td>{{ $transaction->merchant_name ?? 'N/A' }}</td>
                                    <td>{{ $transaction->provider ?? 'N/A' }}</td>
                                    <td>{{ $transaction->bill_reference }}</td>
                                    <td>{{ $transaction->mobile_number }}</td>
                                    <td>{{ number_format($transaction->amount, 2) }}</td>
                                    <td>{{ number_format($transaction->amount_after_fees, 2) }}</td>
                                    <td class="response-code-td">{{ $transaction->status }}</td>
                                    <td class="response-description-td">{{ $transaction->response_message }}</td>
                                    <td class="response-description-td">{{ $transaction->response_message_ipn ?? '' }}</td>
                                   <td>
    @if (!empty($transaction->created_at))
        {{ \Carbon\Carbon::parse($transaction->created_at)->format('d/m/Y H:i') }}
    @endif
</td>
                                    <td>
                                            <button
                                                type="button"
                                                data-record_id="{{ $transaction->id }}"
                                                data-order_id="{{ $transaction->transaction_ref_no }}"
                                                class="btn refresh-status btn-primary btn-sm d-flex align-items-center justify-content-center"
                                                title="Refresh Status">
                                                <i class="bx bx-refresh refresh-icon fs-5"></i>
                                                <i class="bx bx-loader-alt bx-spin fs-5 loader-icon d-none"></i>
                                            </button>
                                           
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13" class="text-center py-4">
                                        No records found for the selected filters.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                    @if (!empty($jazzcash_transactions))
                        <nav class="d-flex justify-content-end mt-3">
                            <ul class="pagination mb-0">
                                @if ($jazzcash_transactions->previousPageUrl())
                                    <li class="page-item page-indicator">
                                        <a class="page-link" href="{{ $jazzcash_transactions->previousPageUrl() }}">
                                            <i class="bx bx-chevron-left"></i>
                                        </a>
                                    </li>
                                @endif

                                @if ($jazzcash_transactions->nextPageUrl())
                                    <li class="page-item page-indicator">
                                        <a class="page-link" href="{{ $jazzcash_transactions->nextPageUrl() }}">
                                            <i class="bx bx-chevron-right"></i>
                                        </a>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    @endif
                </div>
            @endif

            @if (request()->has('daterange'))
                <div class="d-flex gap-2 mt-3 flex-wrap">
                    <button
                        type="button"
                        onclick="downloadExcel()"
                        id="downloadExcelButton"
                        class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                    >
                        <i class="flaticon-002-arrow-down"></i>
                        <span>Download Excel</span>
                    </button>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/vendor/moment/moment.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/plugins/xlsx/script.js') }}"></script>
    <script src="{{ asset('assets/plugins/notyf/script.js') }}"></script>
    <script>
        const notyf = new Notyf();

        $('.input-daterange-datepicker').daterangepicker({
            buttonClasses: ['btn', 'btn-sm'],
            applyClass: 'btn-danger',
            cancelClass: 'btn-inverse',
            locale: {
                format: 'YYYY-MM-DD',
                separator: ' to '
            }
        });

        function disabledDownloadButton(button_id) {
            const $btn = $(button_id);
            if (!$btn.hasClass('disabled')) {
                $btn.addClass('disabled');
            }
            if ($btn.hasClass('btn-primary')) {
                $btn.removeClass('btn-primary').addClass('btn-secondary');
            }
        }

        function enableDownloadButton(button_id) {
            const $btn = $(button_id);
            if ($btn.hasClass('disabled')) {
                $btn.removeClass('disabled');
            }
            if ($btn.hasClass('btn-secondary')) {
                $btn.removeClass('btn-secondary').addClass('btn-primary');
            }
        }

       function downloadExcel() {
    disabledDownloadButton("#downloadExcelButton");

    const params = new URLSearchParams(window.location.search);
    let userId = params.get('user_id') ?? '';
    let daterange = params.get('daterange') ?? '';
    let search = params.get('search') ?? '';

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = "{{ route('admin.jazzcashCollectionData') }}";

    form.innerHTML = `
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="daterange" value="${daterange}">
        <input type="hidden" name="userId" value="${userId}">
        <input type="hidden" name="search" value="${search}">
    `;

    document.body.appendChild(form);
    form.submit();
    form.remove();

    setTimeout(() => enableDownloadButton("#downloadExcelButton"), 1500);
}

        function searchSubmit() {
            const form = document.getElementById('searchform');
            const urlParams = new URLSearchParams(window.location.search);

            // Remove any previous hidden inputs
            document.querySelectorAll('#searchform input[type="hidden"]').forEach(el => el.remove());

            urlParams.forEach((value, key) => {
                // keep other filters, but reset page/cursor and override search
                if (key !== 'search' && key !== 'page' && key !== 'cursor') {
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = key;
                    hiddenInput.value = value;
                    form.appendChild(hiddenInput);
                }
            });

            form.submit();
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.target.tagName.toLowerCase() === 'input') {
                e.preventDefault();
                if (e.target.name === 'search') {
                    searchSubmit();
                } else {
                    const form = e.target.closest('form');
                    if (form) form.submit();
                }
            }
        });

        function disableStatusCheckButton($btn) {
            $btn.prop('disabled', true);
            $btn.find('.refresh-icon').addClass('d-none');
            $btn.find('.loader-icon').removeClass('d-none');
        }

        function enableStatusCheckButton($btn) {
            $btn.prop('disabled', false);
            $btn.find('.refresh-icon').removeClass('d-none');
            $btn.find('.loader-icon').addClass('d-none');
        }

        $(".refresh-status").on("click", function() {
            let $btn = $(this);
            let order_id = $btn.data('order_id');
            let record_id = $btn.data('record_id');
            let user_id = $("select[name='user_id']").val();
            let apiResponse = null;

            disableStatusCheckButton($btn);

            const statusRefreshCheckToken = "{{ csrf_token() }}";
            $.ajax({
                url: "{{ route('admin.collectionStatusCheck') }}",
                method: "POST",
                data: {
                    order_id: order_id,
                    record_id: record_id,
                    type: 'jazzcash',
                    user_id: user_id,
                    _token: statusRefreshCheckToken
                },
                success: function(response) {
                    apiResponse = response;

                    if (response.success === false) {
                        notyf.error(response.response_description || "Status check failed");
                    } else {
                        notyf.success(response.response_description || "Status updated successfully");
                    }

                    let $row = $btn.closest('tr');
                    if (response.status) {
                        $row.find('.response-code-td').text(response.status);
                    }
                    if (response.response_description) {
                        $row.find('.response-description-td').text(response.response_description);
                    }
                },
                error: function() {
                    notyf.error("Error occurred. Refresh the page and try again");
                },
                complete: function() {
                    enableStatusCheckButton($btn);
                    if (apiResponse && apiResponse.transaction_status === "success") {
                        $btn.prop('disabled', true);
                    }
                }
            });
        });
    </script>
@endsection