<x-app-layout>
    
    <style>
    
      /*.accordion-button:not(.collapsed) {*/
      /*      height: 82px;*/
      /*  }*/
       .accordion-item:last-of-type .accordion-button.collapsed ,.accordion-item:last-of-type .accordion-button.collapsed{
            border-bottom-right-radius: none !important;
            border-bottom-left-radius: none !important;
            /*box-shadow: 0px 0px 4px !important;*/
        }
        .accordion-item .accordion-button
        {
            border-bottom-right-radius: none !important;
            border-bottom-left-radius: none !important;
            /*box-shadow: 0px 0px 4px !important;*/
        }
        .accordion-item .accordion-button {
            background-color: #ffffff;
            padding: 15px 10px 10px 10px;
            /* width: 357px; */
           
        }
        .accordion-item:first-of-type, .accordion-item:not(:first-of-type){
                box-shadow: 0px 0px 4px;
                border-radius: 5px;
        }
        
        .Dashboard_header header .header_box {
        border-bottom: 1px solid #ccc;
        
    }
    .Dashboard_header header .header_left_side .second {
         font-size: 14px;
        color: #4D4D4D;
        font-weight: 600;
    }
    .Dashboard_header header {
            border-bottom: none;
        }
        .Dashboard_header header
        {
            width:95%;
        }
        .accordion-item {
            margin-bottom: 10px;
            /*border-radius: 38px;*/
        }
        .accordion-button::after
        {
            margin-top:-55px;
        }
        
        #order_id p {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
}
.d_one
{
   
    height: 16.76px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 700;
    background: #D4FFE4 !important;
    color: #3B8D5A !important;
}
.can_cel
{
   
    height: 16.76px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 700;
    background: #FFE1E3 !important;
    color: #D5404A !important;
}
.all-order #order_1 {
    border: 1px solid #696974;
    padding: 20px 15px;
    border-radius: 8px;
    background-color: #ffffff;
}

.recipt {
    border: 1px solid #84b6ba;
    height: 28px;
    padding: 5px;
    gap: 5px;
}

.recipt p {
    font-size: 16px;
    font-weight: 400;
    color: #01a0fa;
    line-height: 10px;
    margin-top:2px;
}

.recipt_1 p {
    font-size: 11px;
    font-weight: 500;
    color: #4d4d4d;
}

.recipt_1 h6 {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    margin-top:-10px;
}

#tshirt_id h5 {
    font-size: 20px;
    font-weight: 500;
    color: #696974;
}

#tshirt_id h4 {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
}

#add_id_1 p {
    font-size: 24px;
    font-weight: 500;
    color: #000000;
}

#add_id h5 {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

#add_id h6 {
    background-color: #3199ff;
    border: 1px solid #4d4d4d;
    height: 28px;
    width: 28px;
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    border-radius: 4px;
    text-align: center;
    margin-right: 10px;
}

.img_order {
    border-top: 1px solid #4d4d4d;
    padding-top: 10px;
}

.img_order_1 {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.img_order_1 h6 {
    font-size: 20px;
    font-weight: 500;
    color: #414141;
}

.img_order_1 p {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0;
}

.img_order_2 {
    display: flex;
    justify-content: space-between;
}

.img_order_2 h6 {
    font-size: 20px;
    font-weight: 500;
    color: #414141;
}

.img_order_2 p {
    font-size: 24px;
    font-weight: 500;
    color: #449448;
    margin-bottom: 0;
}

.img_order_3 {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #4d4d4d;
    padding-top: 10px;
}

.img_order_3 h6 {
    font-size: 21px;
    font-weight: 500;
    color: #414141;
}

.img_order_3 button {
    font-size: 10px;
    font-weight: 500;
    height: 19px;
    width: 42px;
    background: #fff;
    border-radius:2px;
}

.img_order_3 p {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
}

#user_id {
    border: 1px solid #1b59f8;
    padding: 15px;
    border-radius: 8px;
    background-color: #ffffff;
    margin:auto;
    margin-top:20px !important;
}

#user_id h5 {
    font-size: 16px;
    font-weight: 400;
    color: #2e2e2e;
}

#user_id h6 {
    font-size: 15px;
    font-weight: 400;
    color: #5d5d5d;
}

#user_id h5 {
    font-size: 15px;
    font-weight: 400;
    color: #2e2e2e;
}

#ss {
    font-size: 16px;
    font-weight: 400;
    color: #2e2e2e;
    margin-bottom: 0;
}

.refund_id {
    margin-top: 30px;
    background-color: #ffffff;
    padding: 15px;
    box-shadow: 0px 0px 4px;
}

.refund_id h4 {
    color: #000000;
    padding-bottom: 15px;
    border-bottom: 1px solid #000000;
}

.button_acc p {
    font-size: 12px;
    font-weight: 500;
    color: #000000;
}

.button_acc #pend {
    background-color: #fff3d4;
    color: #e7ad18;
    font-size: 12px;
    font-weight: 700;
    width: 62px;
    height: 19px;
}
.item_3
{
    font-weight:700;
    font-size:12px;
    color:#99999999;
}
#table_section {
    width: 100%;
}

#table_section tr {
    background-color: #eeeeee;
    border-radius: 5px;
    /* padding-bottom: 15px; */
    height: 33.53px;
    /* margin-top: 10px; */
}

#table_section tr #Shirt {
    font-size: 12px !important;
    font-weight: 400;
    color: #282323;
}

#table_section tr #wash {
    font-size: 9px !important; 
    font-weight: 400;
    text-align: center;
    color: #999999;
}

#table_section tr #num {
    color: #282323;
    font-size: 10px !important;
    font-weight: 700;
    text-align: center;
}

.accordion #jan_id p {
    font-size: 12px;
    font-weight: 500;
    color: #000000;
}

.accordion #jan_id button {
    background-color: #fff3d4;
    font-size: 12px;
    font-weight: 700;
    color: #e7ad18;
    border: none;
    width: 60px;
    border-radius: 3px;
    padding: 0 5px;
    margin-right: 10px;
    height: 16px;
}

.accordion .od_num {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    margin: 5px 0;
}

.accordion-button:not(.collapsed) {
    background-color: #ffffff;
    /* border-radius: 8px; */
}

@media (max-width: 992px) {
    .accordion {
        margin-top: 20px;
    }
}

/* ---- */

.cbp_tmtimeline {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.cbp_tmtimeline:before {
    content: "";
    position: absolute;
    top: 0%;
    bottom: 0;
    width: 2px;
    background: #1b59f8;
    left: 4.2%;
    height: 20vh;
}

/* @media (max-width:4000px) and (min-width:1439px) {
    .cbp_tmtimeline:before {
        height: 21vh;
    }
} */

.cbp_tmtimeline li:last-child:before {
    content: initial;
}

.cbp_tmtimeline > li .cbp_tmlabel {
    margin: 0 0 0px 10%;
    color: #696d61;
    font-size: 12px;
    max-height: 150px;
    line-height: 25px;
}

.cbp_tmtimeline > li .cbp_tmicon {
    width: 25px;
    height: 21px;
    top: 1%;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.4em;
    line-height: 15px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    border: 1.2px solid #1b59f8;
    /* background-color: #fff; */
    border-radius: 50%;
    text-align: center;
    left: 7.5%;
    background-color: #fff;
    margin: 0 0 0 -27px;
}

.cbp_tmtimeline > li .cbp_tmicon input[type="checkbox"] {
    width: 25.8px;
    height: 21.54px;
    /* border: 1.2px solid #1b59f8 !important; */
    border-radius: 50% !important;
}

.cbp_tmtimeline li {
    position: relative;
    height: 60px;
}

#recent_activity_logo {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    color: #1b59f8;
    background-color: #ce2121;
    border-radius: 50%;
    line-height: 20px;
    width: 25px;
    height: 21px;
}

.timeline_section {
    background-color: #ffffff;
    padding: 10px 40px;
    margin-bottom: 10px;
    border: 1px solid #1b59f8;
    border-radius: 8px;
    height: 349px;
}

.timeline_section button {
    background-color: #df3636;
    font-size: 9.73px;
    font-weight: 500;
    color: #ffffff;
    border: none;
    padding: 5px 20px;
    border-radius: 12.98px;
}

.projectParagraph {
    font-size: 16px;
    font-weight: 700;
    color: #474747;
    margin-bottom: 0;
}

.projectParagraph span {
    font-size: 12px;
    font-weight: 400;
    color: #747474;
}

.drop_section h6{
 
font-size: 18px;
font-weight: 700;
color:#3B8D5A;

}

.drop_section h5{
   font-size:12px;
   color:#999999;

}
#user_id {
    margin: auto;
    border: 1px solid #1b59f8;
    padding: 15px;
    border-radius: 8px;
    background-color: #ffffff;
}
.user_name
{
    font-size: 16px;
    font-weight: 400;
    color: #2E2E2E;
}
.Dashboard_header header .header_box {
        border-bottom: 1px solid #ccc;
        width:87%;
    }
    @media(max-width:1400px){
        .Dashboard_header header .header_box {
        width:96%;
    }
    /*.header_left_side{*/
    /*        margin-right: 40px;*/
    /*}*/
    }
    
    .Dashboard_header header .header_left_side .second {
         font-size: 14px;
        color: #4D4D4D;
        font-weight: 600;
    }
    .Dashboard_header header {
            border-bottom: none;
        }
        .Dashboard_header header {
            z-index: 999;
        }
        
        .form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
    background-color: inherit;
    color: black;
    padding: 15px 15px 0px 15px;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 18px;
}
#flexCheckDefault0, #flexCheckDefault1, #flexCheckDefault2, #flexCheckDefault3,#flexCheckDefault4 {
    position: relative;
    width: 25px;
    height: 25px;
    border: 1px solid #1B59F8;
}
/*#flexCheckDefault {*/
/*    border: none;*/
/*}*/
/*.form-check input[type="checkbox"] {*/
/*    color: #696D61;*/
/*}*/
/*.form-check .active-checkbox {*/
/*    background-color: #8DC73F !important;*/
/*}*/
.form-check-input {
    border-radius: 50px !important;
    width: 30px;
    height: 30px;
    margin-top: 0;
    margin-right: 15px;
    font-size: 10px;
    /*background-image: url(../../public/images/icons/check-b.png) !important;*/
}
.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}
.form-check-input {
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
}
#flexCheckDefault4::before {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 15 11'%3E%3Cpath d='M2 6.53441L4.89462 9.17949L12.7514 2' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    position: absolute;
    font-size: 16px;
    color: #fff !important;
}

.form-check .active-checkbox {
            color: #fff;
            border: none;
            content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        }

        /*.tablinks.active .form-check input[type="checkbox"] {*/
        /*    background-color: #8DC73F !important;*/
        /*    color: #fff !important;*/
        /*    border: none;*/
        /*}*/

        .form-check .active-checkbox {
            background-color: #F90909 !important;
            color: #fff;
            border: 2px solid #304FFE;
        }
        
        .form-check .hide-content {
            background-color: transparent !important;
            color: #fff;
            content="";
            border: 2px solid #304FFE;
        }

        /*.form-check .active-checkbox+label {*/
        /*    color: #8DC73F;*/
        /*}*/
        
        /*#OrderShiping input[type="checkbox]{*/
        /*    background-color: pink !important;*/
        /*}*/
        .line-div {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    margin-top: -4px;
    margin-bottom: -12px;
}
        .lineBetween {
            color: #304FFE;
            font-family: DM Sans;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
            margin-top: -6px;
            margin-bottom: -5px;
        }

    </style>




<header>
        <div class="d-flex justify-content-between header_box">
            
            <h3>User Management/<span style="font-size:20px;color:#4D4D4D" id="heading-short">{{ $singleOrderDetails->users->name }}/#{{ $singleOrderDetails->OrderID }}</span></h3>
            <div class="header_left_side">

                <span class="second" style="margin-right:18px"><svg xmlns="http://www.w3.org/2000/svg"  width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1" />
                    </svg> Download</span>
            </div>
        </div>
    </header>


            <div class="user_container" style="display: block;margin-left:10px;">
           <div class="all-order" style="margin-left: -15px;">

                    <div class="d-flex gap-2" id="order_id">
 @if ($singleOrderDetails)
       <a href="{{ route('usermanagement_userdetail', ['id' => $singleOrderDetails->userID]) }}">
    <img src="{{asset('IMAGES\ep_back.svg')}}" style="height:30px; width:30px;">
</a>
    @else
        <p>No order details found.</p>
    @endif                        
    <p class="mb-0">Order <br>
                            #{{$singleOrderDetails->OrderID}}</p>
                    </div>

                    <div class="">
                        <div class="row mt-4">
                            <div class="col-lg-7 col-md-7 col-sm-12">

                                <div id="order_1">
                                    <div class="d-flex justify-content-between">
                                        <div class="recipt_1">
                                            <h6>#{{$singleOrderDetails->OrderID}}</h6>
                                            <p>{{ \Carbon\Carbon::parse($singleOrderDetails->created_at)->isoFormat('DD MMM YYYY, hh:mm A') }}</p>
                                        </div>

                                        <div class="d-flex recipt">
                                            <img src="{{asset('IMAGES\Vectorccc.svg')}}">
                                            <p> Receipt</p>
                                        </div>

                                    </div>

                                    <div class="img_order">
                                        <div class="d-flex gap-3  mt-2 mx-3">
                                            <img src="{{asset('IMAGES\unsplash_9ugEeqflo70.svg')}}">

                                            <div class="w-100 mt-2" id="tshirt_id">
                                                <h5> <span style="color: #000;">Cloths:</span> @foreach(json_decode($singleOrderDetails->Items) as $item)
        {{$item->name}}
        @if (!$loop->last)
            ,
        @endif
    @endforeach</h5>
                                                <h4> Service: <span style="color:#4d4d4d"> @foreach(json_decode($singleOrderDetails->Items) as $item)
        {{$item->type}}
        @if (!$loop->last)
            ,
        @endif
    @endforeach</span></h4>
                                                <div class="d-flex justify-content-between" id="add_id_1">
                                                    <div class="d-flex mt-2" id="add_id">
                                                        <h6> 3 </h6>
                                                        <h5> X <span style="color:#696974">60</span></h5>
                                                    </div>
                                                    <p class="mt-2"> Rs 180</p>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="img_order_1 mx-3">
                                        <h6>Total</h6>
                                        <p>{{$singleOrderDetails->UserTotalCost}}</p>
                                    </div>

                                    <div class="img_order_2 mx-3">
                                        <h6>Delivery</h6>
                                        <p>{{$singleOrderDetails->DeliveryCharges}}</p>
                                    </div>


                                    <div class="img_order_3 mx-3">
                                        <h6>Total</h6>

                                        <div class="d-flex gap-3">
                                            <button
                                                style="border: 1px solid #FFBC10;color: #FFBC10;margin-top: 5px">COD</button>
                                            <button
                                                style=";border: 1px solid #86D284;color:#000;margin-top: 5px">@if($singleOrderDetails->PaymentMode == 'Cash')
                                            Cash
                                            @elseif($singleOrderDetails->PaymentMode == 'Online')
                                            Online
                                            @elseif($singleOrderDetails->PaymentMode == 'Wallet')
                                            Wallet
                                            @else
                                            N/A
                                            @endif</button>
                                            <p>Rs 180</p>
                                        </div>

                                    </div>

                                </div>

                                <div class="">

                                    <div class="row " id="user_id">
                                        <div class="col-lg-12">
                                            <div class="d-flex gap-2">
                                                <img src="{{asset('IMAGES\1.svg')}}">
                                                <div class="">
                                                    @if($singleOrderDetails->users)
                                                    <div class="d-flex justify-content-between">
        <p class="user_name">{{ $singleOrderDetails->users->name }}</p>
        <div class="d-flex">
         <img style="height: 24px;"  src="{{asset('IMAGES\material-symbols_call_yy.svg')}}">
        <p class="ss mb-0">{{ $singleOrderDetails->users->phone }}</p>
        </div>
        </div>
        <h6>{{ $singleOrderDetails->users->email }}</h6>
        <h5>Shipping address: {{ $singleOrderDetails->Caddress }}</h5>
    @else
        <p>User not found</p>
    @endif
                                                    <!--<h6>username@company.com</h6>-->
                                                    <!--<h5>Shipping address:<br>-->
                                                    <!--    Ramnager, 845103</h5>-->
                                                </div>
                                            </div>
                                        </div>
    <!--                                    <div class="col-lg-5">-->
    <!--                                            @if($singleOrderDetails->users)-->
    <!--                                        <div class="d-flex">-->
    <!--                                            <img src="{{asset('IMAGES\material-symbols_call_yy.svg')}}">-->
    <!--    <p class="ss mb-0">{{ $singleOrderDetails->users->phone }}</p>-->
    <!--@else-->
    <!--    <p>User not found</p>-->
    <!--@endif-->
    <!--                                        </div>-->
    <!--                                    </div>-->
                                    </div>
                                </div>

                                <div class="refund_id">
                                    <h4>Payments & Refunds</h4>

                                    <p>Payments</p>

                                    <table class="w-100">
                                        <tbody>
                                            <tr style="background-color: #ebebeb;">
                                                <td>Payments Sources</td>
                                                <td>Transcation ID</td>
                                                <td>Amount</td>
                                                <td>Payments status</td>
                                            </tr>

                                            <tr style="padding-bottom:20px;border-bottom:1px solid #dfdddd;">
                                                <td>Collected by Delivery Partner</td>
                                                <td>67654342666</td>
                                                <td>180</td>
                                                <td>Completed</td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <h6 class="mt-3">Refunds</h6>
                                    <table class="w-100">
                                        <tbody>
                                            <tr style="background-color: #eeeded;">
                                                <td>Payments Sources</td>
                                                <td>Transcation ID</td>
                                                <td>Amount</td>
                                                <td>Payments status</td>
                                            </tr>

                                        </tbody>
                                    </table>

                                    <p style="font-size:10px;text-align:center;margin-bottom:0;margin-top:10px;">No record Found</p>
                                </div>

                            </div>


                            <div class="col-lg-5 col-md-5 col-sm-12">

                                <div class="timeline_section">
                                    <button>Cancel</button>

                                    
                                    <div class="form-check" onclick="applyCheckboxStyle('OrderDelivered')" id="OrderDelivered">
                                                <input class="form-check-input" name="fav_language" type="checkbox" value="flexCheckDefault" id="flexCheckDefault0">
                                                <label class="form-check-label" for="flexCheckDefault0">Order Delivered</label>
                                    </div>
                                    <div class="line-div">
                                        <p class="lineBetween">|</p>
                                        <p class="lineBetween">|</p>
                                    </div>
                                    
                                     <div class="form-check" onclick="applyCheckboxStyle('OrderShiping')" id="OrderShiping">
                                                <input class="form-check-input" name="fav_language" type="checkbox" value="" id="flexCheckDefault1">
                                                <label class="form-check-label" for="flexCheckDefault1">Order Shiping</label>
                                            </div>
                                    <div class="line-div">
                                        <p class="lineBetween">|</p>
                                        <p class="lineBetween">|</p>
                                    </div>        
                                    <div class="form-check" onclick="applyCheckboxStyle('OrderCancel')" id="OrderCancel">
                                                <input class="form-check-input" name="fav_language" type="checkbox" value="" id="flexCheckDefault2">
                                                <label class="form-check-label" for="flexCheckDefault2">Order Cancel</label>
                                            </div>
                                    <div class="line-div">
                                        <p class="lineBetween">|</p>
                                        <p class="lineBetween">|</p>
                                    </div>
                                    <div class="form-check" onclick="applyCheckboxStyle('OrderReview')" id="OrderReview">
                                                <input class="form-check-input" name="fav_language" type="checkbox" value="" id="flexCheckDefault3">
                                                <label class="form-check-label" for="flexCheckDefault3">Order Review</label>
                                            </div> 
                                            
                                    <div class="line-div">
                                        <p class="lineBetween">|</p>
                                        <p class="lineBetween">|</p>
                                    </div>
                                        <div class="form-check" onclick="applyCheckboxStyle('OrderReceived')" id="OrderReceived">
                                                <input class="form-check-input active-checkbox" name="fav_language" type="checkbox" value="" id="flexCheckDefault4">
                                                <label class="form-check-label" for="flexCheckDefault4">Order Received</label>
                                            </div>    
                                </div>
                                
                                <script>

        function applyCheckboxStyle(cityName) {
            // Get all checkboxes
            var checkboxes = document.querySelectorAll('.form-check input[type="checkbox"]');

            checkboxes.forEach(function(checkbox) {
                checkbox.classList.remove('active-checkbox');
                checkbox.classList.add('hide-content');
            });
            
             for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].classList.remove('active-checkbox');
                checkboxes[i].classList.add('hide-content');
            }

            var activeTabCheckboxes = document.querySelectorAll('#' + cityName + ' input[type="checkbox"]');
            
            activeTabCheckboxes.forEach(function(checkbox) {
                 console.log(checkbox);
                checkbox.classList.add('active-checkbox');
            });
            
            // Remove style from all checkboxes
          var activeCheckboxes = document.querySelectorAll('#' + cityName + ' input[type="checkbox"]');
            activeCheckboxes.forEach(function(checkbox) {
                var lastDigit = checkbox.id.substr(checkbox.id.length - 1); // Extract last digit of ID
                console.log(lastDigit);
                for (var i = 4; i >= lastDigit; i--) {
                    checkboxes[i].classList.remove('hide-content');
                checkboxes[i].classList.add('active-checkbox');
                
            }
            });
            // Apply style to checkboxes within the active tab button
            

            // // Remove style from all checkboxes
            // var checkboxes = document.querySelectorAll('.form-check input[type="checkbox"]');
            // checkboxes.forEach(function(checkbox) {
            //     checkbox.style.backgroundColor = '';
            //     checkbox.style.backgroundImage = '';
            //     checkbox.style.color = '';
            // });

            // Remove hide-content class from all checkboxes
            var checkboxes = document.querySelectorAll('.form-check input[type="checkbox"]');
            checkboxes.forEach(function(checkbox) {
                
            });

            // Apply hide-content class to checkboxes in the active tab
            var activeCheckboxes = document.querySelectorAll('#' + cityName + ' input[type="checkbox"]');
            activeCheckboxes.forEach(function(checkbox) {
                
            });

        }
    </script>
                               

                                <div class="">
                                    <div class="accordion" id="accordionExample">
@foreach($pastOrders ->take(5) as $key => $orders)
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <div class="accordion-button" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapse{{ $key }}" aria-expanded="{{ $key === 0 ? 'true' : 'false' }}"
                                                    aria-controls="collapse{{ $key }}">

                                                    <div class=" w-100" id="jan_id">
                                                        <div class="d-flex justify-content-between" style="width:100%;">
                                                                                <p class="mb-0">{{ \Carbon\Carbon::parse($orders->created_at)->isoFormat('DD MMM YYYY, hh:mm A') }}</p>

                                                            <button style="margin-right: 22px;">
                                                                @if($orders->status == 'P')
                                                            Pending 
                                                            @elseif($orders->status == 'D')
                                                            Delivered
                                                            @elseif($orders->status == 'R')
                                                            Return
                                                            @else
                                                            N/A
                                                            @endif
                                                            </button>
                                                        </div>

                                                        <div class="d-flex" style="width:100%;">
                                                            <span class="od_num">Order Id : {{$orders->OrderID}} |
                                                                <span class="item_3"> {{count(json_decode($orders->Items))}} Item’s</span>
                                                            </span>
                                                        </div>

                                                        <div class="d-flex justify-content-between drop_section" style="width:100%;">
                                                            <h6>{{$orders->UserTotalCost}}</h6>
                                                            <div class="d-flex justify-content-between gap-2" style="margin-right:-15px; width:50%;">
                                                                <img src="{{asset('IMAGES\Vector_b.svg')}}">
                                                                <h5 style="border-left:1px solid #EEEEEE; padding:6px  10px; 0 10px;">   Invoice  </h5>
                                                                <img src="{{asset('IMAGES\Group 14_1.svg')}}">
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </h2>
                                            <div id="collapse{{ $key }}" class="accordion-collapse collapse {{ $key === 0 ? ' show' : '' }}"
                                                aria-labelledby="heading{{ $key }}" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <table id="table_section">
                                                        <tbody>
                                                            @foreach(json_decode($orders->Items) as $item)
                                                            <tr class="">
                                                                <td id="Shirt"><img src="{{asset('IMAGES\pizza-1 1.svg')}}"
                                                                        class="gap-2"> {{ $item->name }}</td>
                                                                <td id="wash">{{ $item->type }}</td>
                                                                <td id="num">{{ $item->price }}</td>
                                                            </tr>
                                                            @endforeach
                                                            
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
@endforeach
                                        <!--<div class="accordion-item">-->
                                        <!--    <h2 class="accordion-header">-->
                                        <!--        <div class="accordion-button collapsed" type="button"-->
                                        <!--            data-bs-toggle="collapse" data-bs-target="#collapseTwo"-->
                                        <!--            aria-expanded="false" aria-controls="collapseTwo" >-->

                                        <!--            <div class=" w-100" id="jan_id">-->
                                        <!--                <div class="d-flex justify-content-between "-->
                                        <!--                    style="width:100%;">-->
                                        <!--                    <p class="mb-0">15 JAN 2024, 08:30 AM</p>-->
                                        <!--                    <button>Pending </button>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex" style="width:100%;">-->
                                        <!--                    <span class="od_num">Order Id : 1223344 |-->
                                        <!--                         <span class="item_3">3 Item’s</span>-->
                                        <!--                    </span>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex justify-content-between drop_section" style="width:100%;">-->
                                        <!--                    <h6>250.00</h6>-->
                                        <!--                    <div class="d-flex justify-content-between gap-2" style="margin-right:-15px; width:50%;">-->
                                        <!--                        <img src="IMAGES\Vector_b.svg">-->
                                        <!--                        <h5 style="border-left:1px solid #EEEEEE; padding:6px  10px; 0 10px;">   Invoice  </h5>-->
                                        <!--                        <img src="IMAGES\Group 14_1.svg">-->
                                        <!--                    </div>-->

                                        <!--                </div>-->


                                        <!--            </div>-->
                                        <!--        </div>-->
                                        <!--    </h2>-->
                                        <!--    <div id="collapseTwo" class="accordion-collapse collapse"-->
                                        <!--        data-bs-parent="#accordionExample">-->
                                        <!--        <div class="accordion-body">-->
                                        <!--            <table id="table_section">-->
                                        <!--                <tbody>-->
                                        <!--                    <tr class="">-->
                                        <!--                        <td id="Shirt"><img src="IMAGES\pizza-1 1.svg"-->
                                        <!--                                class="gap-2"> Shirt</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr><br /><br />-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\image-3-600x594-1 2.svg"> Hoodies-->
                                        <!--                        </td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\SPICEY-PANEER 1.svg">Jacket</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                </tbody>-->
                                        <!--            </table>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--</div>-->

                                        <!--<div class="accordion-item">-->
                                        <!--    <h2 class="accordion-header">-->
                                        <!--        <div class="accordion-button collapsed" type="button"-->
                                        <!--            data-bs-toggle="collapse" data-bs-target="#collapseThree"-->
                                        <!--            aria-expanded="false" aria-controls="collapseThree">-->
                                        <!--            <div class=" w-100" id="jan_id">-->
                                        <!--                <div class="d-flex justify-content-between "-->
                                        <!--                    style="width:100%;">-->
                                        <!--                    <p class="mb-0">15 JAN 2024, 08:30 AM</p>-->
                                        <!--                     <button>Pending </button>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex" style="width:100%;">-->
                                        <!--                    <span class="od_num">Order Id : 1223344 |-->
                                        <!--                         <span class="item_3"> 3 Item’s</span>-->
                                        <!--                    </span>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex justify-content-between drop_section" style="width:100%;">-->
                                        <!--                    <h6>250.00</h6>-->
                                        <!--                    <div class="d-flex justify-content-between gap-2" style="margin-right:-15px; width:50%;">-->
                                        <!--                        <img src="IMAGES\Vector_b.svg">-->
                                        <!--                        <h5 style="border-left:1px solid #EEEEEE; padding:6px  10px; 0 10px;">   Invoice  </h5>-->
                                        <!--                        <img src="IMAGES\Group 14_1.svg">-->
                                        <!--                    </div>-->
                                        <!--                </div>-->


                                        <!--            </div>-->
                                        <!--        </div>-->
                                        <!--    </h2>-->
                                        <!--    <div id="collapseThree" class="accordion-collapse collapse"-->
                                        <!--        data-bs-parent="#accordionExample">-->
                                        <!--        <div class="accordion-body">-->
                                        <!--            <table id="table_section">-->
                                        <!--                <tbody>-->
                                        <!--                    <tr class="">-->
                                        <!--                        <td id="Shirt"><img src="IMAGES\pizza-1 1.svg"-->
                                        <!--                                class="gap-2"> Shirt</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr><br /><br />-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\image-3-600x594-1 2.svg"> Hoodies-->
                                        <!--                        </td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\SPICEY-PANEER 1.svg">Jacket</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                </tbody>-->
                                        <!--            </table>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--</div>-->

                                        <!--<div class="accordion-item">-->
                                        <!--    <h2 class="accordion-header">-->
                                        <!--        <div class="accordion-button collapsed" type="button"-->
                                        <!--            data-bs-toggle="collapse" data-bs-target="#collapsefour"-->
                                        <!--            aria-expanded="false" aria-controls="collapsefour">-->
                                        <!--            <div class=" w-100" id="jan_id">-->
                                        <!--                <div class="d-flex justify-content-between "-->
                                        <!--                    style="width:100%;">-->
                                        <!--                    <p class="mb-0">15 JAN 2024, 08:30 AM</p>-->
                                        <!--                    <button class="d_one">Done</button>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex" style="width:100%;">-->
                                        <!--                    <span class="od_num">Order Id : 1223344 |-->
                                        <!--                         <span class="item_3">3 Item’s</span>-->
                                        <!--                    </span>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex justify-content-between drop_section" style="width:100%;">-->
                                        <!--                    <h6>250.00</h6>-->
                                        <!--                    <div class="d-flex justify-content-between gap-2" style="margin-right:-15px; width:50%;">-->
                                        <!--                        <img src="IMAGES\Vector_b.svg">-->
                                        <!--                        <h5 style="border-left:1px solid #EEEEEE; padding:6px  10px; 0 10px;">   Invoice  </h5>-->
                                        <!--                        <img src="IMAGES\Group 14_1.svg">-->
                                        <!--                    </div>-->
                                        <!--                </div>-->


                                        <!--            </div>-->
                                        <!--        </div>-->
                                        <!--    </h2>-->
                                        <!--    <div id="collapsefour" class="accordion-collapse collapse"-->
                                        <!--        data-bs-parent="#accordionExample">-->
                                        <!--        <div class="accordion-body">-->
                                        <!--            <table id="table_section">-->
                                        <!--                <tbody>-->
                                        <!--                    <tr class="">-->
                                        <!--                        <td id="Shirt"><img src="IMAGES\pizza-1 1.svg"-->
                                        <!--                                class="gap-2"> Shirt</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr><br /><br />-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\image-3-600x594-1 2.svg">Hoodies-->
                                        <!--                        </td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\SPICEY-PANEER 1.svg">Jacket</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                </tbody>-->
                                        <!--            </table>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--</div>-->

                                        <!--<div class="accordion-item">-->
                                        <!--    <h2 class="accordion-header">-->
                                        <!--        <div class="accordion-button collapsed" type="button"-->
                                        <!--            data-bs-toggle="collapse" data-bs-target="#collapsefive"-->
                                        <!--            aria-expanded="false" aria-controls="collapsefive">-->
                                        <!--            <div class=" w-100" id="jan_id">-->
                                        <!--                <div class="d-flex justify-content-between "-->
                                        <!--                    style="width:100%;">-->
                                        <!--                    <p class="mb-0">15 JAN 2024, 08:30 AM</p>-->
                                        <!--                    <button class="can_cel">Cancel</button>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex" style="width:100%;">-->
                                        <!--                    <span class="od_num">Order Id : 1223344 |-->
                                        <!--                         <span class="item_3"> 3 Item’s</span>-->
                                        <!--                    </span>-->
                                        <!--                </div>-->

                                        <!--                <div class="d-flex justify-content-between drop_section align-items-center" style="width:100%;">-->
                                        <!--                    <h6>250.00</h6>-->
                                        <!--                    <div class="d-flex justify-content-between gap-2" style="margin-right:-15px; width:50%;">-->
                                        <!--                        <img src="IMAGES\Vector_b.svg">-->
                                        <!--                        <h5 style="border-left:1px solid #EEEEEE; padding:6px  10px; 0 10px;">   Invoice  </h5>-->
                                        <!--                        <img src="IMAGES\Group 14_1.svg">-->
                                        <!--                    </div>-->

                                        <!--                </div>-->
                                        <!--            </div>-->
                                        <!--        </div>-->
                                        <!--    </h2>-->
                                        <!--    <div id="collapsefive" class="accordion-collapse collapse"-->
                                        <!--        data-bs-parent="#accordionExample">-->
                                        <!--        <div class="accordion-body">-->
                                        <!--            <table id="table_section">-->
                                        <!--                <tbody>-->
                                        <!--                    <tr class="">-->
                                        <!--                        <td id="Shirt"><img src="IMAGES\pizza-1 1.svg"-->
                                        <!--                                class="gap-2"> Shirt</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr><br /><br />-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\image-3-600x594-1 2.svg">Hoodies-->
                                        <!--                        </td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                    <tr>-->
                                        <!--                        <td id="Shirt"><img-->
                                        <!--                                src="IMAGES\SPICEY-PANEER 1.svg"> Shirt</td>-->
                                        <!--                        {{-- <td id="Shirt"></td> --}}-->
                                        <!--                        <td id="wash">Wash</td>-->
                                        <!--                        <td id="num">12.00</td>-->
                                        <!--                    </tr>-->
                                        <!--                </tbody>-->
                                        <!--            </table>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--</div>-->

                                    </div>
                                </div>

                            </div>
                            
                            

                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>

</x-app-layout>
