{% extends 'super_admin_templates/base.html' %}
{% block content %}
<script>
    // Confirm delete with redirection
    

    // Toggle image input and external link
    function toggleInputs(index) {
        const isBannerCheckbox = document.getElementById('isBanner');
        const imageContainer = document.getElementById('imageContainer');
        const externalLinkContainer = document.getElementById('externalLinkContainer');
        const googleScriptContainer = document.getElementById('googleScriptContainer');

        if (index) {
            // For edit banner modal
            const editIsBannerCheckbox = document.getElementById('editIsBanner' + index);
            const editImageContainer = document.getElementById('editImageContainer' + index);
            const editExternalLinkContainer = document.getElementById('externalLinkContainer' + index);
            const editgoogleScriptContainer = document.getElementById('googleScriptContainer' + index);

            if (editIsBannerCheckbox.checked) {
                editImageContainer.style.display = 'block';
                editExternalLinkContainer.style.display = 'none';
            } else {
                editImageContainer.style.display = 'none';
                editExternalLinkContainer.style.display = 'block';
            }
        } else {
            // For create banner modal
            if (isBannerCheckbox.checked) {
                imageContainer.style.display = 'block';
                externalLinkContainer.style.display = 'block';
                googleScriptContainer.style.display = 'none';
            } else {
                imageContainer.style.display = 'none';
                externalLinkContainer.style.display = 'none';
                googleScriptContainer.style.display = 'block';
            }
        }
    }
</script>

<!-- 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">Banners</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">Banners</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">Banners List</div>
                        <div class="prism-toggle">
                            {% if 'add' in session.get('bannersPermissions', []) %}
                            <button type="button" 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"></i>Create Banner
                            </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>

                        <div class="row">
                            <div class="col-xl-12">
                                <form method="POST" action="{{ url_for('admin_banners.admin_banners_list')}}" class="row gy-2 gx-3 align-items-center mb-4">
                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{sub_paymentmode_search_element}}" name="sub_paymentmode_search_element" id="autoSizingInput"
                                            placeholder="Search...">
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                </form>
                            </div>
                        </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">Name</th>
                                        <th scope="col">Sorting</th>
                                        <th scope="col">Banner Image</th>
                                        <th scope="col">External Link</th>
                                        <th scope="col">Google Scripts</th>
                                        <th scope="col">Grievance</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for each_banner in bannersList %}
                                    <tr>
                                        <td scope="row">{{ loop.index }}</td>
                                        <td>{{ each_banner.name }}</td>
                                        <td>{{ each_banner.sorting }}</td>
                                        <td>
                                            {% if each_banner.image %}
                                            <div>
                                                <img src="{{ each_banner.image }}" alt="Payment Mode Image" class="img-fluid" style="max-width: 100px; max-height: 100px;">
                                            </div>
                                            {% else %}
                                            <div>
                                                <img src="{{ url_for('static', filename='dummy_profile.png') }}" alt="Dummy Image" class="img-fluid rounded-circle" style="max-width: 45px; max-height: 45px;">
                                            </div>
                                            {% endif %}
                                        </td>
                                        <td>{{ each_banner.externalLink }}</td>
                                        <td>{{ each_banner.googleScript }}</td>
                                        <td>{{ each_banner.isGrievance }}</td>
                                        <td>
                                            {% if each_banner.actionText == "Active" %}
                                                <a class="btn btn-sm btn-success"  href="{{ url_for('admin_banners.admin_banner_status', bannerId=each_banner.id) }}">{{ each_banner.actionText }}</a>
                                            {% else %}
                                                <a class="btn btn-sm btn-warning" href="{{ url_for('admin_banners.admin_banner_status', bannerId=each_banner.id) }}">{{ each_banner.actionText }}</a>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if 'edit' in session.get('bannersPermissions', []) %}
                                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateTask{{ loop.index }}">
                                                <i class="ri-edit-line"></i>
                                            </a>
                                            {% endif %}
                                            {% if 'delete' in session.get('bannersPermissions', []) %}
                                            <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('admin_banners.admin_delete_banner', bannerId=each_banner.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                                                </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                                {% with messages = get_flashed_messages() %}
                                {% if messages %}
                                <ul class="flashes">
                                    {% for message in messages %}
                                    <h2>
                                        <b>
                                            <center style="color:green">{{ message }}</center>
                                        </b>
                                    </h2>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                                {% endwith %}
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->
    </div>
</div>
<!-- End::app-content -->

<!-- Create New Banner Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Banner</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="bannerForm" method="POST" action="{{ url_for('admin_banners.add_admin_banner') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    <!-- Banner Name -->
                    <div class="form-group">
                        <label for="name">Banner Name*</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter Banner Name" required>
                    </div>

                     <!-- Sorting Order -->
                    <div class="form-group">
                        <label for="sorting">Sorting Order</label>
                        <input type="number" class="form-control" id="sorting" name="sorting" value="1" min="1">
                    </div>


                     <!-- Is Banner Checkbox -->
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="isBanner" name="isBanner" checked onchange="toggleInputs()">
                        <label class="form-check-label" for="isBanner">Is Banner</label>
                    </div>

                    <!-- Banner Image Container -->
                    <div class="form-group" id="imageContainer">
                        <label for="image">Banner Image*</label>
                        <input type="file" class="form-control" id="image" name="image" accept="image/*">
                    </div>
 
                   
                    <!-- External Link Container -->
                    <div class="form-group" id="externalLinkContainer">
                        <label for="externalLink">External Link</label>
                        <input type="url" class="form-control" id="externalLink" name="externalLink" placeholder="Enter External Link">
                    </div>

                    <!-- Google Scripts -->
                    <div class="form-group" id="googleScriptContainer" style="display: none;">
                        <label for="googleScript">Google Scripts</label>
                        <textarea class="form-control" id="googleScript" name="googleScript" rows="3" placeholder="Enter Google Scripts"></textarea>
                    </div>

                   <!-- Is Banner Checkbox -->
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="isGrievance" name="isGrievance">
                        <label class="form-check-label" for="isGrievance">Is Grievance</label>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Banner</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Update Banner Modal -->
{% for each_banner in bannersList %}
<div class="modal fade" id="updateTask{{ loop.index }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Update Banner</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editBannerForm{{ loop.index }}" method="POST" action="{{ url_for('admin_banners.admin_edit_banner', bannerId=each_banner.id) }}" enctype="multipart/form-data">
                <div class="modal-body">
                    <!-- Banner Name -->
                    <div class="form-group">
                        <label for="editName{{ loop.index }}">Banner Name*</label>
                        <input type="text" class="form-control" id="editName{{ loop.index }}" name="name" value="{{ each_banner.name }}" required>
                    </div>

                    <!-- Sorting Order -->
                    <div class="form-group">
                        <label for="editSorting{{ loop.index }}">Sorting Order</label>
                        <input type="number" class="form-control" id="editSorting{{ loop.index }}" name="sorting" value="{{ each_banner.sorting }}" min="1">
                    </div>


                    <!-- Is Banner Checkbox -->
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="editIsBanner{{ loop.index }}" name="isBanner" onchange="toggleInputs({{ loop.index }})" {% if each_banner.isBanner %}checked{% endif %}>
                        <label class="form-check-label" for="editIsBanner{{ loop.index }}">Is Banner</label>
                    </div>

                    <!-- Edit Banner Image Container -->
                    <div class="form-group" id="editImageContainer{{ loop.index }}" style="display: {% if each_banner.isBanner %}block{% else %}none{% endif %};">
                        <label for="editImage{{ loop.index }}">Banner Image*</label>
                        <input type="file" class="form-control" id="editImage{{ loop.index }}" name="image" accept="image/*">
                    </div>

                    
                    <!-- External Link Container -->
                    <div class="form-group" id="externalLinkContainer{{ loop.index }}" 
                       style="display: {% if each_banner.isBanner %}block{% else %}none{% endif %};">
                      <label for="editExternalLink{{ loop.index }}">External Link</label>
                      <input type="url" class="form-control" id="editExternalLink{{ loop.index }}" 
                             name="externalLink" value="{{ each_banner.externalLink }}" 
                             placeholder="Enter External Link">
                    </div>

                    <!-- Google Scripts -->
                    <div class="form-group" id="googleScriptContainer{{ loop.index }}" style="display: {% if each_banner.isBanner %}none{% else %}block{% endif %};">
                        <label for="editGoogleScript{{ loop.index }}">Google Scripts</label>
                        <textarea class="form-control" id="editGoogleScript{{ loop.index }}" name="googleScript" rows="3" placeholder="Enter Google Scripts">{{ each_banner.googleScript }}</textarea>
                    </div>

                    <!-- Is Banner Checkbox -->
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="isGrievance{{ loop.index }}" name="isGrievance" {% if each_banner.isGrievance %}checked{% endif %}>
                        <label class="form-check-label" for="isGrievance{{ loop.index }}">Is Grievance</label>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update Banner</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}

<script>
    function confirmDelete(url) {
        if (confirm("Are you sure want to delete?")) {
            window.location.href = url;
        }
    }
</script>
{% endblock %}