@extends('restaurant.layout.index')
@section('title','Muftaax | Driver Detail')
@section('custom-style')
    <style>

    </style>
@endsection
@section('content')

         <!-- Start::app-content -->
        <div class="main-content app-content">
            <div class="container-fluid">

                <!-- Page Header -->
                <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div>
                        <h1 class="page-title fw-medium fs-18 mb-2">Driver Detail</h1>
                        <div class="">
                            <nav>
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Driver Detail</li>
                                </ol>
                            </nav>
                        </div>
                    </div>

                </div>
                <!-- Page Header Close -->

                <!-- Start:: row-1 -->
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="row align-items-top gap-5 p-2 border-bottom-0">
                                    <div class="col-sm-6">
                                        <div class="d-flex align-items-center gap-2 mb-4">
                                            <div class="lh-1">
                                                <span class="avatar avatar-xxl avatar-rounded online me-3">
                                                    <img src="{{asset('assets/images/faces/9.jpg')}}" alt="">
                                                </span>
                                            </div>
                                            <div class="flex-fill main-profile-info">
                                                <div class="d-flex align-items-center justify-content-between mb-1">
                                                    <h6 class="fw-medium mb-1">Toni Stark</h6>
                                                </div>

                                                <p class="fs-12 mb-0 op-5">
                                                    <span class="me-3"><i class="bi bi-person me-1 align-middle"></i>Member since  March, 2024</span>

                                                </p>
                                            </div>
                                        </div>
                                        <div class="d-sm-flex justify-content-center mb-0">
                                            <div class="me-sm-3 mb-2 border p-3 border-dashed rounded">
                                                <p class="fw-bold fs-20 text-shadow mb-0">4</p>
                                                <p class="mb-0 fs-11 op-5">Years</p>
                                            </div>
                                            <div class="me-sm-3 mb-2 border p-3 border-dashed rounded">
                                                <p class="fw-bold fs-20 text-shadow mb-0">122</p>
                                                <p class="mb-0 fs-11 op-5">Orders</p>
                                            </div>
                                            <div class="me-sm-3 mb-2 border p-3 border-dashed rounded">
                                                <p class="fw-bold fs-20 text-shadow mb-0">4.9</p>
                                                <p class="mb-0 fs-11 op-5">Rating</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 professional-bio">
                                        <div>
											<p class="fs-15 mb-3 me-4 fw-medium">Contact Information :</p>
											<div class="text-muted">
												<p class="mb-4">
													<span class="avatar avatar-sm avatar-rounded me-2 bg-light border text-muted">
														<i class="ri-mail-line align-middle fs-14"></i>
													</span>
													tonistark2531@gmail.com
												</p>
												<p class="mb-4">
													<span class="avatar avatar-sm avatar-rounded me-2 bg-light border text-muted">
														<i class="ri-phone-line align-middle fs-14"></i>
													</span>
													+(555) 555-1234
												</p>

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


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End:: row-1 -->

                <!-- Start::row-2 -->
                <div class="row">

                    <div class="col-xxl-12 col-xl-12">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card custom-card">
                                    <div class="card-body p-0">
                                        <div class="p-3 border-bottom border-block-end-dashed d-flex align-items-center justify-content-between">
                                            <div>
                                                <ul class="nav nav-tabs mb-0 tab-style-6 justify-content-start" id="myTab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link" id="Second-tab" data-bs-toggle="tab"
                                                                data-bs-target="#second-tab-pane" type="button" role="tab"
                                                                aria-controls="second-tab-pane" aria-selected="false"><i
                                                                class="ri-list-ordered me-1 align-middle d-inline-block"></i>Orders</button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link active" id="activity-tab" data-bs-toggle="tab"
                                                                data-bs-target="#activity-tab-pane" type="button" role="tab"
                                                                aria-controls="activity-tab-pane" aria-selected="false"><i
                                                                class="ri-gift-line me-1 align-middle d-inline-block"></i>Reviews</button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link" id="earnings-tab" data-bs-toggle="tab"
                                                                data-bs-target="#earnings-tab-pane" type="button" role="tab"
                                                                aria-controls="earnings-tab-pane" aria-selected="false">
                                                            <i class="ri-money-dollar-box-line me-1 align-middle d-inline-block"></i>Earnings
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div>
                                                <p class="fw-medium mb-2">Completed Drives </p>
                                                <div class="progress progress-xs progress-animate">
                                                    <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-3">
                                            <div class="tab-content" id="myTabContent">
                                                <div class="tab-pane p-0 border-0" id="second-tab-pane"
                                                     role="tabpanel" aria-labelledby="second-tab" tabindex="0">
                                                    <div class="row align-items-center mb-4">
                                                        <div class="col-lg-12">
                                                            <div class="card custom-card mb-0">
                                                                <div class="card-header justify-content-between">
                                                                    <div class="card-title">
                                                                        Apply Filters
                                                                    </div>
                                                                </div>

                                                                <div class="card-body">
                                                                    <div class="input-group companies-search-input w-20-block">
                                                                        <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                                                                        <input type="date" class="form-control w-20-block d-none"
                                                                               aria-label="Text input with segmented dropdown button" placeholder="Apply date">
{{--                                                                        <select class="form-select rounded-0 " data-trigger name="choices-single-default"--}}
{{--                                                                                id="choices-single-default">--}}
{{--                                                                            <option value="">Payment Status</option>--}}
{{--                                                                            <option value="Choice 1">Paid</option>--}}
{{--                                                                            <option value="Choice 2">Pending</option>--}}
{{--                                                                            <option value="Choice 3">Cash</option>--}}
{{--                                                                            <option value="Choice 3">Withdraw</option>--}}
{{--                                                                        </select>--}}
{{--                                                                        <select class="form-select rounded-0 " data-trigger name="choices-single-default"--}}
{{--                                                                                id="choices-single-default">--}}
{{--                                                                            <option value="">Status</option>--}}
{{--                                                                            <option value="Choice 1">Pending</option>--}}
{{--                                                                            <option value="Choice 2">Completed</option>--}}
{{--                                                                            <option value="Choice 3">Canceled</option>--}}
{{--                                                                        </select>--}}
                                                                        <button type="button" class="btn btn-primary"><i class="ri-search-line"></i></button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="card custom-card">
                                                        <div class="card-header justify-content-between">
                                                            <div class="card-title">
                                                                Driver Orders
                                                            </div>
                                                            <div class="d-flex">

                                                                <div class="dropdown ms-2 d-none">
                                                                    <button class="btn btn-icon btn-secondary-light btn-sm btn-wave waves-light"
                                                                            type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                                        <i class="ti ti-dots-vertical"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li><a class="dropdown-item" href="javascript:void(0);">All</a></li>
                                                                        <li><a class="dropdown-item" href="javascript:void(0);">Pending</a></li>
                                                                        <li><a class="dropdown-item" href="javascript:void(0);">Ongoing</a></li>
                                                                        <li><a class="dropdown-item" href="javascript:void(0);">Completed</a></li>

                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="card-body p-0">
                                                            <div class="table-responsive">
                                                                <table class="table text-nowrap">
                                                                    <thead>
                                                                    <tr>
                                                                        <th scope="col">Customers</th>
                                                                        <th scope="col">Details</th>
                                                                        <th scope="col">Other</th>
                                                                        <th scope="col">Address</th>
                                                                        <th scope="col">Date</th>
                                                                        <th scope="col">Status</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr class="invoice-list">
                                                                        <td>
                                                                            John Wick
                                                                        </td>

                                                                        <td>
                                                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal"
                                                                               href="#invoiceDetail">2 Zinger Burgers<br>
                                                                                1 Chicken Bucket</a>
                                                                        </td>
                                                                        <td>
                                                                            Add some crisp
                                                                        </td>
                                                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                                                        <td>
                                                                            07/25/2024 10:00 am
                                                                        </td>
                                                                        <td>
                                                                            <span class="badge bg-success-transparent">Completed</span>
                                                                        </td>

                                                                    </tr>
                                                                    <tr class="invoice-list">
                                                                        <td>
                                                                            Marshall Banit
                                                                        </td>

                                                                        <td>
                                                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal"
                                                                               href="#invoiceDetail">2 Zinger Burgers<br>
                                                                                1 Chicken Bucket</a>
                                                                        </td>
                                                                        <td>
                                                                            Add some crisp
                                                                        </td>
                                                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                                                        <td>
                                                                            07/25/2024 10:00 am
                                                                        </td>
                                                                        <td>
                                                                            <span class="badge bg-danger-transparent">Pending</span>
                                                                        </td>

                                                                    </tr>
                                                                    <tr class="invoice-list">
                                                                        <td>
                                                                            Samul jason
                                                                        </td>

                                                                        <td>
                                                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal"
                                                                               href="#invoiceDetail">2 Zinger Burgers<br>
                                                                                1 Chicken Bucket</a>
                                                                        </td>
                                                                        <td>
                                                                            Add some crisp
                                                                        </td>
                                                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                                                        <td>
                                                                            07/25/2024 10:00 am
                                                                        </td>
                                                                        <td>
                                                                            <span class="badge bg-warning-transparent">Ongoing</span>
                                                                        </td>

                                                                    </tr>
                                                                    <tr class="invoice-list">
                                                                        <td>
                                                                            Liza wirk
                                                                        </td>

                                                                        <td>
                                                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal"
                                                                               href="#invoiceDetail">2 Zinger Burgers<br>
                                                                                1 Chicken Bucket</a>
                                                                        </td>
                                                                        <td>
                                                                            Add some crisp
                                                                        </td>
                                                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                                                        <td>
                                                                            07/25/2024 10:00 am
                                                                        </td>
                                                                        <td>
                                                                            <span class="badge bg-success-transparent">Completed</span>
                                                                        </td>

                                                                    </tr>
                                                                    <tr class="invoice-list">
                                                                        <td>
                                                                            Anal wirk
                                                                        </td>

                                                                        <td>
                                                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal"
                                                                               href="#invoiceDetail">2 Zinger Burgers<br>
                                                                                1 Chicken Bucket</a>
                                                                        </td>
                                                                        <td>
                                                                            Add some crisp
                                                                        </td>
                                                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                                                        <td>
                                                                            07/25/2024 10:00 am
                                                                        </td>
                                                                        <td>
                                                                            <span class="badge bg-danger-transparent">Pending</span>
                                                                        </td>

                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="card-footer border-top-0">
                                                            <nav aria-label="Page navigation">
                                                                <ul class="pagination mb-0 float-end">
                                                                    <li class="page-item disabled">
                                                                        <a class="page-link">Previous</a>
                                                                    </li>
                                                                    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                                                                    <li class="page-item active" aria-current="page">
                                                                        <a class="page-link" href="javascript:void(0);">2</a>
                                                                    </li>
                                                                    <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
                                                                    <li class="page-item">
                                                                        <a class="page-link" href="javascript:void(0);">Next</a>
                                                                    </li>
                                                                </ul>
                                                            </nav>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane active show p-0 border-0" id="activity-tab-pane"
                                                    role="tabpanel" aria-labelledby="activity-tab" tabindex="0">
                                                    <div class="card custom-card">
													  <div class="card-body d-flex align-items-center flex-wrap">
														<div class="flex-fill"> <span class="mb-0 fs-14 text-muted">Total number of reviews created till now : <span class="fw-medium text-success">3</span></span> </div>
														<div class="dropdown">
														  <button class="btn btn-light dropdown-toggle m-1" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Sort By </button>
														  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
															<li><a class="dropdown-item" href="javascript:void(0);">ID</a></li>
															<li><a class="dropdown-item" href="javascript:void(0);">Status</a></li>

														  </ul>
														</div>
														<div class="d-flex align-items-center m-1" role="search">
														  <input class="form-control" type="search" placeholder="Search" aria-label="Search">
														  <button class="btn btn-light ms-2" type="submit">Search</button>
														</div>
													  </div>
													</div>

													<div class="card-body">
															<ul class="list-unstyled reviews-list">
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/15.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">James</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">CEO OF NORJA</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-half-fill"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>12 days ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>James</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/4.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Sophia</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">MANAGER CHO</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-half-fill"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>7 days ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Sophia</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/2.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Charlotte</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">CEO OF EMPIRO</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-line"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>2 days ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Charlotte</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/10.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Benjamin</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">CHIEF SECRETARY MBIO</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-half-fill"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>16 hrs ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Benjamin</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/12.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Richard</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">CEO ARMEDILLO</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-line"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>22 days ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Richard</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/3.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Isabella</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">AGGENT AMIO</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-half-fill"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>26 days ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Isabella</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/16.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Joseph</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">CEO MR BRAND</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>1 month ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Joseph</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/5.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Scarlett</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">CEO AIBMO</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-half-fill"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>1 month ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Scarlett</i></span>
																			</div>
																		</div>
																	</div>
																</li>
																<li>
																	<div class="p-3 border rounded">
																		<div class="d-sm-flex align-items-center mb-4">
																			<span class="avatar avatar-md avatar-rounded me-3">
																				<img src="{{asset('assets/images/faces/7.jpg')}}" alt="">
																			</span>
																			<div class="flex-fill">
																				<p class="mb-0 fw-medium fs-14 text-primary">Harper</p>
																				<p class="mb-0 fs-10 fw-medium text-muted">CHIEF SECRETARY BHOL</p>
																			</div>
																			<div class="d-flex align-items-center">
																				<span class="text-muted">Rating : </span>
																				<span class="text-warning d-block ms-1">
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																					<i class="ri-star-fill"></i>
																				</span>
																			</div>
																		</div>
																		<div class="d-sm-flex align-items-end justify-content-between gap-5">
																			<p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, facilis temporibus repellat laudantium dolor impedit alias sed, nobis esse saepe labore corporis aliquam natus beatae, numquam blanditiis in excepturi iste.similique impedit id ullam dolore ipsum mollitia sit.</p>
																			<div class="fs-12 fw-medium text-muted text-end w-25">
																				<span>2 month ago</span>
																				<span class="d-block fw-normal fs-12 text-success"><i>Harper</i></span>
																			</div>
																		</div>
																	</div>
																</li>
															</ul>
														</div>

													<div class="card-footer border-top-0">
														<nav aria-label="Page navigation">
															<ul class="pagination float-end">
																<li class="page-item disabled">
																	<a class="page-link">Previous</a>
																</li>
																<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
																<li class="page-item active" aria-current="page">
																	<a class="page-link" href="javascript:void(0);">2</a>
																</li>
																<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
																<li class="page-item">
																	<a class="page-link" href="javascript:void(0);">Next</a>
																</li>
															</ul>
														</nav>
													</div>
                                                </div>
                                                <div class="tab-pane p-0 border-0" id="earnings-tab-pane" role="tabpanel"
                                                     aria-labelledby="earnings-tab" tabindex="0">
                                                    <div class="card custom-card p-3">
                                                        <div class="row gy-3">
                                                            <div class="col-xl-3 pe-xl-0">
                                                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                                                    <div class="svg-icon-background bg-primary-transparent mb-3 svg-primary mx-auto">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24">
                                                                            <path
                                                                                d="M13,16H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2ZM9,10h2a1,1,0,0,0,0-2H9a1,1,0,0,0,0,2Zm12,2H18V3a1,1,0,0,0-.5-.87,1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM5,20a1,1,0,0,1-1-1V4.73L6,5.87a1.08,1.08,0,0,0,1,0l3-1.72,3,1.72a1.08,1.08,0,0,0,1,0l2-1.14V19a3,3,0,0,0,.18,1Zm15-1a1,1,0,0,1-2,0V14h2Zm-7-7H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"></path>
                                                                        </svg>
                                                                    </div>
                                                                    <div class="flex-fill">
                                                                        <h6 class="mb-2 fs-12">Total Payments</h6>
                                                                        <div class="pb-0 mt-0">
                                                                            <div>
                                                                                <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                                                    <span class="count-up" data-count="192">193</span></h4>
                                                                                <p class="text-muted fs-11 mb-0 lh-1">
											<span class="text-success me-1 fw-medium">
												<i class="ri-arrow-up-s-line me-1 align-middle"></i>3.25%
											</span>
                                                                                    <span>this month</span>
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-3">
                                                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                                                    <div class="svg-icon-background bg-success-transparent mb-3 svg-success mx-auto">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                                                            <path
                                                                                d="M11.5,20h-6a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h5V7a3,3,0,0,0,3,3h3v5a1,1,0,0,0,2,0V9s0,0,0-.06a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.29.29,0,0,0-.1,0A1.1,1.1,0,0,0,11.56,2H5.5a3,3,0,0,0-3,3V19a3,3,0,0,0,3,3h6a1,1,0,0,0,0-2Zm1-14.59L15.09,8H13.5a1,1,0,0,1-1-1ZM7.5,14h6a1,1,0,0,0,0-2h-6a1,1,0,0,0,0,2Zm4,2h-4a1,1,0,0,0,0,2h4a1,1,0,0,0,0-2Zm-4-6h1a1,1,0,0,0,0-2h-1a1,1,0,0,0,0,2Zm13.71,6.29a1,1,0,0,0-1.42,0l-3.29,3.3-1.29-1.3a1,1,0,0,0-1.42,1.42l2,2a1,1,0,0,0,1.42,0l4-4A1,1,0,0,0,21.21,16.29Z"></path>
                                                                        </svg>
                                                                    </div>
                                                                    <div class="flex-fill">
                                                                        <h6 class="mb-2 fs-12">Total Withdraw</h6>
                                                                        <div>
                                                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                                                <span class="count-up" data-count="68.83">68</span></h4>
                                                                            <p class="text-muted fs-11 mb-0 lh-1">
										<span class="text-danger me-1 fw-medium">
											<i class="ri-arrow-down-s-line me-1 align-middle"></i>1.16%
										</span>
                                                                                <span>this month</span>
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-3 pe-xl-0">
                                                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                                                    <div class="svg-icon-background bg-warning-transparent mb-3 svg-warning mx-auto">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                                                             viewBox="0 0 24 24">
                                                                            <path
                                                                                d="M19,12h-7V5c0-0.6-0.4-1-1-1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9C20,12.4,19.6,12,19,12z M12,19.9c-3.8,0.6-7.4-2.1-7.9-5.9C3.5,10.2,6.2,6.6,10,6.1V13c0,0.6,0.4,1,1,1h6.9C17.5,17.1,15.1,19.5,12,19.9z M15,2c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C22,5.1,18.9,2,15,2z M16,8V4.1C18,4.5,19.5,6,19.9,8H16z"></path>
                                                                        </svg>
                                                                    </div>
                                                                    <div class="flex-fill">
                                                                        <h6 class="mb-2 fs-12">To be Paid</h6>
                                                                        <div>
                                                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                                                <span class="count-up" data-count="81.57">81</span></h4>
                                                                            <p class="text-muted fs-11 mb-0 lh-1">
										<span class="text-success me-1 fw-medium">
											<i class="ri-arrow-up-s-line me-1 align-middle"></i>0.25%
										</span>
                                                                                <span>this month</span>
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-3">
                                                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                                                    <div class="svg-icon-background bg-light mb-3 svg-dark mx-auto">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                                                             viewBox="0 0 24 24">
                                                                            <path
                                                                                d="M19,12h-7V5c0-0.6-0.4-1-1-1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9C20,12.4,19.6,12,19,12z M12,19.9c-3.8,0.6-7.4-2.1-7.9-5.9C3.5,10.2,6.2,6.6,10,6.1V13c0,0.6,0.4,1,1,1h6.9C17.5,17.1,15.1,19.5,12,19.9z M15,2c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C22,5.1,18.9,2,15,2z M16,8V4.1C18,4.5,19.5,6,19.9,8H16z"></path>
                                                                        </svg>
                                                                    </div>
                                                                    <div class="flex-fill">
                                                                        <h6 class="mb-2 fs-12">Total Commissions

                                                                        </h6>
                                                                        <div>
                                                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                                                <span class="count-up" data-count="32.47">33</span></h4>
                                                                            <p class="text-muted fs-11 mb-0 lh-1">
										<span class="text-success me-1 fw-semibFold">
											<i class="ri-arrow-down-s-line me-1 align-middle"></i>0.46%
										</span>
                                                                                <span>this month</span>
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card custom-card overflow-hidden">
                                                        <div class="card-header justify-content-between">
                                                            <div class="card-title">Driver Earnings</div>
                                                            <div class="dropdown">
                                                                <a href="javascript:void(0);" class="btn btn-primary-light" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    Sort By <i class="ri-arrow-down-s-line align-middle ms-1 d-inline-block"></i>
                                                                </a>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li><a class="dropdown-item" href="javascript:void(0);">This Week</a></li>
                                                                    <li><a class="dropdown-item" href="javascript:void(0);">Last Week</a></li>
                                                                    <li><a class="dropdown-item" href="javascript:void(0);">This Month</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="card-body p-0">
                                                            <div class="table-responsive">
                                                                <table class="table text-nowrap">
                                                                    <thead>
                                                                    <tr>
                                                                        <th>Date</th>
                                                                        <th>Total Drives</th>
                                                                        <th>Total Distance</th>
                                                                        <th>Earnings</th>
                                                                        <th>Tips</th>
                                                                        <th>Deductions</th>
                                                                        <th>Net Earnings</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td>2024-10-07</td>
                                                                        <td>12</td>
                                                                        <td>45 km</td>
                                                                        <td>$120.00</td>
                                                                        <td>$10.00</td>
                                                                        <td>$5.00</td>
                                                                        <td>$125.00</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>2024-10-06</td>
                                                                        <td>9</td>
                                                                        <td>32 km</td>
                                                                        <td>$95.00</td>
                                                                        <td>$8.00</td>
                                                                        <td>$3.00</td>
                                                                        <td>$100.00</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>2024-10-07</td>
                                                                        <td>12</td>
                                                                        <td>45 km</td>
                                                                        <td>$120.00</td>
                                                                        <td>$10.00</td>
                                                                        <td>$5.00</td>
                                                                        <td>$125.00</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>2024-10-06</td>
                                                                        <td>9</td>
                                                                        <td>32 km</td>
                                                                        <td>$95.00</td>
                                                                        <td>$8.00</td>
                                                                        <td>$3.00</td>
                                                                        <td>$100.00</td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End::row-2 -->

            </div>
        </div>
        <!-- End::app-content -->

@endsection
@section('custom-script')

<script>
	document.getElementsByTagName('alert-confirm').onclick = function () {
		Swal.fire({
			title: 'Are you sure?',
			text: "You won't be able to revert this!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.isConfirmed) {
				Swal.fire(
					'Deleted!',
					'Your file has been deleted.',
					'success'
				)
			}
		})
	}
</script>

@endsection