@extends('backend.template.layouts.template-base')
@section('title', 'Reports - Customer Report')

@section('content')
    <div class="container-fluid">
        <section>
            <div class="page-head-title mb-3">
                <div class="customer-report d-flex align-items-center justify-content-between">
                    <div class="d-inline-block">
                        <h2 class="text-title fw-semibold mb-0">Customer Report
                        </h2>
                    </div>

                    <div class="d-flex align-items-center gap-3">

                        <a href="http://127.0.0.1:8000/admin/manage-users/create-role"
                            class="button-green d-flex flex-row gap-2 align-items-center px-3">
                            <span>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">

                                    <!-- Arrow -->
                                    <path d="M12 4V14" stroke="white" stroke-width="2.5" stroke-linecap="round" />
                                    <path d="M8 10L12 14L16 10" stroke="white" stroke-width="2.5" stroke-linecap="round"
                                        stroke-linejoin="round" />

                                    <!-- Tray -->
                                    <path d="M4 16V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V16"
                                        stroke="white" stroke-width="2.5" stroke-linecap="round" />

                                </svg>
                            </span>
                            Download
                        </a>
                    </div>
                </div>
            </div>

            <div class="card-border">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-md-10 d-flex align-items-center cz-filter-row">
                            <div class="table-search-box cz-search">
                                <img class="table-search-icon"
                                    src="http://127.0.0.1:8000/backend/template/svg-icon/search.svg" alt="search2">
                                <input type="text" placeholder="Search by user ID or name" class="table-search-input"
                                    value="">
                            </div>
                            <div class="cz-date-input">
                                <input type="text" placeholder="Date Range" data-provider="flatpickr"
                                    data-date-format="d M, Y" data-range-date="true" class="cz-date-field">

                                <span class="cz-date-icon">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                        <rect x="3" y="5" width="18" height="16" rx="3" stroke="#6b7280"
                                            stroke-width="1.5" />
                                        <path d="M3 9H21" stroke="#6b7280" stroke-width="1.5" />
                                        <path d="M8 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round" />
                                        <path d="M16 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                </span>
                            </div>



                        </div>

                        <div class="col-md-2 d-flex justify-content-end align-items-center gap-2">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="ct-table-wrap mt-3 mb-3">
                        <table class="ct-table">
                            <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>Customer ID</th>
                                    <th>Customer Name</th>
                                    <th>Contact Number</th>
                                    <th>Total Orders</th>
                                    <th>Total Qty</th>
                                    <th>Total Spent</th>
                                    <th>First Order</th>
                                    <th>Last Order</th>
                                </tr>
                            </thead>

                            <tbody>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>CID001</td>
                                    <td>Customer X</td>
                                    <td>1234567890</td>
                                    <td>123</td>
                                    <td>789</td>
                                    <td>₹000</td>
                                    <td>24 Apr 2024</td>
                                    <td>24 Apr 2026</td>
                                </tr>
                                <!-- repeat rows -->

                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

        </section>


        <div class="modal fade" id="DuplicateRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Duplicate Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to duplicate
                            <span class="fw-semibold">"Role X"</span>
                            permissions to
                            <span class="fw-semibold">“Role Y”?</span>
                        </p>

                        <p class="mb-0 secondary-text mt-1">This will create a new role with the same permissions as the
                            selected role.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green ">Yes, Duplicate</button>
                    </div>

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


        <div class="modal fade" id="DuplicateAndAssignRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Duplicate &amp; Assign Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to duplicate
                            <span class="fw-semibold">"Role X"</span>
                            and directly apply its permissions to
                            <span class="fw-semibold">“Role Y”?</span>
                        </p>

                        <p class="mb-0 secondary-text mt-1">This will create a new role with the same permissions as the
                            selected role. Make sure the permissions are well aligned with the new role.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green ">Yes, Duplicate</button>
                    </div>

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


        <div class="modal fade" id="DeleteRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightRed">
                        <h3 class="text-color-error modal-title mb-0">Delete Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-semibold ">[Role
                                Name]?</span></p>

                        <p class="mb-0 secondary-text mt-1">This action will permanently remove the role and all its
                            assigned permissions.</p>

                        <p class="mb-0 info-text mt-2">
                            <img loading="lazy" src="http://127.0.0.1:8000/backend/template/images/svg/info.svg"
                                alt="info">
                            If the role is currently assigned to any users, it will remove their access permissions.
                        </p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-red">Delete Role</button>
                    </div>

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


        <div class="modal fade" id="ActivateRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Activate Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Do you want to activate <span class="fw-semibold">[Role Name]?</span>
                        </p>

                        <p class="mb-0 secondary-text mt-1">Users assigned to this role will regain access to its
                            permissions.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green ">Activate Role</button>
                    </div>

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


        <div class="modal fade" id="InactivateRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightOrange">
                        <h3 class="color-orange modal-title mb-0">Inactivate Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to deactivate <span class="fw-semibold">[Role
                                Name]?</span></p>

                        <p class="mb-0 secondary-text mt-1">Users assigned to this role will no longer have access to its
                            permissions.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-orange">Inactivate Role</button>
                    </div>

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


    </div>
@endsection
<script>
    document.addEventListener("DOMContentLoaded", function() {

        document.querySelectorAll('[data-provider="flatpickr"]').forEach(function(el) {

            flatpickr(el, {
                mode: el.dataset.rangeDate ? "range" : "single",
                dateFormat: "d M, Y",
            });

        });

    });
</script>