@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;
        }

        .response-message-cell {
            width: 30ch;
            white-space: normal;
            word-break: break-word;
        }

        @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"><strong>Date/Time</strong></th>
                                <th style="border-top-right-radius:15px;" scope="col"><strong>Action</strong></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($jazzcash_transactions as $transaction)
                                <tr>
                                    <th scope="row">{{ $loop->iteration }}</th>
                                    <td>{{ $transaction->order_id }}</td>
                                    <td>{{ $transaction->transaction_ref_no }}</td>
                                    <td>{{ $transaction->merchant?->name }}</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>{{ $transaction->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        @if ($transaction->response_code != 000 && $transaction->response_code != 121)
                                            <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="fa fa-refresh refresh-icon fs-5"></i>
                                                <i class="fa fa-spinner fa-spin fs-5 loader-icon d-none"></i>
                                            </button>
                                        @else
                                            <button
                                                type="button"
                                                disabled
                                                class="btn btn-primary btn-sm d-flex align-items-center justify-content-center"
                                                title="Status up to date"
                                            >
                                                <i class="fa fa-refresh fs-5"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <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="la la-angle-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="la la-angle-right"></i>
                                    </a>
                                </li>
                            @endif
                        </ul>
                    </nav>
                </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') ?? null;
            let daterange = params.get('daterange') ?? null;
            let search = params.get('search') ?? null;
            const excelDownloadCsrfToken = "{{ csrf_token() }}";

            $.ajax({
                url: "{{ route('admin.jazzcashCollectionData') }}",
                method: 'POST',
                data: {
                    _token: excelDownloadCsrfToken,
                    daterange,
                    userId,
                    search
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success === false) {
                        notyf.error(response.data.message || "Unable to download Excel file");
                        return;
                    }

                    const data = response.data.map((r, i) => ({
                        '#': i + 1,
                        'Order ID': r.order_id,
                        'Transaction Ref No': r.transaction_ref_no,
                        'Merchant Name': r.merchant?.name,
                        'Provider Name': r.provider,
                        'Bill Reference': r.bill_reference,
                        'Phone Number': r.mobile_number,
                        'Amount': r.amount,
                        'Amount after Fees': r.amount_after_fees,
                        'Status': r.status,
                        'Provider': r.provider,
                        'Response Message': r.response_message,
                        'Date/Time': r.transaction_datetime
                    }));

                    const ws = XLSX.utils.json_to_sheet(data);
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
                    XLSX.writeFile(wb, 'jazzcash-collection.xlsx');
                    notyf.success("Excel downloaded successfully");
                },
                error: function() {
                    notyf.error("Server error occurred");
                },
                complete: function() {
                    enableDownloadButton("#downloadExcelButton");
                }
            });
        }


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

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

            urlParams.forEach((value, key) => {
                if (key !== 'search' && 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