{% extends 'affiliates_templets/affiliates_base.html' %}
{% block content %}

<style type="text/css">
    .pagination-page-info {
        padding: .6em;
        padding-left: 0;
        width: 40em;
        margin: .5em;
        margin-left: 0;
        font-size: 12px;
    }
    .pagination-page-info b {
        color: black;
        background: #6aa6ed;
        padding-left: 2px;
        padding: .1em .25em;
        font-size: 150%;
    }
    body {
        font-family: Arial, sans-serif;
        background-color: #e9ecef;
        margin: 0;
        padding: 40px;
    }

    .form-container {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        margin: auto;
        text-align: center;
        border: 1px solid #dee2e6;
        display: none; /* Initially hidden */
    }

    h2 {
        margin-bottom: 20px;
        color: #343a40;
    }

    .radio-group {
        margin-bottom: 20px;
        text-align: left;
    }

    .input-container {
        margin-top: 15px;
        text-align: left;
    }

    input[type="text"], input[type="number"] {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ced4da;
        border-radius: 5px;
        transition: border-color 0.3s;
    }

    input[type="text"]:focus, input[type="number"]:focus {
        border-color: #80bdff;
        outline: none;
    }

    label {
        margin-right: 15px;
        color: #495057;
    }

    button {
        margin-top: 20px;
        padding: 10px 15px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #0056b3;
    }

    /* Modal Styles */
    .modal {
        display: none; 
        position: fixed; 
        z-index: 1000; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0, 0, 0, 0.5); 
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; 
        padding: 20px;
        border: 1px solid #888;
        width: 80%; 
        max-width: 500px; 
        border-radius: 10px; 
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    .qr-modal {
        display: none; 
        position: fixed; 
        z-index: 1000; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0, 0, 0, 0.5); 
    }

    .qr-modal-content {
        background-color: #fefefe;
        margin: 15% auto; 
        padding: 20px;
        border: 1px solid #888;
        width: 80%; 
        max-width: 500px; 
        border-radius: 10px; 
        text-align: center; 
    }

    .qr-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .qr-close:hover,
    .qr-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Assigned Merchants </h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ url_for('affiliates.view_merchants') }}">Merchant Management List</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Assigned Merchants of {{session.get("affiliateName")}},
                        </div>
                        <div style="text-align: center;">
                         
                            <button type="button" id="openFormButton"  onclick="toggleModal()" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal" data-bs-target="#addtask">
                                <i class="ri-add-circle-line fs-16 align-middle me-1">Create Qr Code</i>
                                </button>
                        </div>

                        <!-- Modal Structure -->
                        <div class="modal" id="paymentModal">
                            <div class="modal-content">
                                <span class="close" onclick="toggleModal()">&times;</span>
                                <h2>Payment Options</h2>
                                <form method="POST" action="{{ url_for('saiaffiliates.qr_code_generator') }}">
                                    <div class="radio-group">
                                        <label>
                                            <input type="radio" name="paymentType" value="single" checked>
                                            Single Payment
                                        </label>
                                        <label>
                                            <input type="radio" name="paymentType" value="multiple">
                                            Multiple Payments
                                        </label>
                                    </div>
                                    <div class="radio-group">
                                        <label>Fixed Amount?</label>
                                        <label>
                                            <input type="radio" name="accepFixedAmount" value='True' checked>
                                            Yes
                                        </label>
                                        <label>
                                            <input type="radio" name="accepFixedAmount" value="False">
                                            No
                                        </label>
                                    </div>
                                    <div class="input-container" id="amountContainer" style="display: block;">
                                        <label for="amount">Enter Amount:</label>
                                        <input type="number" id="amount" name="amount" placeholder="Enter amount">
                                    </div>
                                    <div class="input-container">
                                        <label for="businessName">Business Name:</label>
                                        <input type="text" id="businessName" name="businessName" placeholder="Enter business name">
                                    </div>
                                    <div class="input-container">
                                        <label for="description">Description:</label>
                                        <input type="text" id="description" name="description" placeholder="Enter description">
                                    </div>
                                    <button type="submit">Submit</button>
                                </form>
                            </div>
                        </div>

                        <!-- QR Code Modal Structure -->
                        <div class="qr-modal" id="qrModal">
                            <div class="qr-modal-content">
                                <span class="qr-close" onclick="toggleQrModal()">&times;</span>
                                <h2>QR Code</h2>
                                <img id="qrCodeImage" src="" alt="QR Code" style="width: 100%;">
                            </div>
                        </div>

                        <script>
                            function toggleModal() {
                                const modal = document.getElementById('paymentModal');
                                modal.style.display = (modal.style.display === 'none' || modal.style.display === '') ? 'block' : 'none'; 
                            }

                            function toggleQrModal() {
                                const qrModal = document.getElementById('qrModal');
                                qrModal.style.display = (qrModal.style.display === 'none' || qrModal.style.display === '') ? 'block' : 'none'; 
                            }

                            const fixedAmountRadios = document.querySelectorAll('input[name="accepFixedAmount"]');
                            const amountContainer = document.getElementById('amountContainer');

                            fixedAmountRadios.forEach(radio => {
                                radio.addEventListener('change', () => {
                                    amountContainer.style.display = (radio.value === 'False') ? 'none' : 'block';
                                });
                            });

                            amountContainer.style.display = 'block'; 

                            // Function to show QR code in modal
                            function showQRCode(qrCodeUrl) {
                                document.getElementById('qrCodeImage').src = qrCodeUrl;
                                toggleQrModal();
                            }
                        </script>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                                <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>

                        <div class="filter-form">
                            <form method="GET" action="{{ url_for('saiaffiliates.qr_code_generator') }}">
                                <label for="from_date">From Date:</label>
                                <input type="date" id="from_date" name="from_date" value="{{ from_date }}">
                        
                                <label for="to_date">To Date:</label>
                                <input type="date" id="to_date" name="to_date" value="{{ to_date }}">
                        
                                <input type="hidden" name="search_element" value="{{ search_element }}">
                        
                                <button type="submit" ">Show List</button>
                            </form>
                        </div>

                        <div class="mt-3"></div>
                        <div class="table-responsive">
                            <table id="datatable-basic" class="table text-nowrap">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">Business Name</th>
                                        <th scope="col">Description</th>
                                        
                                        <th scope="col">QR Code URL</th>
                                        <th scope="col">Download QR</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Created On</th>
                                        <th scope="col">Accepted Amount</th> <!-- Updated: Fixed Amount Column -->
                                        <th scope="col">Payment Type</th>
                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for qr_code in qr_code_list %}
                                        <tr>
                                            <td>{{ loop.index }}</td>
                                            <td>{{ qr_code.businessName }}</td>
                                            <td>{{ qr_code.description }}</td>
                                            <td>
                                                <a href="javascript:void(0);" onclick="showQRCode('{{ qr_code.qrcodeUrl }}')">View QR Code</a>
                                            </td>
                                            
                                            <td>
                                                <a href={{qr_code.qrcodeUrl}} target="_blank">Download QR</a>
                                            </td>
                                            <td>
                                                <form action="{{ url_for('saiaffiliates.expire_qr_code', qr_code_id=qr_code.id) }}" method="POST">
                                                    <button type="submit">{{ qr_code.status }}</button>
                                                </form>
                                        </td>
                                            <td>{{ qr_code.createdOn.strftime('%d-%m-%Y %H:%M') }}</td>

                                            <td>
                                                {% if qr_code.accepFixedAmount %}
                                                 Yes ({{ qr_code.acceptAmount }}) <!-- Show the value of accepFixedAmount -->
                                            {% else %}
                                                No 
                                            {% endif %}
                                            </td>
                                            <td>{{ qr_code.paymentType }}</td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td colspan="7" style="text-align:center;">No QR codes found.</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div class="pagination-page-info">
                                    <!-- Showing page info like "Page 1 of 10" -->
                                    Page {{ qr_code_pagination.page }} of {{ qr_code_pagination.pages }}
                                </div>
                                <div class="pagination justify-content-end">
                                    {{ qr_code_pagination.links }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End::row-1 -->
    </div>
</div>
<!-- End::app-content -->

{% endblock %}