{{>header}}
<title>Coupon Details</title>
{{!-- Check if there's a success message and display it --}}
{{#if success}}
{{!-- <div class="alert-success">{{success}}</div> --}}
{{/if}}

{{!-- Check if there's an error message and display it --}}
{{!-- {{#if error}}
<div class="alert-danger">{{error}}</div>
{{/if}} --}}


<section class="content">
    <div class="container-fluid">
        <div class="row pb-2 pr-2 pl-2">
            <div class="col-md-12">
                <div class="card card-primary card-outline mt-3">
                    <div class="card-header" style="background-color: white; color:#4B0F77;">
                        <h4><b>Coupon Details</b></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>Coupon Name</b>
                                <p class="float-right">
                                    {{coupon.name}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Coupon Type</b>
                                <p class="float-right">
                                    {{coupon.type}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Code</b>
                                <p class="float-right">
                                    {{coupon.code}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Amount</b>
                                <p class="float-right">
                                    {{coupon.amount}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Percentage</b>
                                <p class="float-right">
                                    {{!-- {{coupon.percentage}} --}}
                                    {{#if coupon.percentage}}{{coupon.percentage}}{{else}}N/A{{/if}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Price Range</b>
                                <p class="float-right">
                                    {{coupon.priceRange}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Status</b>
                                <p class="float-right">
                                    {{#if coupon.status}}{{coupon.status}}{{else}}N/A{{/if}}
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header p-8">
                        <ul class="nav nav-pills">
                            <li class="nav-item mr-2">
                                <a class="nav-link active" href="#details" data-toggle="tab"
                                    style="color: white; background-color: #4B0F77; border-radius: 4px; padding: 8px 12px;">Coupon
                                    Details</a>
                            </li>
                            <li class="nav-item mr-2">
                                <a class="nav-link " href="#orders" data-toggle="tab"
                                    style="color: white; background-color: #4B0F77; border-radius: 4px; padding: 8px 12px;">Vendors</a>
                            </li><br>
                            <li class="nav-item">
                                <a class="nav-link " href="#address" data-toggle="tab"
                                    style="color: white; background-color: #4B0F77; border-radius: 4px; padding: 8px 12px;">Applied
                                    Users</a>
                            </li>
                            {{#ifIncludes User.role 'user'}}
                            <li class="nav-item">
                                <a class="nav-link" href="#address" data-toggle="tab">Address</a>
                            </li>
                            <li class="nav-item">

                                {{/ifIncludes}}
                        </ul>


                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">
                            <!-- User Details Tab -->
                            <div class="tab-pane active" id="details">
                                <form action="/admin/v1/updatecoupoun/{{coupon._id}}" method="post">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Coupon Name</label>
                                                <input type="text" class="form-control" name="name"
                                                    value="{{coupon.name}}" placeholder="Coupon Name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Type</label>
                                                <select name="type" class="form-control type" id="discountTypeSelect2"
                                                    disabled>
                                                    <option value="amount" {{#ifEquals coupon.type "amount"
                                                        }}selected{{/ifEquals}}>Amount</option>
                                                    <option value="percentage" {{#ifEquals coupon.type "percentage"
                                                        }}selected{{/ifEquals}}>Percentage</option>
                                                    <input type="hidden" name="type" value="{{coupon.type}}">
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group" id="discountValueWrapper2">
                                                <label class="col-form-label" id="discountLabel2">Amount</label>
                                                <input type="number" class="form-control" id="discountInput2"
                                                    name="amount" value="{{coupon.amount}}" required
                                                    placeholder="Enter discount amount" min="1" max="99999" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Code</label>
                                                <input type="text" class="form-control" name="code"
                                                    value="{{coupon.code}}" placeholder="coupon code">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Status</label>
                                                <select name="status" class="form-control">
                                                    <option value="Active" {{#eq coupon.status 'Active' }} selected
                                                        {{/eq}}>
                                                        Active</option>
                                                    <option value="Inactive" {{#eq coupon.status 'Inactive' }} selected
                                                        {{/eq}}>Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Price Range</label>
                                                <input type="text" class="form-control" name="priceRange"
                                                    value="{{coupon.priceRange}}" placeholder=" Price Range">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group">
                                            <label for="vendors">Select Vendors</label>

                                            <!-- Search -->
                                            <input type="text" id="vendorSearch" class="form-control mb-2"
                                                placeholder="Search vendor...">

                                            <!-- Select All -->
                                            <div class="mb-2">
                                                <button type="button" class="btn btn-sm btn-outline-primary" 
                                                    id="selectAllVendors">
                                                    Select All
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" style="color: white; border-color: #ffffff;"
                                                    id="unselectAllVendors">
                                                    Unselect All
                                                </button>
                                            </div>

                                            <!-- Vendor List -->
                                            <div id="vendors" class="checkbox-list border rounded p-2"
                                                style="max-height: 200px; overflow-y: auto;">
                                                {{#each allVendors}}
                                                <div class="form-check">
                                                    <input class="form-check-input vendor-checkbox" type="checkbox"
                                                        name="vendors" id="vendor_{{this._id}}" value="{{this._id}}"
                                                        {{#ifIn this._id ../coupon.vendor}}checked{{/ifIn}}>
                                                    <label class="form-check-label" for="vendor_{{this._id}}">
                                                        {{this.communityName}}
                                                    </label>
                                                </div>
                                                {{/each}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group text-center">
                                        <button type="submit" class="btn btn-info col-md-4">Update</button>
                                    </div>
                                    {{!-- <div class="form-group d-flex justify-content-center">
                                        <a href="javascript:void(0);" data-bs-toggle="modal" data-id="{{User._id}}"
                                            data-bs-target="#deleteModal" class="btn btn-danger col-md-4 btn-block">
                                            Delete
                                        </a>
                                    </div> --}}
                                </form>
                            </div>
                            <!-- /.tab-pane -->

                            <!-- Orders Tab -->
                            <div class="tab-pane" id="orders">
                                <div class="row">
                                    <div class="col-sm-12 table-responsive">
                                        <table id="example2" class="table table-striped table-bordered"
                                            aria-describedby="example1_info">
                                            <thead>
                                                <tr>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">S.No
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Community
                                                        Name
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">vendor
                                                        Name
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Phone
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">
                                                        Email</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">
                                                        Action
                                                    </th>


                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{#each coupon.vendor}}
                                                <tr class="odd">
                                                    <td>{{inc @index}}</td>
                                                    <td>{{this.communityName}}</td>
                                                    <td>{{this.vendorName}}</td>
                                                    <td>{{this.phone}}</td>
                                                    <td>{{this.email}}</td>
                                                    <td>
                                                        <div class="eye d-flex justify-content-center">
                                                            <a href="/admin/v1/singlevendor/{{this._id}}"
                                                                class="btn btn-md btn-info m-1">
                                                                <i class="fas fa-eye"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                {{/each}}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            {{!-- applied-users --}}
                            <div class="tab-pane" id="address">
                                <table id="example2" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>User Name</th>
                                            <th>Phone</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each coupon.appliedUsers}}
                                        <tr>
                                            <td>{{inc @index}}</td>
                                            <td>{{this.firstName}} {{this.lastName}}</td>
                                            <td>{{this.phone}}</td>
                                            <td>{{this.status}}</td>
                                            <td>
                                                <div class="eye d-flex justify-content-center">
                                                    <a href="/admin/v1/singleuser/{{this._id}}"
                                                        class="btn btn-md btn-info m-1">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.tab-content -->
                        <!-- Orders Tab -->
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    </div>
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 style="color: black; font-weight: 480;">Are you sure you want to delete this?</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                    <a href="" id="deleteBannerLink" type="button" class="btn btn-danger">Yes</a>
                </div>
            </div>
        </div>
    </div>
    {{!-- select all vendors and unselect all vendors functionality --}}
    <script>
        document.getElementById("selectAllVendors").addEventListener("click", () => {
            document.querySelectorAll(".vendor-checkbox").forEach(cb => cb.checked = true);
        });
        document.getElementById("unselectAllVendors").addEventListener("click", () => {
            document.querySelectorAll(".vendor-checkbox").forEach(cb => cb.checked = false);
        });
    </script>
{{!-- <script>
    document.getElementById("selectAllVendors").addEventListener("click", () => {
            document.querySelectorAll(".vendor-checkbox").forEach(cb => {
                if (cb.closest(".form-check").style.display !== "none") {
                    cb.checked = true;
                }
            });
        });
</script> --}}
    {{!-- // Vendor search functionality --}}
    <script>
        document.getElementById("vendorSearch").addEventListener("keyup", function () {
            const searchValue = this.value.toLowerCase();
            const vendors = document.querySelectorAll("#vendors .form-check");

            vendors.forEach(vendor => {
                const label = vendor.querySelector(".form-check-label").textContent.toLowerCase();
                vendor.style.display = label.includes(searchValue) ? "block" : "none";
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const typeSelect = document.getElementById("discountTypeSelect2");
            const label = document.getElementById("discountLabel2");
            const input = document.getElementById("discountInput2");

            function toggleDiscountField2() {
                if (typeSelect.value === "amount") {
                    label.textContent = "Amount";
                    input.name = "amount";
                    input.placeholder = "Enter discount amount";
                    input.min = 1;
                    input.value = "{{coupon.amount}}"
                    input.max = 99999;
                } else {
                    label.textContent = "Percentage";
                    input.name = "percentage";
                    input.value = "{{coupon.percentage}}"
                    input.placeholder = "Enter discount percentage";
                    input.min = 0;
                    input.max = 100;
                }
            }

            toggleDiscountField2();
            typeSelect.addEventListener("change", toggleDiscountField2);
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#deleteModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var bannerId = button.data('id');
                var modal = $(this);
                modal.find('#deleteBannerLink').attr('href', '/admin/deleteuser/' + bannerId);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            if (!$.fn.DataTable.isDataTable('#example2')) {
                $('#example2').addClass('table table-bordered table-striped').DataTable({
                    "paging": true,
                    "searching": true,
                    "lengthChange": true,
                    "ordering": true,
                    "info": true
                });
            }
        });

    </script>
    <script>
        $(document).ready(function () {
            if (!$.fn.DataTable.isDataTable('#example3')) {
                $('#example3').addClass('table table-bordered table-striped').DataTable({
                    "paging": true,
                    "searching": true,
                    "lengthChange": true,
                    "ordering": true,
                    "info": true
                });
            }
        });

    </script>
</section>
{{>footer}}

<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#example4')) {
            $('#example4').addClass('table table-bordered table-striped').DataTable({
                "paging": true,
                "dom": 'Bfrtip',
                "buttons": [
                    'csv', 'excel', 'pdf', 'colvis'
                ]
            });
        }
    });
</script>