<!DOCTYPE html>
<html lang="en">
  
<head>
    <%- include('./partials/head'); -%>
</head>
<body onload="startTime()">
    <%- include('./partials/header_sidebar'); -%>
    
    <div class="page-body">
      <div class="container-fluid">
        <div class="page-title">
          <div class="row">
            <div class="col-sm-6">
              <h3><%=lan.driver%> <%=lan.profile%></h3>
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                <li class="breadcrumb-item"><%=lan.dashboard%></li>
                <li class="breadcrumb-item active"><%=lan.driver%> <%=lan.profile%></li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <div class="container-fluid">
        <div class="email-wrap bookmark-wrap user-profile">
          <div class="row">
            <div class="col-xxl-3 col-xl-4 box-col-30">
              <div class="md-sidebar email-sidebar"><a class="btn btn-primary md-sidebar-toggle" href="javascript:void(0)"><i class="fa fa-list"></i></a>
                <div class="md-sidebar-aside email-left-aside">
                  <div class="card">
                    <div class="card-body">
                      <div class="email-app-sidebar left-bookmark">
                        <div class="text-center">
                          <div class="flex-shrink-0"><img class=" rounded-circle" src="../../<%=driver.profile_image%>" alt="" style="width: 100px; height: 100px;"></div>
                          <div class="flex-grow-1 mt-2">
                            <h6 class="f-w-600"><a><%=driver.first_name%> <%=driver.last_name%></a></h6>
                            <p><%=driver.email%></p>
                            <div class="d-flex justify-content-center mt-1">
                              <p><%=lan.wallet%> :-&nbsp;<p class="invosymbol"><%=driver.wallet%></p></p> &nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                            <span class="d-flex justify-content-center mt-1">
                              <p class="p-r-20"><%=lan.total%> <%=lan.review%> :-&nbsp;<%=driver.tot_review%></p>
                              <span class="badge badge-secondary f-12"><i class="fa fa-star"></i> <%=driver.avg_star%>/5</span>
                            </span>
                          </div>
                        </div>
                        <ul class="nav main-menu" role="tablist">
                          <li><hr></li>
                          <li><a class="show active" id="profile-tab" data-bs-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="true"><span class="title"><%=lan.profile%></span></a></li>
                          <li id="dpro_publish_ride" data-drid="<%=driver.id%>"><a class="show" id="publish-ride-tab" data-bs-toggle="pill" href="#publish-ride" role="tab" aria-controls="publish-ride" aria-selected="false"><span class="title"><%=lan.publish_ride%></span></a></li>
                          <li id="dpro_my_ride" data-drid="<%=driver.id%>"><a class="show" id="my-ride-tab" data-bs-toggle="pill" href="#my-ride" role="tab" aria-controls="my-ride" aria-selected="false"><span class="title"><%=lan.my_ride%></span></a></li>
                          <li id="dpro_wtransaction" data-drid="<%=driver.id%>"><a class="show" id="wallet-transaction-tab" data-bs-toggle="pill" href="#wallet-transaction" role="tab" aria-controls="wallet-transaction" aria-selected="false"><span class="title"><%=lan.wallet_transaction%></span></a></li>
                          <li><a class="show" id="vehicle-detail-tab" data-bs-toggle="pill" href="#vehicle-detail" role="tab" aria-controls="vehicle-detail" aria-selected="false"><span class="title"><%=lan.vehicle_detail%></span></a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="col-xxl-9 col-xl-8 col-md-12 box-col-8">
              <div class="email-right-aside bookmark-tabcontent">
                <div class="card email-body">
                  <div class="ps-0">
                    <div class="tab-content">
                      <div class="tab-pane fade active show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card mb-0">
                          <div class="card-header d-flex">
                            <h4 class="mb-0"><%=lan.driver_profile%></h4>
                          </div>
                          <div class="card-body ">
                            <div class="details-bookmark text-center">
                              <div class="row" id="bookmarkData">
                                <div class="col-12 mb-4 text-center">
                                  <a target="_blank" href="../../<%=driver.profile_image%>"><img class="me-3" src="../../<%=driver.profile_image%>" alt="" style="width: 160px; height: 160px; border-radius: 10px;"></a>
                                </div>

                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top" >
                                    <h6><%=lan.name%> </h6> <span class="f-w-500"><%=driver.first_name%> <%=driver.last_name%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.email%> </h6> <span class="f-w-500"><%=driver.email%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.primary%> <%=lan.mobile%> <%=lan.number%> </h6> <span class="f-w-500"><%=driver.primary_ccode%> <%=driver.primary_phoneNo%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.secondary%> <%=lan.mobile%> <%=lan.number%> </h6> <span class="f-w-500"><%=driver.secound_ccode%> <%=driver.secound_phoneNo%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.nationality%> </h6> <span class="f-w-500"><%=driver.nationality%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.date_of_birth%> </h6> <span class="f-w-500"><%=driver.date_of_birth%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.complete%> <%=lan.address%> </h6> <span class="f-w-500"><%=driver.com_address%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.zone%> </h6> <span class="f-w-500"><%=driver.zone_name%></span>
                                </div>
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top">
                                    <h6><%=lan.languages_you_know%> </h6> <span class="f-w-500"><%=driver.language%></span>
                                </div>
                                
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="fade tab-pane" id="publish-ride" role="tabpanel" aria-labelledby="publish-ride-tab">
                        <div class="card mb-0">
                          <div class="card-header d-flex">
                            <h4 class="mb-0"><%=lan.publish_ride%></h4>
                          </div>
                          <div class="card-body">
                            <div class="details-bookmark text-center dri_publish_ride">
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="fade tab-pane" id="my-ride" role="tabpanel" aria-labelledby="my-ride-tab">
                        <div class="card mb-0">
                          <div class="card-header d-flex">
                            <h4 class="mb-0"><%=lan.my_ride%></h4>
                          </div>
                          <div class="card-body">
                            <div class="details-bookmark text-center dri_my_ride">
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="fade tab-pane" id="wallet-transaction" role="tabpanel" aria-labelledby="wallet-transaction-tab">
                        <div class="card mb-0">
                          <div class="card-header d-flex">
                            <h4 class="mb-0"><%=lan.wallet_transaction%></h4>
                          </div>
                          <div class="card-body">
                            <div class="details-bookmark text-center dri_wtransaction_list">
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="fade tab-pane" id="vehicle-detail" role="tabpanel" aria-labelledby="vehicle-detail-tab">
                        <div class="card mb-0">
                          <div class="card-header d-flex">
                            <h4 class="mb-0"><%=lan.vehicle_detail%></h4>
                          </div>
                          <div class="card-body">
                            <div class="details-bookmark text-center">
                              <div class="row" id="bookmarkData">
                                <div class="col-12 mb-4 text-center">
                                  <a target="_blank" href="../../<%=driver.vehicle_image%>"><img class="me-3" src="../../<%=driver.vehicle_image%>" alt="" style="width: 160px; height: 160px; border-radius: 10px;"></a>
                                </div>

                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top" >
                                  <h6><%=lan.vehicle%> <%=lan.name%></h6> <span class="f-w-500"><%=driver.vehicle_name%></span>
                                </div>

                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top" >
                                  <h6><%=lan.vehicle%> <%=lan.registration%> <%=lan.number%> </h6> <span class="f-w-500"><%=driver.vehicle_number%></span>
                                </div>

                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 py-3 border-top" >
                                  <h6><%=lan.car%> <%=lan.color%> </h6> <span class="f-w-500"><%=driver.car_color%></span>
                                </div>

                                <div class="col-xxl-6 col-xl-4 col-lg-6 col-md-6 col-sm-12 py-3 border-top" >
                                  <h6><%=lan.passenger%> <%=lan.capacity%> </h6> <span class="f-w-500"><%=driver.passenger_capacity%></span>
                                </div>

                                <div class="col-xxl-6 col-xl-4 col-lg-6 col-md-6 col-sm-12 py-3 border-top" >
                                  <h6><%=lan.vehicle%> <%=lan.preference%> </h6> <span class="f-w-500"><%=driver.veh_pref_name%></span>
                                </div>

                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Container-fluid Ends-->
    </div>

<%- include('./partials/footer'); -%>
<%- include('./partials/script'); -%>
</body>
</html>
