@extends('layouts.admin')

@section('title', 'UID Generation System')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-0">
                        <i class="uil uil-shield-check text-primary me-2"></i>
                        UID Generation & Payment Update
                    </h2>
                    <p class="text-muted mb-0">Generate UIDs and update payment fields for valid Razorpay payments</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.payments.bulk-search') }}" class="btn btn-outline-primary btn-sm">
                        <i class="uil uil-search me-1"></i> Bulk Search
                    </a>
                    <a href="{{ route('admin.payments.webhook-logs') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="uil uil-file-alt me-1"></i> Webhook Logs
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 1: Search Payment -->
    <div class="row mb-3" id="searchCard">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-body-tertiary">
                    <h5 class="mb-0">
                        <i class="uil uil-search me-2"></i>
                        Step 1: Search Payment
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <div class="d-flex align-items-start">
                            <i class="uil uil-info-circle fs-5 me-3"></i>
                            <div>
                                <strong>How it works:</strong> Enter user email and Razorpay payment ID to check the payment. 
                                System will analyze what actions are needed (UID generation, payment fields update) and let you review before executing.
                            </div>
                        </div>
                    </div>

                    <form id="searchForm">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-5">
                                <label class="form-label fw-semibold">
                                    User Email <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="uil uil-envelope"></i>
                                    </span>
                                    <input type="email" class="form-control" name="email" id="email" 
                                        placeholder="user@example.com" required>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-semibold">
                                    Razorpay Payment ID <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="uil uil-credit-card"></i>
                                    </span>
                                    <input type="text" class="form-control" name="payment_id" id="payment_id" 
                                        placeholder="pay_xxxxxxxxxxxxx" required>
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary w-100" id="searchBtn">
                                    <i class="uil uil-search me-2"></i>
                                    Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 2: Review Details (Hidden by default) -->
    <div class="row mb-3" id="reviewCard" style="display: none;">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-body-tertiary d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="uil uil-file-check-alt me-2"></i>
                        Step 2: Review & Select Actions
                    </h5>
                    <span id="purposeBadge"></span>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        <!-- Payment Details -->
                        <div class="col-md-6">
                            <h6 class="text-primary mb-3">
                                <i class="uil uil-credit-card me-2"></i>Payment Details
                            </h6>
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <th style="width: 40%;">Payment ID:</th>
                                    <td><code id="review_payment_id"></code></td>
                                </tr>
                                <tr>
                                    <th>Email:</th>
                                    <td id="review_payment_email"></td>
                                </tr>
                                <tr>
                                    <th>Amount:</th>
                                    <td class="fw-bold text-success" id="review_amount"></td>
                                </tr>
                                <tr>
                                    <th>Date:</th>
                                    <td id="review_date"></td>
                                </tr>
                            </table>
                        </div>

                        <!-- User Details -->
                        <div class="col-md-6">
                            <h6 class="text-info mb-3">
                                <i class="uil uil-user me-2"></i>User Details
                            </h6>
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <th style="width: 40%;">Name:</th>
                                    <td id="review_user_name"></td>
                                </tr>
                                <tr>
                                    <th>Email:</th>
                                    <td id="review_user_email"></td>
                                </tr>
                                <tr>
                                    <th>Current UID:</th>
                                    <td id="review_user_uid"></td>
                                </tr>
                                <tr>
                                    <th>Paid Status:</th>
                                    <td id="review_user_paid"></td>
                                </tr>
                                <tr>
                                    <th>Validity:</th>
                                    <td id="review_user_validity"></td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Actions Selection -->
                    <div id="actionsSection">
                        <h6 class="mb-3">
                            <i class="uil uil-clipboard-notes me-2"></i>Select Actions to Perform:
                        </h6>
                        <div id="actionsList" class="mb-3">
                            <!-- Checkboxes will be dynamically added here -->
                        </div>
                        <div class="alert alert-warning">
                            <i class="uil uil-exclamation-triangle me-2"></i>
                            <strong>Note:</strong> Actions marked as required cannot be deselected. Review carefully before approving.
                        </div>
                    </div>

                    <!-- Admin Approval Buttons -->
                    <div class="d-flex gap-2 justify-content-center mt-4">
                        <button type="button" class="btn btn-success btn-lg" id="approveBtn">
                            <i class="uil uil-check-circle me-2"></i>
                            Approve & Execute Selected Actions
                        </button>
                        <button type="button" class="btn btn-secondary" id="cancelBtn">
                            <i class="uil uil-times-circle me-2"></i>
                            Cancel
                        </button>
                    </div>

                    <!-- Hidden fields for approval -->
                    <input type="hidden" id="approve_email">
                    <input type="hidden" id="approve_payment_id">
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Global variables to store search response data
    let searchData = null;

    // jQuery document ready
    $(document).ready(function() {
        // Step 1: Search form submission
        $('#searchForm').on('submit', function(e) {
            e.preventDefault();
            
            const $btn = $('#searchBtn');
            const originalBtnText = $btn.html();
            $btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm me-2"></i> Searching...');
            
            $.ajax({
                url: '{{ route("admin.uid-generation.search") }}',
                method: 'POST',
                data: {
                    email: $('#email').val(),
                    payment_id: $('#payment_id').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        searchData = response;
                        displayReviewDetails(response);
                        showSuccessToast('Payment found successfully!');
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Search Failed',
                            text: response.message || 'Unable to find payment',
                            confirmButtonColor: '#d33'
                        });
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Network error occurred';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: errorMessage,
                        confirmButtonColor: '#d33'
                    });
                },
                complete: function() {
                    $btn.prop('disabled', false).html(originalBtnText);
                }
            });
        });

        // Cancel button
        $('#cancelBtn').on('click', function() {
            Swal.fire({
                title: 'Cancel Process?',
                text: 'Are you sure you want to cancel this UID generation process?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, cancel it'
            }).then((result) => {
                if (result.isConfirmed) {
                    resetForm();
                    showInfoToast('Process cancelled');
                }
            });
        });

        // Approve button
        $('#approveBtn').on('click', function() {
            executeGeneration();
        });
    });

    function displayReviewDetails(data) {
        // Hide search card, show review card
        $('#searchCard').hide();
        $('#reviewCard').show();

        // Payment details
        $('#review_payment_id').text(data.payment.id);
        $('#review_payment_email').text(data.payment.email);
        $('#review_amount').text('₹' + parseFloat(data.payment.amount).toFixed(2));
        $('#review_date').text(data.payment.date);

        // User details
        $('#review_user_name').text(data.user.name);
        $('#review_user_email').text(data.user.email);
        $('#review_user_uid').html(data.user.reg_uid || '<span class="text-muted">Not Generated</span>');
        
        const paidBadge = data.user.paid == 1 
            ? '<span class="badge bg-success">Paid</span>' 
            : '<span class="badge bg-danger">Not Paid</span>';
        $('#review_user_paid').html(paidBadge);
        
        const validityText = data.user.valid_from && data.user.valid_up_to
            ? data.user.valid_from + ' to ' + data.user.valid_up_to
            : '<span class="text-muted">Not Set</span>';
        $('#review_user_validity').html(validityText);

        // Payment purpose badge
        let purposeColor = 'primary';
        if (data.analysis.payment_purpose === 'Membership Renewal') {
            purposeColor = 'success';
        } else if (data.analysis.payment_purpose === 'Black Belt Certificate') {
            purposeColor = 'warning';
        }
        $('#purposeBadge').html(`<span class="badge bg-${purposeColor}">${data.analysis.payment_purpose}</span>`);

        // Build actions checkboxes
        let actionsHtml = '';
        if (data.analysis.can_proceed && data.analysis.available_actions.length > 0) {
            data.analysis.available_actions.forEach(function(action) {
                const isDisabled = action.required ? 'disabled' : '';
                const isChecked = action.checked ? 'checked' : '';
                const requiredLabel = action.required ? ' <span class="badge bg-danger">Required</span>' : '';
                
                actionsHtml += `
                    <div class="form-check mb-2">
                        <input class="form-check-input action-checkbox" type="checkbox" 
                            value="${action.key}" id="action_${action.key}" 
                            ${isChecked} ${isDisabled}>
                        <label class="form-check-label" for="action_${action.key}">
                            ${action.label}${requiredLabel}
                        </label>
                    </div>
                `;
            });
            $('#actionsList').html(actionsHtml);
        } else {
            $('#actionsList').html(`<div class="alert alert-danger">
                <i class="uil uil-exclamation-triangle me-2"></i>
                ${data.analysis.message || 'No actions available'}
            </div>`);
            $('#approveBtn').prop('disabled', true);
        }

        // Store email and payment_id for approval
        $('#approve_email').val(data.user.email);
        $('#approve_payment_id').val(data.payment.id);
    }

    function executeGeneration() {
        // Collect selected actions
        const selectedActions = [];
        $('.action-checkbox:checked').each(function() {
            selectedActions.push($(this).val());
        });

        if (selectedActions.length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'No Actions Selected',
                text: 'Please select at least one action to execute',
                confirmButtonColor: '#3085d6'
            });
            return;
        }

        // Show confirmation dialog
        Swal.fire({
            title: 'Confirm UID Generation',
            html: `
                <p><strong>Payment ID:</strong> ${$('#approve_payment_id').val()}</p>
                <p><strong>User:</strong> ${$('#approve_email').val()}</p>
                <p><strong>Actions:</strong> ${selectedActions.length} action(s) will be executed</p>
                <p class="text-danger mt-3"><strong>This action cannot be undone!</strong></p>
            `,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="uil uil-check me-2"></i>Yes, Execute',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                performGeneration(selectedActions);
            }
        });
    }

    function performGeneration(selectedActions) {
        const $btn = $('#approveBtn');
        const originalBtnText = $btn.html();
        $btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm me-2"></i> Executing...');

        $.ajax({
            url: '{{ route("admin.uid-generation.generate") }}',
            method: 'POST',
            data: {
                email: $('#approve_email').val(),
                payment_id: $('#approve_payment_id').val(),
                selected_actions: selectedActions,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    displaySuccessResult(response);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Generation Failed',
                        text: response.message || 'Execution failed',
                        confirmButtonColor: '#d33'
                    });
                    $btn.prop('disabled', false).html(originalBtnText);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Network error occurred';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Execution Error',
                    text: errorMessage,
                    confirmButtonColor: '#d33'
                });
                $btn.prop('disabled', false).html(originalBtnText);
            }
        });
    }

    function displaySuccessResult(response) {
        // Build actions taken list
        let actionsHtml = '<ul class="list-unstyled">';
        response.actions_taken.forEach(function(action) {
            const icon = action.status === 'success' 
                ? '<i class="uil uil-check-circle text-success me-2"></i>' 
                : '<i class="uil uil-times-circle text-danger me-2"></i>';
            actionsHtml += `<li class="mb-2">${icon}${action.description}</li>`;
        });
        actionsHtml += '</ul>';

        // Build skipped actions if any
        let skippedHtml = '';
        if (response.actions_skipped && response.actions_skipped.length > 0) {
            skippedHtml = '<hr><h6 class="text-muted">Skipped Actions:</h6><ul class="list-unstyled text-muted">';
            response.actions_skipped.forEach(function(action) {
                skippedHtml += `<li class="mb-1"><i class="uil uil-info-circle me-2"></i>${action.reason}</li>`;
            });
            skippedHtml += '</ul>';
        }

        // Determine payment purpose from search data or user message
        let paymentPurpose = searchData && searchData.analysis ? searchData.analysis.payment_purpose : 'Payment Processing';

        Swal.fire({
            icon: 'success',
            title: 'UID Generation Completed Successfully!',
            html: `
                <div class="text-start">
                    <p><strong>Payment Purpose:</strong> <span class="badge bg-primary">${paymentPurpose}</span></p>
                    <p><strong>User:</strong> ${response.user.name} (${response.user.email})</p>
                    <p><strong>UID:</strong> <code>${response.user.reg_uid}</code></p>
                    <hr>
                    <h6>Actions Executed:</h6>
                    ${actionsHtml}
                    ${skippedHtml}
                </div>
            `,
            confirmButtonColor: '#28a745',
            confirmButtonText: 'Process Another Payment',
            width: '600px'
        }).then(() => {
            resetForm();
        });
    }

    function resetForm() {
        $('#searchForm')[0].reset();
        $('#reviewCard').hide();
        $('#searchCard').show();
        searchData = null;
    }

    function showSuccessToast(message) {
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'success',
            title: message,
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true
        });
    }

    function showInfoToast(message) {
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'info',
            title: message,
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true
        });
    }
</script>
@endpush