@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100 d-flex align-items-center justify-content-between flex-wrap">
                            <div>
                                <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                                <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                            </div>
                            <a href="javascript:void(0)" onclick="history.back()" class="btn btn-secondary">
                                <i class="fa fa-arrow-left"></i>
                                Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @php
                $verifiedStepCount = collect($steps)->where('success', true)->count();
                $totalStepCount = count($steps);
                $allStepsVerified = $totalStepCount > 0 && $verifiedStepCount === $totalStepCount;
            @endphp

            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card customer-profile-card">
                        <div class="card-header bg-primary section-card-header d-flex align-items-center flex-wrap">
                            <div class="customer-avatar-wrap">
                                <img src="{{ asset('img/' . (optional($app_user->details)->gender === 'P' ? 'avatar_female.png' : 'avatar_male.png')) }}"
                                    alt="" class="rounded-circle customer-avatar">
                            </div>
                            <div class="customer-header-info">
                                <h4 class="section-card-header-title mb-0">{{ $app_user->user_name ?: '-' }}</h4>
                                <span class="customer-header-sub">
                                    <i class="fa fa-envelope"></i> {{ $app_user->user_email ?: '-' }}
                                </span>
                            </div>
                            <span
                                class="status-badge status-badge--on-dark {{ $allStepsVerified ? 'status-badge--success' : 'status-badge--warning' }} ml-auto">
                                <i class="fa {{ $allStepsVerified ? 'fa-check-circle' : 'fa-clock' }}"></i>
                                {{ $verifiedStepCount }}/{{ $totalStepCount }} Steps Verified
                            </span>
                        </div>
                        <div class="card-body">
                            <h6 class="detail-section-title">Identification</h6>
                            <div class="row">
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <div class="detail-label">{{ $app_user->id_type ?: 'ID Type' }}</div>
                                    <div class="detail-value">{{ $app_user->user_id ?: '-' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @foreach ($steps as $step => $data)
                <h5 class="mb-3">{{ $data['title'] }}</h5>

                @if ($step == 2)
                    <div class="reference-strip d-flex flex-wrap align-items-center mb-3">
                        <div class="reference-icon">
                            <i class="fa fa-id-card"></i>
                        </div>
                        <div class="d-flex flex-wrap">
                            <div class="reference-item">
                                <div class="detail-label">Name</div>
                                <div class="detail-value">{{ $app_user->user_name ?: '-' }}</div>
                            </div>
                            <div class="reference-item">
                                <div class="detail-label">{{ $app_user->id_type ?: 'User ID' }}</div>
                                <div class="detail-value">{{ $app_user->user_id ?: '-' }}</div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="row mb-4">
                    @forelse($data['files'] as $file)
                        <div class="col-md-4 mb-2">
                            <div class="card">
                                <div class="card-body text-center">

                                    <img src="{{ route('ekyc.file', ['path' => $file->filepath]) }}"
                                        alt="{{ $file->filename }}" class="img-fluid preview-image"
                                        style="max-height:300px;cursor:pointer;" data-toggle="modal"
                                        data-target="#imageModal"
                                        data-image="{{ route('ekyc.file', ['path' => $file->filepath]) }}">

                                    @if ($file->description)
                                        <small class="text-muted d-block mt-2">
                                            {{ $file->description }}
                                        </small>
                                    @endif

                                </div>
                            </div>
                        </div>

                    @empty

                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    No files found.
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>

                @if (!$loop->last)
                    <div class="row">
                        <div class="col-sm-12">
                            <hr style="border-top:1px solid #ced4da;">
                        </div>
                    </div>
                @endif
            @endforeach

            <div class="row mt-2">
                <div class="col-sm-12">
                    <div class="card verify-actions-card">
                        @if ($allStepsVerified)
                            <div class="card-body d-flex align-items-center verify-actions-hint">
                                <i class="fa fa-check-circle text-success"></i>
                                All steps have already been approved for this submission.
                            </div>
                        @else
                            <div class="card-body d-flex align-items-center justify-content-between flex-wrap">
                                <div class="verify-actions-hint">
                                    <i class="fa fa-info-circle"></i>
                                    Review all steps above, then finalize this eKYC submission.
                                </div>

                                <div class="d-flex flex-wrap verify-actions-buttons">
                                    <a href="javascript:void(0)" onclick="history.back()" class="btn btn-verify-cancel">
                                        <i class="fa fa-times"></i>
                                        Cancel
                                    </a>

                                    <button class="btn btn-verify-reject" data-toggle="modal"
                                        data-target="#verificationModal" data-action="Rejected">
                                        <i class="fa fa-times-circle"></i>
                                        Reject
                                    </button>

                                    <button type="button" class="btn btn-verify-approve" id="approveAllBtn">
                                        <i class="fa fa-check-circle"></i>
                                        Approve
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl">
                    <div class="modal-content bg-transparent border-0">
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="modal-body text-center p-0">
                            <img id="modalImage" src="" class="img-fluid rounded">
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="verificationModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content" style="background-color: #fff;">
                        <form action="{{ route('ekyc.verifyAll') }}" method="POST" id="verificationForm">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="verificationModalTitle">
                                    Verification Comment
                                </h5>

                                <button type="button" class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>

                            <div class="modal-body">
                                <input type="hidden" name="status" id="verifyStatus">
                                <input type="hidden" name="user_id" value="{{ $app_user->user_id }}">
                                <div class="form-group" id="verifyCommentGroup">
                                    <label id="verifyCommentLabel">Reason</label>
                                    <textarea class="form-control" name="comment" id="verifyComment" rows="5"
                                        placeholder="Enter reason for rejection..."></textarea>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-verify-cancel" data-dismiss="modal">
                                    <i class="fa fa-times"></i>
                                    Cancel
                                </button>

                                <button type="submit" class="btn btn-verify-reject" id="verifySubmitBtn">
                                    <i class="fa fa-times-circle" id="verifySubmitIcon"></i>
                                    <span id="verifySubmitText">Reject</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .detail-label {
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #7e8299;
            margin-bottom: 4px;
        }

        .detail-value {
            font-size: 14px;
            font-weight: 600;
            color: #2c2e3d;
        }

        .section-card-header {
            gap: 14px;
            padding: 16px 24px;
            background: linear-gradient(135deg, #1fc8bc 0%, #159089 100%);
            border-bottom: none;
        }

        .section-card-header-title {
            font-size: 15px;
            font-weight: 700;
            line-height: 1.2;
            color: #fff;
            letter-spacing: 0.2px;
        }

        .customer-avatar-wrap {
            width: 48px;
            height: 48px;
            flex: 0 0 auto;
            border-radius: 50%;
            padding: 3px;
            background: rgba(255, 255, 255, 0.22);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        }

        .customer-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 50%;
            border: 2px solid #fff;
        }

        .customer-header-info {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .customer-header-info h4 {
            font-size: 17px;
            font-weight: 700;
            line-height: 1.2;
            color: #fff;
            letter-spacing: 0.2px;
        }

        .customer-header-sub {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            line-height: 1.2;
            color: rgba(255, 255, 255, 0.8);
            font-size: 12.5px;
            font-weight: 500;
            text-transform: none;
        }

        .customer-header-sub i {
            font-size: 12px;
            opacity: 0.9;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
            white-space: nowrap;
            text-transform: capitalize;
        }

        .status-badge i {
            font-size: 13px;
        }

        .status-badge--success {
            background-color: #e5f8f3;
            color: #12a678;
        }

        .status-badge--warning {
            background-color: #fff3e0;
            color: #c8790d;
        }

        .status-badge--on-dark {
            background-color: rgba(255, 255, 255, 0.16);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.35);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .status-badge--on-dark.status-badge--success i {
            color: #7be6c6;
        }

        .status-badge--on-dark.status-badge--warning i {
            color: #ffd48a;
        }

        .detail-section-title {
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #7e8299;
            margin-bottom: 15px;
        }

        .reference-strip {
            background: #f0faf9;
            border-left: 3px solid #159089;
            border-radius: 6px;
            padding: 12px 20px;
            gap: 32px;
        }

        .reference-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1fc8bc 0%, #159089 100%);
            color: #fff;
            font-size: 15px;
            margin-right: 20px;
        }

        .reference-item {
            margin-right: 32px;
        }

        .reference-item:last-child {
            margin-right: 0;
        }

        .verify-actions-card {
            border: 1px solid #e6e9ef;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(15, 46, 44, 0.06);
        }

        .verify-actions-hint {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #6b7280;
        }

        .verify-actions-hint i {
            color: #159089;
            font-size: 14px;
        }

        .verify-actions-buttons {
            gap: 10px;
            margin-left: auto;
        }

        .btn-verify-cancel,
        .btn-verify-reject,
        .btn-verify-approve {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 22px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.2;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all .2s ease;
        }

        .btn-verify-cancel {
            background-color: #fff;
            color: #5c6270;
            border-color: #d8dce3;
        }

        .btn-verify-cancel:hover {
            background-color: #f5f6f8;
            color: #3d414c;
            border-color: #c7cbd4;
        }

        .btn-verify-reject {
            background-color: #fdf1f1;
            color: #c0392b;
            border-color: #f3d3d1;
        }

        .btn-verify-reject:hover {
            background-color: #f8dedc;
            color: #a5281a;
            border-color: #eab8b4;
        }

        .btn-verify-approve {
            background: linear-gradient(135deg, #1fc8bc 0%, #159089 100%);
            color: #fff;
            box-shadow: 0 3px 10px rgba(21, 144, 137, 0.3);
        }

        .btn-verify-approve:hover {
            color: #fff;
            box-shadow: 0 4px 14px rgba(21, 144, 137, 0.4);
            transform: translateY(-1px);
        }

        .btn-verify-cancel:focus,
        .btn-verify-reject:focus,
        .btn-verify-approve:focus {
            box-shadow: 0 0 0 3px rgba(21, 144, 137, 0.15);
        }

        .preview-image {
            transition: .3s;
        }

        .preview-image:hover {
            transform: scale(1.03);
            cursor: zoom-in;
        }

        .modal-content {
            background: transparent;
            box-shadow: none;
        }

        #modalImage {
            max-height: 90vh;
            object-fit: contain;
        }

        #imageModal .close {
            position: absolute;
            top: -40px;
            right: -10px;
            font-size: 2rem;
            opacity: .9;
            text-shadow: 0 0 6px rgba(0, 0, 0, .8);
            z-index: 1;
        }

        #imageModal .close:hover {
            opacity: 1;
        }
    </style>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modalImage = document.getElementById('modalImage');

            document.querySelectorAll('.preview-image').forEach(function(img) {
                img.addEventListener('click', function() {
                    modalImage.src = this.dataset.image;
                });
            });

            $('#approveAllBtn').on('click', function() {
                Swal.fire({
                    icon: 'question',
                    title: 'Approve all steps?',
                    text: 'This will mark every verification step for this user as approved.',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, approve',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#19bdb4',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $('#verifyStatus').val('Verified');
                        $('#verifyComment').val('').prop('required', false);
                        $('#verificationForm').trigger('submit');
                    }
                });
            });

            $('#verificationModal').on('show.bs.modal', function(event) {

                var button = $(event.relatedTarget);
                var action = button.data('action');
                var isReject = action === 'Rejected';

                $('#verifyStatus').val(action);
                $('#verifyComment').val('');
                $('#verifyComment').prop('required', isReject);
                $('#verifyCommentGroup').toggle(isReject);

                $('#verificationModalTitle').text(
                    isReject ? 'Reject All Steps' : 'Approve All Steps'
                );

                $('#verifySubmitIcon')
                    .toggleClass('fa-times-circle', isReject)
                    .toggleClass('fa-check-circle', !isReject);

                $('#verifySubmitText').text(isReject ? 'Reject' : 'Approve');

                $('#verifySubmitBtn')
                    .toggleClass('btn-verify-reject', isReject)
                    .toggleClass('btn-verify-approve', !isReject);

            });
        });
    </script>
@endsection