@if (in_array('my_task', $activeWidgets) && (!is_null($viewTaskPermission) && $viewTaskPermission != 'none' && in_array('tasks', user_modules())))
    <div class="row">
        <div class="col-sm-12">
            <div class="card border-0 b-shadow-4 mb-3 e-d-info h-600">
                <x-cards.data :title="__('Tracking - Daily Services')" padding="false" otherClasses="h-600 small latest-jobs">
                    <x-table>
                        <x-slot name="thead">

                            <th>@lang('Client')</th>
                            <th >@lang('Phone')</th>
                            <th>@lang('Invoice')</th>
                            <th >@lang('Brand')</th>
                            <th >@lang('Model')</th>
                            <th >@lang('Service')</th>
                            <th >@lang('Extra Service 1')</th>
                            <th>@lang('Extra Service 2')</th>
                            <th >@lang('Received By')</th>
                            <th >@lang('Date Received')</th>

                            <th >@lang('Delivery Date')</th>

                            <th >Status</th>

                        </x-slot>


                            <tr>
                                <td class="pl-10">Mohammed</td>
                                <td class="pr-10">9898459</td>
                                <td class="pr-10"><a href="/account/invoices/1">7958</a></td>
                                <td class="pr-10">ROLEX</td>
                                <td class="pr-10">DATEJUST</td>
                                <td class="pr-10">FULL-PRO - (OUT ONLY)</td>
                                <td class="pr-10">BUFFINg (CASE & LOCK)</td>
                                <td class="pr-10">REMOVING OLD PRO</td>
                                <td class="pr-10">OSAMA</td>
                                <td class="pr-10" >12-06-2023</td>
                                <td class="pr-10" >13-06-2023</td>
                                <td class="pr-10">
                                    <ul>
                                        <li data-toggle="tooltip" data-placement="top" title="Branch">
                                        <div class="b-dropdown dropdown">
                                            <a class="branchtopbardisplay d-block dropdown-toggle header-icon-box" type="link"
                                                data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" id="dropdownMenuButton1">
                                                <span style="font-weight: 900">PENDING</span>
                                            </a>
                                            <ul class="dropdown-menu latest-jobs" aria-labelledby="dropdownMenuButton1">
                                                <li>
                                                    <a class="dropdown-item bg-grey fs-6 text-black" href="#">
                                                        <span class="fs-6">PENDING</span></a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-orange text-white" href="#">
                                                        <span>IN PROGRESS</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-dark-green text-white" href="#">
                                                        <span>READY</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-blue text-white" href="#">
                                                        <span>DELIVERED</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                            </td>

                            </tr>
                            <tr>
                                <td class="pl-10">Mohammed</td>
                                <td class="pr-10">9898459</td>
                                <td class="pr-10"><a href="/account/invoices/1">7958</a></td>
                                <td class="pr-10">ROLEX</td>
                                <td class="pr-10">DATEJUST</td>
                                <td class="pr-10">FULL-PRO - (OUT ONLY)</td>
                                <td class="pr-10">BUFFINg (CASE & LOCK)</td>
                                <td class="pr-10">REMOVING OLD PRO</td>
                                <td class="pr-10">OSAMA</td>
                                <td class="pr-10" >12-06-2023</td>
                                <td class="pr-10" >13-06-2023</td>
                                <td class="pr-10">
                                    <ul>
                                        <li data-toggle="tooltip" data-placement="top" title="Branch">
                                        <div class="b-dropdown dropdown">
                                            <a class="branchtopbardisplay d-block dropdown-toggle header-icon-box" type="link"
                                                data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" id="dropdownMenuButton1">
                                                <span style="font-weight: 900">PENDING</span>
                                            </a>
                                            <ul class=" dropdown-menu " aria-labelledby="dropdownMenuButton1">
                                                <li>
                                                    <a class="dropdown-item bg-grey fs-6 text-black" href="#">
                                                        <span class="fs-6">PENDING</span></a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-orange text-white" href="#">
                                                        <span>IN PROGRESS</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-dark-green text-white" href="#">
                                                        <span>READY</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-blue text-white" href="#">
                                                        <span>DELIVERED</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                            </td>

                            </tr>
                            <tr>
                                <td class="pl-10">Mohammed</td>
                                <td class="pr-10">9898459</td>
                                <td class="pr-10"><a href="/account/invoices/1">7958</a></td>
                                <td class="pr-10">ROLEX</td>
                                <td class="pr-10">DATEJUST</td>
                                <td class="pr-10">FULL-PRO - (OUT ONLY)</td>
                                <td class="pr-10">BUFFINg (CASE & LOCK)</td>
                                <td class="pr-10">REMOVING OLD PRO</td>
                                <td class="pr-10">OSAMA</td>
                                <td class="pr-10" >12-06-2023</td>
                                <td class="pr-10" >13-06-2023</td>
                                <td class="pr-10">
                                    <ul>
                                        <li data-toggle="tooltip" data-placement="top" title="Branch">
                                        <div class="b-dropdown dropdown">
                                            <a class="branchtopbardisplay d-block dropdown-toggle header-icon-box" type="link"
                                                data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" id="dropdownMenuButton1">
                                                <span style="font-weight: 900">PENDING</span>
                                            </a>
                                            <ul class=" dropdown-menu " aria-labelledby="dropdownMenuButton1">
                                                <li>
                                                    <a class="dropdown-item bg-grey fs-6 text-black" href="#">
                                                        <span class="fs-6">PENDING</span></a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-orange text-white" href="#">
                                                        <span>IN PROGRESS</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-dark-green text-white" href="#">
                                                        <span>READY</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-blue text-white" href="#">
                                                        <span>DELIVERED</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                            </td>

                            </tr>
                            <tr>
                                <td class="pl-10">Mohammed</td>
                                <td class="pr-10">9898459</td>
                                <td class="pr-10"><a href="/account/invoices/1">7958</a></td>
                                <td class="pr-10">ROLEX</td>
                                <td class="pr-10">DATEJUST</td>
                                <td class="pr-10">FULL-PRO - (OUT ONLY)</td>
                                <td class="pr-10">BUFFINg (CASE & LOCK)</td>
                                <td class="pr-10">REMOVING OLD PRO</td>
                                <td class="pr-10">OSAMA</td>
                                <td class="pr-10" >12-06-2023</td>
                                <td class="pr-10" >13-06-2023</td>
                                <td class="pr-10">
                                    <ul>
                                        <li data-toggle="tooltip" data-placement="top" title="Branch">
                                        <div class="b-dropdown dropdown">
                                            <a class="branchtopbardisplay d-block dropdown-toggle header-icon-box" type="link"
                                                data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" id="dropdownMenuButton1">
                                                <span style="font-weight: 900">PENDING</span>
                                            </a>
                                            <ul class=" dropdown-menu " aria-labelledby="dropdownMenuButton1">
                                                <li>
                                                    <a class="dropdown-item bg-grey fs-6 text-black" href="#">
                                                        <span class="fs-6">PENDING</span></a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-orange text-white" href="#">
                                                        <span>IN PROGRESS</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-dark-green text-white" href="#">
                                                        <span>READY</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item bg-blue text-white" href="#">
                                                        <span>DELIVERED</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                            </td>

                            </tr>


                            {{-- <tr>
                                <td colspan="9" class="shadow-none">
                                    <x-cards.no-record icon="tasks" :message="__('messages.noRecordFound')" />
                                </td>
                            </tr> --}}
                    </x-table>
                </x-cards.data>
            </div>
        </div>
    </div>
@endif

<style>
    /* .table thead th{

        font-size: 10px;
    }

    .table tr td {
        font-size: 10px;
    } */
    .dropdown-item{
        font-size: 12px;
    }

    </style>

<script>
$(document).ready(function () {
$(document).on("click", ".b-dropdown .dropdown-menu .dropdown-item", function (e) {
    e.preventDefault();
    if (!$(this).hasClass("active")) {
        var swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: "btn btn-primary m-1",
                cancelButton: "btn btn-danger me-3 m-1",
            },
            buttonsStyling: false,
        });
        swalWithBootstrapButtons
            .fire({
                title: "Are you sure?",
                text: "Do you really want to change the status of this service!",
                icon: "warning",
                confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
                cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
                showCancelButton: true,
                reverseButtons: true,
                focusConfirm: true,
            })
            .then((result) => {
                if (result.isConfirmed) {
                    if (!$(this).hasClass("active")) {
                        $(".b-dropdown .dropdown-menu .dropdown-item").removeClass("active");
                        $(this).addClass("active");
                        $(this)
                            .parents(".b-dropdown")
                            .find(".branchtopbardisplay span")
                            .html( $(this).text());
                    }
                    Swal.fire({
                        icon: "success",
                        title: "Amazing!",
                        text: "Status has been changed successfully.",
                        showConfirmButton: false,
                        timer: 1500,
                    });
                }
            });
    }
});
});
</script>