<div class="modal fade" id="logout" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to logout?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                <form action="<?php echo e(route('user.login')); ?>" method="GET" id="logoutForm">


                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-danger p-3 fw-semibold" id="logout_btn">
                        Yes, Sure
                    </button>
                </form>

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

<style>
    .modal {
    z-index: 20000 !important;
}

.modal-backdrop {
    z-index: 19999 !important;
}
</style>
<!-- delete -->
<div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to delete?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-danger p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="block" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to block?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-secondary p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="confirm" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-success p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="regConfirmModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content reg-confirm-modal p-4">

            <h6 class="text-center fw-semibold mb-4 reg-title">
                Registration Details Confirmation
            </h6>

            <h6>Personal Details</h6>
            <div class="reg-box mb-3">

                <div class="row g-2 reg-text">
                    <div class="col-md-4">
                        <span class="reg-label">Referral Id</span> :
                        <span class="reg-value">COI9384348790</span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">Referral Name</span> :
                        <span class="reg-value">Anish Chandran</span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">Name</span> :
                        <span class="reg-value">John</span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">Phone Number</span> :
                        <span class="reg-value">+91 99555 93102</span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">Email</span> :
                        <span class="reg-value">john@gmail.com</span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">Pin code</span> :
                        <span class="reg-value">555 1924</span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">Address</span> :
                        <span class="reg-value">
                            1901 Thornridge Cir, Shiloh, Hawaii 81063
                        </span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">State</span> :
                        <span class="reg-value">Tamil Nadu</span>
                    </div>

                    <div class="col-md-4">
                        <span class="reg-label">Country</span> :
                        <span class="reg-value">India</span>
                    </div>
                </div>
            </div>

            <h6>Wallet Details</h6>
            <div class="reg-box mb-4">

                <div class="row g-2 reg-text">
                    <div class="col-md-4">
                        <span class="reg-label">Network</span> :
                        <span class="reg-value">Bep 20</span>
                    </div>

                    <div class="col-md-8">
                        <span class="reg-label">Wallet Address</span> :
                        <span class="reg-value">
                            0x859AA4525C5B629034CbF1
                        </span>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-center gap-3">
                <button type="button" class="btn btn-outline-primary px-5" data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button" class="btn btn-primary px-5" data-bs-toggle="modal"
                    data-bs-target="#welcomeModal">
                    Confirm
                </button>
            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="welcomeModal" tabindex="-1">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content shadow border-0 rounded-3 p-4 bg-light">

            <!-- Header -->
            <div class="coin-header text-center rounded-3 py-2 mb-3">
                <h2 class="fw-light m-0 text-white">COIN</h2>
            </div>

            <!-- Title -->
            <h4 class="text-center fw-bold mb-3 text-dark">
                Welcome to Coin
            </h4>

            <!-- Message Card -->
            <div class="card border rounded-3 p-3 mb-3">
                <p class="mb-2 fw-semibold text-muted small">
                    Login Credentials for Coin
                </p>

                <p class="mb-0 small text-muted">
                    <b>Your login credentials</b> will be sent to your registered email ID shortly.
                    <br>
                    Please check your inbox (and spam folder, if necessary).
                </p>
            </div>

            <button type="button" class="btn btn-outline-danger w-100 py-2 coin-close-btn" data-bs-dismiss="modal">
                Close
            </button>

        </div>
    </div>
</div>
<div class="modal fade" id="imageViewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content p-3 rounded-4">

            <div class="d-flex justify-content-end">
                <button type="button" class="close-circle" data-bs-dismiss="modal">×</button>
            </div>

            <div class="text-center">
                <img id="previewImage" src="" class="img-fluid w-100 big-preview-img" alt="Preview">
            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="rejectionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-4">

            <div class="mb-3">
                <h5 class="fw-semibold mb-0">Rejection</h5>
            </div>

            <form id="rejectionForm">

                <div class="mb-4">
                    <label class="form-label small text-muted">Remarks</label>
                    <textarea name="remarks" class="form-control" rows="3" placeholder="Enter Remarks"
                        required></textarea>
                </div>

                <div class="d-flex justify-content-center">
                    <button type="button" class="btn btn-light px-4 me-2" data-bs-dismiss="modal">
                        Discard
                    </button>

                    <button type="submit" class="btn btn-primary px-4">
                        Submit
                    </button>
                </div>

            </form>

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

<style>
    .upload-area {
        border: 2px dashed #ccc;
        border-radius: 12px;
        padding: 30px;
        text-align: center;
        position: relative;
        transition: 0.3s;
        min-height: 220px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .upload-area:hover {
        border-color: #6366f1;
        background: #f9fafb;
    }

    .upload-icon {
        font-size: 40px;
        color: #6366f1;
    }

    /* Preview Image */
    .preview-img {
        display: none;
        max-width: 100%;
        max-height: 180px;
        object-fit: contain;
        border-radius: 10px;
    }

    .purchase-modal {
        background: linear-gradient(135deg, #0a1f44, #0d2c6c);
        border-radius: 15px;
        border: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        animation: modalFadeIn 0.4s ease;
    }

    .attention-btn {
        /* background: linear-gradient(90deg, #ff416c, #ff4b2b); */
         background: linear-gradient(90deg, #ffd700, #ffd700);
        color: #ff4b2b !important;
        font-weight: bold;
        font-size: 1.2rem;
        padding: 12px 30px;
        border-radius: 50px;
        border: none;
        box-shadow: 0 8px 25px rgba(255, 75, 43, 0.6);
        position: relative;
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;

    }

    .attention-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 25px rgba(255, 75, 43, 0.6);
    }

    /* .attention-btn::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: rgba(255,255,255,0.2);
    top: -10%;
    left: -10%;
    transform: rotate(45deg);
    transition: all 0.5s ease;
} */

    /* .attention-btn:hover::before {
        top: -50%;
        left: -50%;
        transform: rotate(90deg);
    } */

.attention-btn {
    animation: beat 1.2s infinite;
}


/* Beat */
@keyframes beat {
    0% { transform: scale(1); }
    25% { transform: scale(1.08); }
    40% { transform: scale(0.96); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

</style>
<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content p-4 position-relative">

            <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"></button>

            <h5 class="mb-4 text-center">Payment Details</h5>

            <form id="paymentForm">

                <div class="mb-3">
                    <label class="form-label">Payment Mode</label>
                    <select name="payment_mode" class="form-select" required>
                        <option value="">Select</option>
                        <option>UPI</option>
                        <option>Bank Transfer</option>
                        <option>Cash</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Transaction ID</label>
                    <input type="text" name="transaction_id" class="form-control" required>
                </div>

                <!-- Upload Box -->
                <div class="mb-4">
                    <label class="form-label">Upload Screenshot</label>

                    <div class="upload-area mb-3 text-center p-4 border rounded position-relative"
                        onclick="document.getElementById('fileInput').click();" id="uploadArea"
                        style="cursor:pointer; overflow:hidden;">

                        <!-- Default Content -->
                        <div id="uploadContent">
                            <i class="ti tabler-upload upload-icon" style="font-size:40px;"></i>
                            <h5 class="mt-2">Upload</h5>

                            <p class="text-muted small">
                                Choose photo size should be less than <br>
                                <strong>2 MB</strong> and should be in <strong>Jpg, Png, JPEG</strong> Format.
                            </p>
                        </div>

                        <!-- Preview Image -->
                        <img id="previewImg" src="" class="img-fluid rounded"
                            style="display:none; max-height:200px; object-fit:contain;">

                        <!-- Hidden File Input -->
                        <input type="file" name="posters_image" id="fileInput" accept=".jpg,.jpeg,.png"
                            style="display:none" required onchange="previewImage(event)">
                    </div>

                </div>

                <div class="d-flex justify-content-center">
                    <button type="submit" class="btn btn-label-secondary me-2" data-bs-dismiss="modal">Discard</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>

            </form>

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


<!-- Modal -->
<div class="modal fade" id="purchaseModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content purchase-modal">

            <!-- Close -->
            <button type="button" class="btn-close btn-close-white ms-auto m-3" data-bs-dismiss="modal"></button>

            <!-- Body -->
            <div class="modal-body text-center px-4 pb-5">

                <h4 class="fw-bold text-white mb-3">
                    Unlock Premium Access
                </h4>

                <p class="text-light mb-4 small">
                    Purchase a unit to get exclusive access and unlock all premium features.
                </p>

               <a href="#"><button class="btn attention-btn ">
                    Purchase Now
                </button></a>

            </div>

        </div>
    </div>
</div>
<script>
    function previewImage(event) {
        const file = event.target.files[0];

        if (!file) return;

        // Validation (important)
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
        if (!allowedTypes.includes(file.type)) {
            alert('Invalid file type');
            return;
        }

        if (file.size > 2 * 1024 * 1024) {
            alert('File size must be less than 2MB');
            return;
        }

        const reader = new FileReader();

        reader.onload = function (e) {
            const previewImg = document.getElementById('previewImg');
            const uploadContent = document.getElementById('uploadContent');

            previewImg.src = e.target.result;
            previewImg.style.display = 'block';

            // Hide text content
            uploadContent.style.display = 'none';
        };

        reader.readAsDataURL(file);
    }
</script><?php /**PATH /var/www/html/omiga_ipl/resources/views/User_layout/modals.blade.php ENDPATH**/ ?>