@extends('layouts.admin')
@section('admin')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Kyc Verification</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0"></ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>ID Type</th>
                                <th>ID Number</th>
                                <th>Phone</th>
                                <th>ID Images</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($kycList as $index => $kyc)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $kyc->full_name }}</td>
                                    <td>{{ ucfirst($kyc->id_type) }}</td>
                                    <td>{{ $kyc->id_number }}</td>
                                    <td>{{ $kyc->phone }}</td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <!-- ID Front Thumbnail -->
                                            <div class="image-container position-relative">
                                                <a href="javascript:void(0)" class="image-thumbnail"
                                                   data-bs-toggle="modal" data-bs-target="#imageModal"
                                                   data-image="{{ asset($kyc->id_front) }}"
                                                   data-title="ID Front - {{ $kyc->full_name }}">
                                                    <img src="{{ asset($kyc->id_front) }}"
                                                         class="img-thumbnail"
                                                         style="width: 50px; height: 50px; object-fit: cover;">
                                                </a>
                                                <button
                                                    class="btn btn-sm btn-outline-primary download-btn position-absolute top-0 start-100 translate-middle"
                                                    data-image="{{ asset($kyc->id_front) }}"
                                                    data-filename="id_front_{{ $kyc->id_number }}.jpg">
                                                    <i class="fas fa-download fa-xs"></i>
                                                </button>
                                            </div>

                                            <!-- ID Back Thumbnail -->
                                            <div class="image-container position-relative">
                                                <a href="javascript:void(0)" class="image-thumbnail"
                                                   data-bs-toggle="modal" data-bs-target="#imageModal"
                                                   data-image="{{ asset($kyc->id_back) }}"
                                                   data-title="ID Back - {{ $kyc->full_name }}">
                                                    <img src="{{ asset($kyc->id_back) }}"
                                                         class="img-thumbnail"
                                                         style="width: 50px; height: 50px; object-fit: cover;">
                                                </a>
                                                <button
                                                    class="btn btn-sm btn-outline-primary download-btn position-absolute top-0 start-100 translate-middle"
                                                    data-image="{{ asset($kyc->id_back) }}"
                                                    data-filename="id_back_{{ $kyc->id_number }}.jpg">
                                                    <i class="fas fa-download fa-xs"></i>
                                                </button>
                                            </div>

                                            <!-- Selfie Thumbnail -->
                                            <div class="image-container position-relative">
                                                <a href="javascript:void(0)" class="image-thumbnail"
                                                   data-bs-toggle="modal" data-bs-target="#imageModal"
                                                   data-image="{{ asset($kyc->selfie) }}"
                                                   data-title="Selfie with ID - {{ $kyc->full_name }}">
                                                    <img src="{{ asset($kyc->selfie) }}"
                                                         class="img-thumbnail"
                                                         style="width: 50px; height: 50px; object-fit: cover;">
                                                </a>
                                                <button
                                                    class="btn btn-sm btn-outline-primary download-btn position-absolute top-0 start-100 translate-middle"
                                                    data-image="{{ asset($kyc->selfie) }}"
                                                    data-filename="selfie_{{ $kyc->id_number }}.jpg">
                                                    <i class="fas fa-download fa-xs"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($kyc->status == 'approved')
                                            <span class="badge bg-success">Approved</span>
                                        @elseif($kyc->status == 'rejected')
                                            <span class="badge bg-danger">Rejected</span>
                                        @else
                                            <span class="badge bg-warning">Pending</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#viewModal{{ $kyc->id }}">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#editModal{{ $kyc->id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#deleteModal{{ $kyc->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{ $kyc->id }}" tabindex="-1"
                                     aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" id="exampleModalLabel">Edit</h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.kyc.update')}}" method="post"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <label>Status</label>
                                                            <select class="form-control" name="status" required>
                                                                <option value="">select any</option>
                                                                <option value="approved">Approved</option>
                                                                <option value="rejected">Rejected</option>
                                                            </select>
                                                            <input type="hidden" name="kyc_id" value="{{$kyc->id}}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{$kyc->id}}" tabindex="-1"
                                     aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" id="exampleModalLabel">Delete</h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.kyc.delete')}}" method="post">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <label>Are you sure to delete?</label>
                                                            <input type="hidden" class="form-control" name="delete_id"
                                                                   value="{{$kyc->id}}" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Delete</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- View Modal (showing details with images) -->
                                <div class="modal fade" id="viewModal{{ $kyc->id }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">KYC Details - {{ $kyc->full_name }}</h5>
                                                <button type="button" class="btn-close"
                                                        data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="list-group">
                                                    <li class="list-group-item"><strong>Full
                                                            Name:</strong> {{ $kyc->full_name }}</li>
                                                    <li class="list-group-item"><strong>Date of
                                                            Birth:</strong> {{ $kyc->dob }}</li>
                                                    <li class="list-group-item">
                                                        <strong>Nationality:</strong> {{ $kyc->nationality }}</li>
                                                    <li class="list-group-item"><strong>ID
                                                            Type:</strong> {{ ucfirst($kyc->id_type) }}</li>
                                                    <li class="list-group-item"><strong>ID
                                                            Number:</strong> {{ $kyc->id_number }}</li>
                                                    <li class="list-group-item">
                                                        <strong>Phone:</strong> {{ $kyc->phone }}</li>
                                                    <li class="list-group-item">
                                                        <strong>Address:</strong> {{ $kyc->address }}</li>
                                                    <li class="list-group-item">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <strong>ID Front:</strong>
                                                            <button class="btn btn-sm btn-outline-primary download-btn"
                                                                    data-image="{{ asset($kyc->id_front) }}"
                                                                    data-filename="id_front_{{ $kyc->id_number }}.jpg">
                                                                <i class="fas fa-download me-1"></i>Download
                                                            </button>
                                                        </div>
                                                        <a href="javascript:void(0)" class="image-thumbnail"
                                                           data-bs-toggle="modal" data-bs-target="#imageModal"
                                                           data-image="{{ asset($kyc->id_front) }}"
                                                           data-title="ID Front - {{ $kyc->full_name }}">
                                                            <img src="{{ asset($kyc->id_front) }}"
                                                                 class="img-thumbnail mt-2" style="max-width:200px;">
                                                        </a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <strong>ID Back:</strong>
                                                            <button class="btn btn-sm btn-outline-primary download-btn"
                                                                    data-image="{{ asset($kyc->id_back) }}"
                                                                    data-filename="id_back_{{ $kyc->id_number }}.jpg">
                                                                <i class="fas fa-download me-1"></i>Download
                                                            </button>
                                                        </div>
                                                        <a href="javascript:void(0)" class="image-thumbnail"
                                                           data-bs-toggle="modal" data-bs-target="#imageModal"
                                                           data-image="{{ asset($kyc->id_back) }}"
                                                           data-title="ID Back - {{ $kyc->full_name }}">
                                                            <img src="{{ asset($kyc->id_back) }}"
                                                                 class="img-thumbnail mt-2"
                                                                 style="max-width:200px;">
                                                        </a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <strong>Selfie with ID:</strong>
                                                            <button class="btn btn-sm btn-outline-primary download-btn"
                                                                    data-image="{{ asset($kyc->selfie) }}"
                                                                    data-filename="selfie_{{ $kyc->id_number }}.jpg">
                                                                <i class="fas fa-download me-1"></i>Download
                                                            </button>
                                                        </div>
                                                        <a href="javascript:void(0)" class="image-thumbnail"
                                                           data-bs-toggle="modal" data-bs-target="#imageModal"
                                                           data-image="{{ asset($kyc->selfie) }}"
                                                           data-title="Selfie with ID - {{ $kyc->full_name }}">
                                                            <img src="{{ asset($kyc->selfie) }}"
                                                                 class="img-thumbnail mt-2"
                                                                 style="max-width:200px;">
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            </tbody>
                        </table>
                        {{$kycList->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Modal (for displaying large images) -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalTitle">Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" class="img-fluid" alt="KYC Document" style="max-height: 70vh;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="downloadModalImage">
                        <i class="fas fa-download me-1"></i>Download Image
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .image-container {
            display: inline-block;
            margin-right: 10px;
        }

        .download-btn {
            background: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 10px;
            z-index: 10;
        }

        .image-thumbnail:hover + .download-btn,
        .download-btn:hover {
            display: flex !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const imageModal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');
            const modalTitle = document.getElementById('imageModalTitle');
            const downloadModalBtn = document.getElementById('downloadModalImage');

            let currentDownloadUrl = '';
            let currentFilename = '';

            // Add click event to all image thumbnails
            document.querySelectorAll('.image-thumbnail').forEach(thumbnail => {
                thumbnail.addEventListener('click', function () {
                    const imageUrl = this.getAttribute('data-image');
                    const title = this.getAttribute('data-title');

                    modalImage.src = imageUrl;
                    modalTitle.textContent = title;
                    currentDownloadUrl = imageUrl;
                    currentFilename = this.getAttribute('data-filename') || 'kyc_document.jpg';
                });
            });

            // Download button in image modal
            downloadModalBtn.addEventListener('click', function () {
                if (currentDownloadUrl) {
                    downloadImage(currentDownloadUrl, currentFilename);
                }
            });

            // Download buttons for individual images
            document.querySelectorAll('.download-btn').forEach(btn => {
                btn.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    const imageUrl = this.getAttribute('data-image');
                    const filename = this.getAttribute('data-filename');
                    downloadImage(imageUrl, filename);
                });
            });

            // Function to download image
            function downloadImage(url, filename) {
                fetch(url)
                    .then(response => response.blob())
                    .then(blob => {
                        const blobUrl = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = blobUrl;
                        a.download = filename;
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(blobUrl);
                        document.body.removeChild(a);
                    })
                    .catch(error => {
                        console.error('Download error:', error);
                        // Fallback: open image in new tab for manual download
                        window.open(url, '_blank');
                    });
            }

            // Set filename for modal download button when opening modal
            imageModal.addEventListener('show.bs.modal', function (event) {
                const relatedTarget = event.relatedTarget;
                if (relatedTarget && relatedTarget.classList.contains('image-thumbnail')) {
                    currentDownloadUrl = relatedTarget.getAttribute('data-image');
                    currentFilename = relatedTarget.getAttribute('data-filename') || 'kyc_document.jpg';
                }
            });
        });
    </script>
@endsection