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

@section('content')
    <div class="container-fluid">
        <section>
            <div class="page-head-title mb-3">
                <div class="product-report d-flex align-items-center justify-content-between">
                    <div class="d-inline-block">
                        <h2 class="text-title fw-semibold mb-0">Product 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>
                                <div class="table-header-drops">
                                    <select class="js-example-basic-single select2-hidden-accessible" name="state"
                                        data-select2-id="select2-data-1-6h8y" tabindex="-1" aria-hidden="true">
                                        <option value="All Status" data-select2-id="select2-data-3-8jv5">All Groups
                                        </option>
                                        <option value="Active">Fruits</option>
                                        <option value="Inactive">Vegetables</option>
                                    </select>
                                </div>
                            </div>
                            <div class="cz-select">
                                <select class="js-example-basic-single select2-hidden-accessible" name="state"
                                    data-select2-id="select2-data-1-q2w1" tabindex="-1" aria-hidden="true">
                                    <option value="All Status" data-select2-id="select2-data-3-cl70">All Status</option>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                            </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="pt-table-wrap mt-3 mb-3">
                        <table class="pt-table">
                            <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>Product ID</th>
                                    <th>Product Img</th>
                                    <th>Product Name</th>
                                    <th>Group Under</th>
                                    <th>Basic Unit</th>
                                    <th>MRP ₹</th>
                                    <th>Selling Price ₹</th>
                                    <th>Last Updated On</th>
                                    <th>Status</th>
                                    <th>Revenue ₹</th>
                                </tr>
                            </thead>

                            <tbody>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>
                                        250 g
                                        <span class="pt-badge">3+</span>
                                    </td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-active">Active</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>250 g <span class="pt-badge">3+</span></td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-inactive">Inactive</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>
                                        250 g
                                        <span class="pt-badge">3+</span>
                                    </td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-active">Active</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>250 g <span class="pt-badge">3+</span></td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-inactive">Inactive</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>
                                        250 g
                                        <span class="pt-badge">3+</span>
                                    </td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-active">Active</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>250 g <span class="pt-badge">3+</span></td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-inactive">Inactive</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>
                                        250 g
                                        <span class="pt-badge">3+</span>
                                    </td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-active">Active</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PID001</td>
                                    <td>
                                        <div class="pt-img-box"><svg width="24" height="24" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <mask id="mask0_855_2868" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                                    <path d="M24 0H0V24H24V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_855_2868)">
                                                    <path
                                                        d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path
                                                        d="M2.66992 18.9486L7.59992 15.6386C8.38992 15.1086 9.52992 15.1686 10.2399 15.7786L10.5699 16.0686C11.3499 16.7386 12.6099 16.7386 13.3899 16.0686L17.5499 12.4986C18.3299 11.8286 19.5899 11.8286 20.3699 12.4986L21.9999 13.8986"
                                                        stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="pt-product">
                                            <span>Lorem ipsum</span>
                                            <small>லோரம் இப்சம்</small>
                                        </div>
                                    </td>
                                    <td>Fruits</td>
                                    <td>250 g <span class="pt-badge">3+</span></td>
                                    <td>₹000</td>
                                    <td>₹000</td>
                                    <td>00/00/0000</td>
                                    <td class="status-inactive">Inactive</td>
                                    <td class="pt-bold">₹000</td>
                                </tr>
                            </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>