@extends('layouts/contentNavbarLayout')

@section('title', 'Users List')

@section('vendor-script')
@endsection

@section('content')
<div class="card">
    <div class="card-header bg-primary text-white">
        KYC Requests
    </div>
    <div class="card-body">
        <div class="bg-white py-2">
            @if(session('success'))
            <div class="alert alert-success m-1">
                {{ session('success') }}
            </div>
            @endif
            <div class="d-flex justify-content-end m-3">
                <button id="export-pdf" class="btn btn-outline-primary me-2"><i class="fa-solid fa-download me-2"></i>PDF</button>
                <button id="export-excel" class="btn btn-primary"><i class="fa-solid fa-download me-2"></i>Excel</button>
            </div>
            <form id="filter-form" class="mb-3 px-3">
                <div class="row g-2">
                    <div class="col-md-4 form-floating form-floating-outline">
                        <input type="text" name="search" id="search" class="form-control" placeholder="Search anything...">
                        <label for="search">Search anything...</label>
                    </div>
                    <div class="col-md-2 form-floating form-floating-outline">
                        <select name="kyc_status" id="kyc_status" class="form-control">
                            <option value="">Status</option>
                            <option value="A">Active</option>
                            <option value="B">Blocked</option>
                            <option value="C">Pending</option>
                        </select>
                        <label for="kyc_status">Status</label>
                    </div>
                    <div class="col-md-3 form-floating form-floating-outline">
                        <input type="date" name="created_from" id="created_from" class="form-control" placeholder="Start date">
                        <label for="created_from">From (Start date)</label>
                    </div>
                    <div class="col-md-3 form-floating form-floating-outline">
                        <input type="date" name="created_to" id="created_to" class="form-control" placeholder="End date">
                        <label for="created_to">To (End date)</label>
                    </div>
                </div>
            </form>
            <div class="table-responsive" id="kyc-table">
                <table class="table">
                    <thead class="table-light">
                        <tr>
                            <th class="text-truncate">S.No.</th>
                            <th class="text-truncate">User</th>
                            <th class="text-truncate">Contact Details</th>
                            <th class="text-truncate">Aadhar No.</th>
                            <th class="text-truncate">PAN no.</th>
                            <th class="text-truncate">GST No.</th>
                            <th class="text-truncate">COI No.</th>
                            <th class="text-truncate">Aadhar Image</th>
                            <th class="text-truncate">Pan Image</th>
                            <th class="text-truncate">E-shop</th>
                            <th class="text-truncate">COI File</th>
                            <th class="text-truncate">GST File</th>
                            <th class="text-truncate">MOA File</th>
                            <th class="text-truncate">AOA File</th>
                            <th class="text-truncate">Address</th>
                            <th class="text-truncate">Company Name</th>
                            <th class="text-truncate" style="width:50px;">Company Address</th>
                            <th class="text-truncate">KYC Status</th>
                            <th class="text-truncate">Created</th>
                        </tr>
                    </thead>
                    <tbody  id="tableBody">
                        @foreach ($kyc_requests as $request)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-sm me-3">
                                        <img src="{{ asset('assets/img/avatars/1.png') }}" alt="Avatar" class="rounded-circle">
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">{{ $request->first_name }}
                                            {{ $request->last_name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="text-truncate">{{ $request->email }}<br>{{ $request->phone_number }}</td>    
                        
                        
                            <td class="text-truncate"> {!! str_replace(',', '<br>', $request->aadhar_no) !!}</td>
                            <td class="text-truncate">
                                {!! str_replace(',', '<br>', $request->pan_no) !!}
                            </td>
                            <td class="text-truncate">{{ $request->gst_no }}</td>
                            <td class="text-truncate">{{ $request->coi_no }}</td>
                            <td>
                                <div style="width: 230px; word-wrap: break-word; white-space: normal;">
                                @php
                                    $frontImages = explode(',', $request->aadhar_front);
                                    $backImages = explode(',', $request->aadhar_back);
                                    $maxCount = max(count($frontImages), count($backImages)); // Get the max count
                                @endphp

                                @for ($i = 0; $i < $maxCount; $i++)
                                    @if (isset($frontImages[$i]))
                                        <a href="{{ asset('storage/' . $frontImages[$i]) }}" target="_blank">Aadhar Front {{ $i + 1 }}</a>
                                    @endif

                                    @if (isset($backImages[$i]))
                                        | <a href="{{ asset('storage/' . $backImages[$i]) }}" target="_blank">Aadhar Back {{ $i + 1 }}</a>
                                    @endif

                                    <br> 
                                @endfor
                                </div>
                            </td>
                            <td>
                                <div style="word-wrap: break-word; white-space: normal;">
                                    @php
                                        $panImages = explode(',', $request->pan_file)
                                    @endphp
                                    @for ($i = 0; $i < count($panImages); $i++)
                                        <a href="{{ asset('storage/' . $panImages[$i]) }}" target="_blank">Pan {{ $i + 1 }}</a>
                                        <br> 
                                    @endfor
                                </div>
                            </td>
                            <td>
                                <a href="{{ asset('storage/' . $request->e_shop) }}" target="_blank">E-Shop</a>
                            </td>
                            <td>
                                <a href="{{ asset('storage/' . $request->coi_file) }}" target="_blank">COI File</a>
                            </td>
                            <td>
                                <a href="{{ asset('storage/' . $request->gst_file) }}" target="_blank">GST File</a>
                            </td>
                            <td>
                                <a href="{{ asset('storage/' . $request->moa_file) }}" target="_blank">MOA File</a>
                            </td>
                            <td>
                                <a href="{{ asset('storage/' . $request->aoa_file) }}" target="_blank">AOA File</a>
                            </td>
                            <td class="text-truncate"  style="width: 135px;">{{ $request->address }},{{ $request->state }},{{ $request->country }},{{ $request->zip_code }}</td>
                            <td class="text-truncate">{{ $request->company_name }}</td>
                            <td class="text-truncate" >
                                <div style="width: 250px; word-wrap: break-word; white-space: normal;">    
                                {{ $request->company_address }}
                                </div>
                            </td>
                            <td class="text-truncate">
                                @if ($request->kycstatus == 'A')
                                    <span class="badge bg-primary">Active</span>
                                @elseif ($request->kycstatus == 'B')
                                    <span class="badge bg-danger">Blocked</span>
                                @else
                                    <span class="badge bg-warning">Pending</span>
                                @endif
                            </td>
                            <td class="text-truncate">{{ $request->created_at->format('Y-m-d') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div id="paginationLinks"></div>
            </div>
        </div>
    </div>
</div>  
@endsection
@section('js')
<script>
$(document).ready(function () {
    let currentPage = 1;
    function fetchData(page = 1) {
        $.ajax({
            url: "{{ route('admin.fetch-kyc-data') }}?page=" + page,
            type: "GET",
            data: {
                search: $('#search').val(),
                created_from: $('#created_from').val(),
                created_to: $('#created_to').val(),
                kyc_status: $('#kyc_status').val(),
                user: $('#user').val(),
            },
            success: function (response) {
                currentPage = response.current_page;
                updateTable(response.data, response.per_page);
                updatePagination(response.total, response.per_page, response.current_page);
            }
        });
    }

    function updateTable(data, perPage) {
        let tableBody = $('#tableBody');
        tableBody.empty();
        data.forEach((request, index) => {
            let serialNo = (currentPage - 1) * perPage + (index + 1);
            let firstName = request.user_first_name ?? '';
            let lastName = request.user_last_name ?? '';
            let uid = request.user_uid ?? '';
            let email = request.user_email ?? '';
            let phone = request.user_phone_number ?? '';
            let userDisplay = `${firstName} ${lastName}<br>(${uid})`;
            let userContacts = `${email}<br>${phone}`;
            let frontImages = request.aadhar_front ? request.aadhar_front.split(',') : [];
            let backImages = request.aadhar_back ? request.aadhar_back.split(',') : [];
            let panImages = request.pan_file ? request.pan_file.split(',') : [];

            let aadharLinks = frontImages.map((img, i) => `<a href="/storage/${img}" target="_blank">Aadhar Front ${i + 1}</a>`).join('<br>') +
                              backImages.map((img, i) => ` | <a href="/storage/${img}" target="_blank">Aadhar Back ${i + 1}</a>`).join('<br>');

            let panLinks = panImages.map((img, i) => `<a href="/storage/${img}" target="_blank">Pan ${i + 1}</a>`).join('<br>');

            let kycStatus = request.kycstatus === 'A' ? `<span class="badge bg-primary">Active</span>` :
                            request.kycstatus === 'B' ? `<span class="badge bg-danger">Blocked</span>` :
                            `<span class="badge bg-warning">Pending</span>`;

            tableBody.append(`
                <tr>
                    <td>${serialNo}</td>
                    <td><div class="avatar avatar-sm me-3">
                            <img src="{{ asset('assets/img/avatars/1.png') }}" alt="Avatar" class="rounded-circle">
                        </div>
                        ${request.first_name} ${request.last_name}
                    </td>
                    <td>${request.email}<br>${request.phone_number}</td>
                    <td>${request.aadhar_no.replace(/,/g, '<br>')}</td>
                    <td>${request.pan_no.replace(/,/g, '<br>')}</td>
                    <td>${request.gst_no}</td>
                    <td>${request.coi_no}</td>
                    <td>${aadharLinks}</td>
                    <td>${panLinks}</td>
                    <td><a href="/storage/${request.e_shop}" target="_blank">E-Shop</a></td>
                    <td><a href="/storage/${request.coi_file}" target="_blank">COI</a></td>
                    <td><a href="/storage/${request.gst_file}" target="_blank">GST</a></td>
                    <td><a href="/storage/${request.moa_file}" target="_blank">MOA</a></td>
                    <td><a href="/storage/${request.aoa_file}" target="_blank">AOA</a></td>
                    <td>${request.address}, ${request.state}, ${request.country}, ${request.zip_code}</td>
                    <td>${request.company_name}</td>
                    <td>${request.company_address}</td>
                    <td>${kycStatus}</td>
                    <td>${new Date(request.created_at).toLocaleString()}</td>
                </tr>
            `);
        });
    }

    function updatePagination(total, perPage, currentPage) {
        let totalPages = Math.ceil(total / perPage);
        let paginationHTML = '<ul class="pagination d-flex justify-content-center">';

        paginationHTML += `<li class="page-item ${currentPage == 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" data-page="${currentPage - 1}">«</a></li>`;

        let maxPagesToShow = 4;
        let half = Math.floor(maxPagesToShow / 2);

        let start = currentPage - half;
        let end = currentPage + half;

        if (start < 1) {
            start = 1;
            end = maxPagesToShow;
        }
        if (end > totalPages) {
            end = totalPages;
            start = totalPages - maxPagesToShow + 1;
            if (start < 1) start = 1;
        }

        if (start > 1) {
            paginationHTML += `<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`;
            if (start > 2) {
                paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
        }

        for (let i = start; i <= end; i++) {
            paginationHTML += `<li class="page-item ${i == currentPage ? 'active' : ''}">
                <a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
        }

        if (end < totalPages) {
            if (end < totalPages - 1) {
                paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
            paginationHTML += `<li class="page-item"><a class="page-link" href="#" data-page="${totalPages}">${totalPages}</a></li>`;
        }

        paginationHTML += `<li class="page-item ${currentPage == totalPages ? 'disabled' : ''}">
            <a class="page-link" href="#" data-page="${currentPage + 1}">»</a></li>`;

        paginationHTML += '</ul>';

        $('#paginationLinks').html(paginationHTML);
    }

    $('#search, #created_from, #created_to, #kyc_status, #user').on('input change', function () {
        fetchData(1);
    });

    $(document).on('click', '.pagination .page-link', function (e) {
        e.preventDefault();
        let page = $(this).data('page');
        if (page) fetchData(page);
    });

    $('#export-excel').click(() => window.location.href = "{{ route('admin.kyc-export.excel') }}?" + $('#filter-form').serialize());
    $('#export-pdf').click(() => window.location.href = "{{ route('admin.kyc-export.pdf') }}?" + $('#filter-form').serialize());

    fetchData();
});

</script>
@endsection