@extends('layouts/contentNavbarLayout')

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

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/masonry/masonry.js') }}"></script>
@endsection

@section('content')
    <!-- Data Tables -->
    <div class="card">
        <div class="card-header bg-primary text-white">
            Users Request
        </div>
        @if(session('success'))
        <div class="alert alert-success m-1">
            {{ session('success') }}
        </div>
        @endif
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead class="table-light">
                        <tr>
                            <th>S.No</th>
                            <th>uID</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">Created</th>
                            <th class="text-truncate">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($userDataCollection as $userData)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td class="text-truncate">{{ $userData->uid }}</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">{{ $userData->first_name }}
                                            {{ $userData->last_name }}</h6>
                                        <small class="text-truncate">{{ '#' . $userData->username }}</small>
                                    </div>
                                </div>
                            </td>
                            <td class="text-truncate">{{ $userData->phone_number }}<br>{{ $userData->email }}</td>
                            <td class="text-truncate"> {!! str_replace(',', '<br>', $userData->aadhar_no) !!}</td>
                            <td class="text-truncate">
                                {!! str_replace(',', '<br>', $userData->pan_no) !!}
                            </td>
                            <td class="text-truncate">{{ $userData->gst_no }}</td>
                            <td class="text-truncate">{{ $userData->coi_no }}</td>
                            <td>
                                <div style="width: 230px; word-wrap: break-word; white-space: normal;">
                                @php
                                    $frontImages = explode(',', $userData->aadhar_front);
                                    $backImages = explode(',', $userData->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(',', $userData->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>
                                @if ($userData->e_shop != null)
                                    <a href="{{ asset('storage/' . $userData->e_shop) }}" target="_blank">E-Shop</a>
                                @endif
                            </td>
                            <td>
                                @if($userData->coi_file != null)
                                    <a href="{{ asset('storage/' . $userData->coi_file) }}" target="_blank">COI File</a>
                                @endif
                            </td>
                            <td>
                                @if($userData->gst_file != null)
                                    <a href="{{ asset('storage/' . $userData->gst_file) }}" target="_blank">GST File</a>
                                @endif
                            </td>
                            <td>
                                @if($userData->moa_file != null)
                                    <a href="{{ asset('storage/' . $userData->moa_file) }}" target="_blank">MOA File</a>
                                @endif
                            </td>
                            <td>
                                @if($userData->aoa_file != null)
                                    <a href="{{ asset('storage/' . $userData->aoa_file) }}" target="_blank">AOA File</a>
                                @endif
                            </td>
                            <td class="text-truncate"  style="width: 135px;">{{ $userData->address }},{{ $userData->state }},{{ $userData->country }},{{ $userData->zip_code }}</td>
                            <td class="text-truncate">{{ $userData->company_name }}</td>
                            <td class="text-truncate" >
                                <div style="width: 250px; word-wrap: break-word; white-space: normal;">    
                                {{ $userData->company_address }}
                                </div>
                            </td>
                            <td class="text-truncate">{{ $userData->created_at->format('Y-m-d') }}</td>
                            <td>
                                <div class="d-flex align-items-center" style="width: 135px;">
                                    <select class="form-select form-select-lg kyc-status-dropdown" data-user-id="{{ $userData->id }}">
                                        <option value="A" {{ $userData->kycstatus == 'A' ? 'selected' : '' }}>Approve</option>
                                        <option value="C" {{ $userData->kycstatus == 'C' ? 'selected' : '' }}>Pending</option>
                                        <option value="B" {{ $userData->kycstatus == 'B' ? 'selected' : '' }}>Reject</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('js')
<script>
    $(document).ready(function(){
       $('.kyc-status-dropdown').change(function () {
            let userId = $(this).data('user-id');
            let kycStatus = $(this).val();

            $.ajax({
                url: "{{ route('admin.update-kyc-status') }}",
                type: "POST",
                data: {
                    user_id: userId,
                    kycstatus: kycStatus,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    console.log(response);
                    toastr.success(response.message);
                    window.location.reload();
                },
                error: function (xhr) {
                    console.error(xhr.responseJSON);
                    toastr.error(xhr.responseJSON?.message || 'Error updating KYC status.');
                }
            });
        });
    });
</script>
@endsection