@extends('layouts.master')

@section('page-title', $page_info['page_title'])

@section('main-section')
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{ $page_info['page_title'] }}</a></li>
                                <li class="breadcrumb-item active">{{ $page_info['page_name'] }}</li>
                            </ol>
                        </div>
                        <h4 class="page-title">{{ $page_info['page_name'] }}</h4>
                    </div>
                </div>
            </div>

            <!-- Table displaying KYC details -->
            <div class="row">
                <table class="table table-bordered table-success">
                    <thead class="bg-primary text-white">
                        <tr>
                            <th>Request ID</th>
                            <th>Customer Name</th>
                            <th>Email Id</th>
                            <th>Status</th>
                            <th>ID's Found</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $kycRequest->kycRequestID }}</td>
                            <td>{{ ucwords($kycRequest->customer_name) }}</td>
                            <td>{{ $kycRequest->customer_email }}</td>
                            <td>{{ ucwords(str_replace('_', ' ', $kycRequest->status)) }}</td>
                            <td>Video, Aadhar, Pancard</td>
                            <td>{{ $kycRequest->updatedOn }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Tabs for Video, Aadhar, and Pancard details -->
            <div class="container">
                <div class="row">
                    <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
                        <li class="nav-item">
                            <a href="#home1" data-bs-toggle="tab" aria-expanded="false" class="nav-link rounded-0 active">
                                <span class="d-none d-md-block">Video Details</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#profile1" data-bs-toggle="tab" aria-expanded="true" class="nav-link rounded-0">
                                <span class="d-none d-md-block">Aadhar Details</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#settings1" data-bs-toggle="tab" aria-expanded="false" class="nav-link rounded-0">
                                <span class="d-none d-md-block">Pancard Details</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane show active" id="home1">
                            <div class="row  d-flex justify-content-center align-items-center">
                                <div class="col-md-12">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Video Geolocation</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>{{ $kycRequest->kycLocation }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-3" id="video-container">
                                     <div class="spinner-border text-success"></div><span> Loading Video...</span>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="profile1">
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Aadhar No.</th>
                                                <th>Name</th>
                                                <th>Father's Name</th>
                                                <th>DOB</th>
                                                <th>Address</th>
                                                <th>ID Type</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>{{ $kycRequest->identityNO}}</td>
                                                <td>{{ ucwords($kycRequest->identityCustomerName) }}</td>
                                                <td>{{ ucwords($kycRequest->identityFatherName) }}</td>
                                                <td>{{ $kycRequest->identityDob }}</td>
                                                <td>{{ $kycRequest->identityAddress }}</td>
                                                <td>{{ $kycRequest->identityIDType }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Aadhar images (Front and Back) in 3x3 grid -->
                                <div class="col-md-12">
                                    <div class="row justify-content-center">
                                         @if(!empty($kycRequest->frontImage))
                                        <!-- Front Aadhar -->
                                        <div class="col-md-3 mb-3" id="front-aadhar-container">
                                             <div class="spinner-border text-success"></div><span> Loading Adhar Card Front...</span>
                                        </div>
                                        @elseif(!empty($kycRequest->digilockerAadhar))
                                            @if(Str::startsWith($kycRequest->digilockerAadhar, 'data:'))
                                            <div class="col-md-3 mb-3">
                                                <iframe src="{{ $kycRequest->digilockerAadhar }}" width="300px" height="600px" style="border:none;"></iframe>
                                            </div>
                                            @else
                                            <div class="col-md-3 mb-3" id="digilocker-aadhar-container">
                                                <div class="spinner-border text-success"></div>
                                                <span>Loading Aadhaar...</span>
                                            </div>
                                            @endif
                                        @endif

                                        @if(!empty($kycRequest->backImage))
                                        <!-- Back Aadhar -->
                                        <div class="col-md-3 mb-3" id="back-aadhar-container">
                                           <div class="spinner-border text-success"></div><span> Loading Adhar Card Back...</span>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="settings1">
                            <div class="row d-flex justify-content-center align-items-center">
                                <div class="col-md-12">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Pancard No.</th>
                                                <th>Name</th>
                                                <th>Father's Name</th>
                                                <th>DOB</th>
                                                <th>ID Type</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>{{ $kycRequest->panNO }}</td>
                                                <td>{{ ucwords($kycRequest->panCustomerName) }}</td>
                                                <td>{{ ucwords($kycRequest->panFatherName) }}</td>
                                                <td>{{ $kycRequest->panDob }}</td>
                                                <td>{{ $kycRequest->panIDTypes }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                 @if(!empty($kycRequest->panCard))
                                <div class="col-md-3" id="pan-container">
                                    <div class="spinner-border text-success"></div><span> Loading Pancard...</span>
                                </div>
                                @elseif(!empty($kycRequest->digilockerPanCard))
                                    @if(Str::startsWith($kycRequest->digilockerPanCard, 'data:'))
                                    <div class="col-md-3 mb-3">
                                        <iframe src="{{ $kycRequest->digilockerPanCard }}" width="300px" height="600px" style="border:none;"></iframe>
                                    </div>
                                    @else
                                    <div class="col-md-3 mb-3" id="digilocker-pan-container">
                                        <div class="spinner-border text-success"></div>
                                        <span>Loading Pan...</span>
                                    </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End container -->
    </div>
</div>
@endsection

@section('custom-js')
<script>
$(document).ready(function() {
    // Media URLs from S3
    @php
        $videoUrl = $kycRequest->videoFileID && $kycRequest->server == 'aws' ? Storage::disk('s3')->temporaryUrl($kycRequest->videoFileID, now()->addMinutes(30)) : null;
        $frontAadharUrl = $kycRequest->frontImage && $kycRequest->server == 'aws' ? Storage::disk('s3')->temporaryUrl($kycRequest->frontImage, now()->addMinutes(30)) : null;
        $backAadharUrl = $kycRequest->backImage && $kycRequest->server == 'aws' ? Storage::disk('s3')->temporaryUrl($kycRequest->backImage, now()->addMinutes(30)) : null;
        $panCardUrl = $kycRequest->panCard && $kycRequest->server == 'aws' ? Storage::disk('s3')->temporaryUrl($kycRequest->panCard, now()->addMinutes(30)) : null;
    @endphp

    var videoUrl = '{{ $videoUrl }}';
    var frontAadharUrl = '{{ $frontAadharUrl }}';
    var backAadharUrl = '{{ $backAadharUrl }}';
    var panCardUrl = '{{ $panCardUrl }}';

    var digilockerAadhar = @json($kycRequest->digilockerAadhar);
    var digilockerPanCard = @json($kycRequest->digilockerPanCard);

    if (videoUrl) {
        $('#video-container').html(`<video controls style="width:300px; height: 250px;"><source src="${videoUrl}" type="video/mp4"></video>`);
    } else {
        fetchMedia('{{ $kycRequest->videoFileID }}', '#video-container', 'video');
    }

    if (frontAadharUrl) {
        $('#front-aadhar-container').html(`<img src="${frontAadharUrl}" class="img-fluid">`);
    } else {
        fetchMedia('{{ $kycRequest->frontImage }}', '#front-aadhar-container', 'front_aadhar');
    }

    if (backAadharUrl) {
        $('#back-aadhar-container').html(`<img src="${backAadharUrl}" class="img-fluid">`);
    } else {
        fetchMedia('{{ $kycRequest->backImage }}', '#back-aadhar-container', 'back_aadhar');
    }

    if (panCardUrl) {
        $('#pan-container').html(`<img src="${panCardUrl}" class="img-fluid">`);
    } else {
        fetchMedia('{{ $kycRequest->panCard }}', '#pan-container', 'pancard');
    }

    if (digilockerAadhar && digilockerAadhar.startsWith('s3://')) {
            fetchMedia(
                digilockerAadhar,
                '#digilocker-aadhar-container',
                'digilocker_aadhar'
            );
        }

        // DigiLocker PAN (only if stored as S3 path)
        if (digilockerPanCard && digilockerPanCard.startsWith('s3://')) {
            fetchMedia(
                digilockerPanCard,
                '#digilocker-pan-container',
                'digilocker_pan'
            );
        }

    function fetchMedia(mediaId, container, type) {
        if(!mediaId) {
            $(container).html('<p>Media not available.</p>');
            return;
        }
        $.ajax({
            url: "{{ route('nbbVideoKyc') }}",
            method: 'GET',
            data: {
                mediaId: mediaId,
                type: type
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data) {
                if (data.success) {
                    if (type === 'video') {
                        var videoContent = `<video controls style="width:300px; height: 250px;">
                                                <source src="data:video/mp4;base64,${data.body}" type="video/mp4">
                                            </video>`;
                        $(container).html(videoContent);
                    } else {
                        // Check if content is PDF by inspecting the base64 string
                        const isPdf = data.body.startsWith('JVBERi0'); // PDF files start with "%PDF-" in ASCII which is "JVBERi0" in Base64

                        if (isPdf) {
                            var pdfContent = `
                                <iframe src="data:application/pdf;base64,${data.body}"
                                        width="300px" height="600px" style="border:none;"></iframe>`;
                            $(container).html(pdfContent);
                        } else {
                            var imgContent = `<img src="data:image/jpeg;base64,${data.body}" class="img-fluid">`;
                            $(container).html(imgContent);
                        }
                    }
                } else {
                    $(container).html('<p>Media not available.</p>');
                }
            },
            error: function() {
                $(container).html('<p>Error fetching media.</p>');
            }
        });
    }
});
</script>
@endsection