<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->


<html lang="en" data-ng-app="AppBooking">
<!--<![endif]-->
<!-- BEGIN HEAD -->


<!-- Mirrored from web.arttech.ps/rocab/Site/Pages/AppBooking.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 27 Nov 2025 16:24:25 GMT -->
<head>
    <meta charset="UTF-8" />
    <title>Taxi Management System </title>
    <link rel="icon" href="assets/img/main_logo.png">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

    <link rel="stylesheet" href="../../assets/css/mainbar.css" />

    <link rel="stylesheet" href="../../assets/plugins/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="../../assets/css/main.css" />
    <link rel="stylesheet" href="../../assets/css/mainbar.css" />
    <link rel="stylesheet" href="../../assets/css/appbooking.css" />

    <link rel="stylesheet" href="../../assets/plugins/Font-Awesome-master/css/font-awesome.css" />

    <link rel="stylesheet" href="../../assets/font.css" />
    <link rel="stylesheet" href="../../assets/css/MoneAdmin.css" />
    <link rel="stylesheet" href="../../assets/plugins/Font-Awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="../../assets/plugins/Font-Awesome/css/font-awesome.min.css" />
    <!--END GLOBAL STYLES -->
    <link rel="stylesheet" href="../../assets/css/horizontalmenubar.css" />
    <!-- PAGE LEVEL STYLES -->

    <link rel="stylesheet" href="../../assets/css/managementstyle.css" />

    <script type="text/javascript" src="../../bower_components/angular/angular.js"></script>
    <!--ng-storage-->
    <script type="text/javascript" src="../../bower_components/ngstorage/ngStorage.js"></script>
    <!--ngDialog-->
    <link rel="stylesheet" href="../../bower_components/modaldialog/css/ngDialog.css">
    <link rel="stylesheet" href="../../bower_components/modaldialog/css/ngDialog-theme-default.css">
    <link rel="stylesheet" href="../../bower_components/modaldialog/css/ngDialog-theme-plain.css">
    <script src="../../bower_components/modaldialog/js/ngDialog.js"></script>
    <!--Loading Spinner-->
    <script type="text/javascript" src="../../bower_components/loading-Spinner/spin.js"></script>
    <script type="text/javascript" src="../../bower_components/loading-Spinner/angular-spinner.js"></script>
    <!-- Application Configuration-->
    <script type="text/javascript" src="../../Controller/AppConfig.js"></script>
    <link rel="stylesheet" href="../../assets/js/ol/ol.css" />

    <script type="text/javascript" src="../../assets/js/ol/ol.js"></script>
    <script type="text/javascript" src="../Controller/Menu.js"></script>

    <script type="text/javascript" src="../Controller/AppBooking.js"></script>
    <script type="text/javascript" src="../../Controller/LoginStatus.js"></script>

    <!--Pagination-->
    <script type="text/javascript" src="../../bower_components/dirPagination/dirPagination.js"></script>
    <!--Validation-->
    <script type="text/javascript" src="../../Validation/SAValidation.js"></script>
    <!--Popup-->
    <script src="../../bower_components/Popup/ui-bootstrap-tpls-0.12.0.js"></script>
    <!--Utility.js-->
    <!--<script type="text/javascript" src="Controller/Utility.js"></script>-->

    <script src="../../../../cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.js"></script>

    <style>
        .hidden {
            visibility: hidden;
        }

        .showTotalDetails, .showTotalKmsDetails {
            width: 200px;
            position: absolute;
            background: #fff;
            top: 30px;
            z-index: 999;
            height: 120px;
            border-radius: 5px;
            border: 1px solid #ccc;
            padding: 5px;
            -moz-box-shadow: 3px 3px 1px 0px rgba(143,143,143,1);
            box-shadow: 3px 3px 1px 0px rgba(143,143,143,1);
            -webkit-box-shadow: 1px 1px 1px 0px rgba(143,143,143,1);
            -moz-box-shadow: 1px 1px 1px 0px rgba(143,143,143,1);
            box-shadow: 1px 1px 1px 0px rgba(143,143,143,1);
        }

        .showTotalKmsDetails {
            height: 60px;
        }

        .showBookingDetails {
            position: absolute;
            background: #fff !important;
            z-index: 999;
            right: 60px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background: #fff;
            -moz-box-shadow: 3px 3px 1px 0px rgba(143,143,143,1);
            box-shadow: 3px 3px 1px 0px rgba(143,143,143,1);
            -webkit-box-shadow: 1px 1px 1px 0px rgba(143,143,143,1);
            -moz-box-shadow: 1px 1px 1px 0px rgba(143,143,143,1);
            box-shadow: 1px 1px 1px 0px rgba(143,143,143,1);
        }

        .TDValue {
            float: left;
            margin-left: 12px;
        }
    </style>


</head>
<body data-ng-controller="AppBookingCtrl">
    <div>
        <div ng-show="loading" style="margin: 0px; padding: 0px; position: absolute; right: 0px;  width: 100%; height: 100%; background-color: rgba(21, 20, 20, 0.51); z-index: 30001; opacity: 0.8;">
            <img src="images/loading.gif" style="right: 50%;position: absolute;top: 50%;" />
        </div>



        <div id="top">
            <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation">
                <div class="row header-border">
                  
                    <div class="col-md-2 logo-ara">
                        <div class="animbrand">
                            <a href="DashBoard.html"><img class="logo" src="assets/img/qaf-logo-icon.png"></a>
                        </div>
                    </div>
                    <a href="UserMessages.html" class="btn btn-info btn-sm btn-flat btn-rect" style="float:left;height:32px;margin-left:19px;">  <span> رسائل الزبائن </span></a>


                </div><!-- /header-border -->
            </nav>
        </div>


        <div class="col-lg-12  bhoechie-tab" style="background: white;padding:0;    padding-top: 16px;">
            <!--Company List-->
            <div class="row" style="height:auto;    padding-right: 15px;margin-bottom: 5px;">
                <div class=" firstSearch " style="width: 13%;">
                    <div class="SerachBox input-group input-group-unstyled">
                        <input type="text" class="form-control" style=" float:left;" ng-model="search" id="Text3" aria-controls="example" placeholder="{{somePlaceholder}}" maxlength="20" />
                        <span class="input-group-addon">
                            <i class="icon-search icon-1x"></i>
                        </span>
                    </div>
                </div>
                <div class="dateFilter" style="">
                    <div class=" inline Filter_Div">
                        <span>التاريخ</span>
                        <div class="datePicker" style="padding: 0;">
                            <input type="date" ng-change="handler(event)" ng-model="fdate" id="fdate" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="Status" style="float:right; padding:0px; width: 10%;">
                    <div class=" inline Filter_Div thirdSearch">
                        <div class="statusSelect" style="padding: 0;">
                            <select class="form-control chzn-select" data-ng-model="selectedStatus" style="cursor: pointer;" data-ng-change="selectStatus(selectedStatus)">
                                <option value="">الحالة (الكل)</option>
                                <option value="B">قيد التنفيذ</option>
                                <option value="A">باتجاه الزبون</option>
                                <option value="E">مكتمل</option>
                                <option value="C">ملغي</option>
                                <option value="R">مرفوض</option>
                            </select>
                        </div>
                    </div>
                </div>

             

                <div style="float:right; padding:0px;    width: 10%;">
                    <div class=" inline Filter_Div thirdSearch">
                        <div class="statusSelect" padding 0;">
                            <select class="form-control chzn-select" data-ng-model="selectedType" style="cursor: pointer;" data-ng-change="selectType(selectedType)">
                                <option value="0" selected>النوع (الكل)</option>
                                <option value="1">تكسي</option>
                                <option value="2">ديليفري</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 tele" style="float:right; padding:0px;    width: 10%;">
                    <select class="form-control chzn-select" data-ng-model="DistrictListModel" id="txtCity" style="width: 80%;cursor: pointer;"
                            data-ng-options="u.OID as u.DistrictName for u in DistrictList"
                            ng-change="SelectedDistrict(DistrictListModel)">
                        <option value="0" selected> المحافظة (الكل) </option>
                    </select>
                </div>
                <div class="col-md-2 total" style="width:170px;margin: 0;    padding: 0;padding-top:5px">
                    <input type="checkbox" ng-model="countchecked">
                    <span style=" margin-right:10px; margin-bottom 5px;">اجمالي عدد الطلبات</span>
                    <div class="check-element funky-show-hide TotalTable" ng-show="countchecked" style=" margin-right:10px; margin-bottom 5px;">
                        {{calculateCount(filteredList)}}
                    </div>
                </div>
                <div class="col-md-2 total" style="width: 150px;margin: 0;padding: 0;padding-top:5px">
                    <input type="checkbox" ng-model="checkedTotal" aria-label="Toggle ngShow"><span style=" margin-right:10px; margin-bottom 5px;">المبلغ الكلي</span>
                    <div class="check-element funky-show-hide TotalTable" id="TotalAmount" ng-show="checkedTotal" style=" margin-right:10px; margin-bottom 5px; cursor:pointer">
                        {{calculateTotalAmount(filteredList)}}

                    </div>

                    <div class="showTotalDetails hidden">
                        <div class="col-md-12" style="padding:5px">
                            <span class="TDlabel"> المبلغ </span>
                            <span class="TDValue"> {{calculateAmount(filteredList)}}</span>
                        </div>
                        <div class="col-md-12" style="padding:5px">
                            <span class="TDlabel"> الخصم </span>
                            <span class="TDValue">  {{calculateTotalDiscount(filteredList)}} </span>
                        </div>
                        <div class="col-md-12" style="padding:5px">
                            <span class="TDlabel"> تعويض المسافة </span>
                            <span class="TDValue">  {{calculateTotalDistanceCom(filteredList)}} </span>
                        </div>
                        <div class="col-md-12" style="padding:5px">
                            <span class="TDlabel"> تعويض الالغاء </span>
                            <span class="TDValue">  {{calculateTotalCancelCom(filteredList)}} </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 total" style="width:100px;    margin: 0;    padding: 0;padding-top:5px">
                    <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><span style=" margin-right:10px; margin-bottom 5px;">المسافة</span>
                    <div class="check-element funky-show-hide TotalTable" id="TotalKms" ng-show="checked" style=" margin-right:10px; margin-bottom 5px;">
                        {{calculateKms(filteredList)}}
                    </div>


                    <div class="showTotalKmsDetails hidden">
                        <div class="col-md-12" style="padding:5px">
                            <span class="TDlabel"> المسافة قبل </span>
                            <span class="TDValue">   {{calculateKmsBefore(filteredList)}}</span>
                        </div>
                        <div class="col-md-12" style="padding:5px">
                            <span class="TDlabel"> مسافة الطلبات </span>
                            <span class="TDValue">
                                {{calculateAppKms(filteredList)}}
                            </span>
                        </div>

                    </div>
                </div>
                <div class="col-md-2 " style="width:140px;padding-top:5px">
                    <input type="checkbox" ng-model="IsReviwsChecked" ng-change="ShowReviews(IsReviwsChecked)" aria-label="Toggle ngShow"><span style=" margin-right:10px; margin-bottom 5px;">   التعليقات </span>
                </div>
            </div>

            <!--Driver List-->
            <div class="col-lg-12 col-md-12 col-sm-12 List" style="display:block">
                <div class="table-responsive">
                    <div class="rocab_table" id="table1">

                        <div class="rocab_table_header">
                            <div class="rocab_table_cell"> <span>الوقت</span></div>
                            <div class="rocab_table_cell"> <span>الزبون</span></div>
                            <div class="rocab_table_cell" data-ng-if="RoleID>=3"> <span>رقم الزبون</span></div>
                            <div class="rocab_table_cell" data-ng-if="RoleID>=3"> <span>المؤسسة</span></div>
                            <div class="rocab_table_cell"> <span>العنوان</span> </div>
                            <div class="rocab_table_cell"> <span>الى</span></div>
                            <div class="rocab_table_cell"> <span> السائق</span></div>
                            <div class="rocab_table_cell"> <span>رقم السائق </span></div>
                            <!--         <div class="rocab_table_cell" > <span>المكتب </span></div> -->
                            <div class="rocab_table_cell"> <span>المحافظة </span></div>

                            <div class="rocab_table_cell"> <span>المبلغ </span></div>
                            <div class="rocab_table_cell"> <span>الخصم </span></div>

                            <div class="rocab_table_cell"> <span>الحالة</span></div>
                            <div class="rocab_table_cell"> <span>التقييم</span></div>
                            <div class="rocab_table_cell"><span>رقم الطلب</span></div>
                            <th style="width:4%"> <span>الغاء</span></th>

                        </div>

                        <div id="bookingList" data-ng-repeat="d in (filteredList = (BookingList | filter: search)) track by $index " class="rocab_table_row">
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false" data-ng-bind="d.PickUpTime"></div>

                            <div class="rocab_table_cell" ng-click="CustomerBooking.get(d)" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont, 'cursor':'pointer'}">
                                {{d.CustomerName=='null' ? ''  : d.CustomerName}}
                            </div>
                            <div data-ng-if="RoleID>=3" class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                {{d.CustomerNo=='null' ? ''  : d.CustomerNo}}
                            </div>
                            <div data-ng-if="RoleID>=3" class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                {{d.EnterpriseName=='null' ? ''  : d.EnterpriseName}}
                            </div>
                            <div class="rocab_table_cell" ng-click="GetCustomerLocation.get(d)" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont, 'cursor':'pointer'}" data-ng-bind="d.FromPlace">

                            </div>
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}"
                                 data-ng-bind="d.ToPlace">
                            </div>
                            <div class="rocab_table_cell" ng-click="DriverBooking.get(d.DriverOID)" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont, 'cursor':'pointer'}"
                                 data-ng-bind="d.DriverName">
                            </div>
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                {{d.DriverPhoneNo=='null' ? ''  : d.DriverPhoneNo}}
                            </div>

                            <div hidden id="SelectedCompanyID">{{d.CompanyId}}</div>
                            <!--
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}" >
                                 {{d.CompanyName=='null' ? ''  : d.CompanyName}}
                            </div>
                            -->
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                {{d.districtName=='null' ? ''  : d.districtName}}
                            </div>


                            <div class="rocab_table_cell" colspan="2" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                {{d.Amount=='null' ? ''  : d.Amount}}
                                <span ng-if="d.IsDebit==false">
                                    <span ng-if="d.PaymentMethod=='1'">مدفوع</span>
                                    <span ng-if="d.PaymentMethod=='2'">خصم من الرصيد</span>

                                </span>
                                <span ng-if="d.IsDebit==true">غير مدفوع</span>

                            </div>
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                {{d.DiscountValue=='null' ? ''  : d.DiscountValue}}
                            </div>

                            <div class="rocab_table_cell" ng-click="BookingDetails.get(d.BookingID)" ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="cursor:pointer">
                                <p ng-if="d.BookingStatusDesc!='ملغي'" style="text-align:right">{{d.BookingStatusDesc}} </p>


                            </div>

                            <!--  <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                  {{(d.Sent_To=="customer_app_D") ? 'السائق'  : (d.Sent_To=="customer_app_O"?'المكتب':'')}}
                               </td>-->
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center'}">
                                <a href="#" class="" ng-if="d.Trip_Rating!= null && d.Trip_Review != 'NULL'" ng-click="ReviewItem.review(d.Trip_Review)" style=" cursor pointer;color:#000 ;background:transparent!important;">{{d.Trip_Rating}}<p style=" display inline-block;margin 0; margin-right 10px;"><i style=" float left;" class="fa fa-eye" aria-hidden="true"></i></p></a>
                                <p href="#" class="" ng-if="d.Trip_Rating== null" style="color:#000;background:transparent!important;">{{d.Trip_Rating}}</p>
                                <p href="#" class="" ng-if="d.Trip_Rating!= null && d.Trip_Review == 'NULL'" style="color:#000;background:transparent!important;">{{d.Trip_Rating}}</p>

                            </div>
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                {{d.BookingID=='null' ? ''  : d.BookingID}}
                            </div>
                            <div class="rocab_table_cell" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'cursor':'pointer', 'border':d.border, 'border-bottom':d.borderC}" >
                             <a  ng-if="( d.BookingStatus=='B' || d.BookingStatus=='A')"  ng-click="CancelBooking.cancel(d.BookingID,d.IMEIno,d.DriverOID)"  style="cursor: pointer;color:#000;background:transparent!important"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
                            </div>

                            <div class="showBookingDetails" ng-show="tooltip" ng-if="d.BookingStatus=='E'||d.BookingStatus=='C'">
                                <div class="rocab_table_header">
                                    <div class="rocab_table_cell"> <span>المسافة التقديرية قبل</span></div>
                                    <div class="rocab_table_cell"> <span>المسافة الحقيقية قبل</span></div>
                                    <div class="rocab_table_cell"> <span> فرق المسافة قبل</span></div>
                                    <div class="rocab_table_cell"> <span>المدة قبل  </span></div>
                                    <div class="rocab_table_cell"> <span>المسافة </span></div>
                                    <div class="rocab_table_cell"> <span>المدة </span></div>
                                    <div class="rocab_table_cell"> <span>مدة الانتظار </span></div>
                                    <div class="rocab_table_cell"> <span>تعويض المسافة </span></div>
                                    <div class="rocab_table_cell"> <span>تعويض الالغاء</span></div>
                                </div>
                                <div class="rocab_table_row">
                                    <div class="rocab_table_cell">{{d.EstimatedDistanceBeforeTripStart=='null' ? ''  : d.EstimatedDistanceBeforeTripStart}} </div>
                                    <div class="rocab_table_cell">{{d.DistanceBeforeTripStart=='null' ? ''  : d.DistanceBeforeTripStart}} </div>
                                    <div class="rocab_table_cell">{{d.DistanceDiff}} </div>
                                    <div class="rocab_table_cell">{{d.TimeBeforeTripStart=='null' ? ''  : d.TimeBeforeTripStart}} </div>
                                    <div class="rocab_table_cell">{{d.Distance=='null' ? ''  : d.Distance}} </div>
                                    <div class="rocab_table_cell">{{d.Duration=='null' ? ''  : d.Duration}} </div>
                                    <div class="rocab_table_cell"> {{d.WaitingTime=='null' ? ''  : d.WaitingTime}} </div>
                                    <div class="rocab_table_cell"> {{d.FarTripCompensation=='null' ? ''  : d.FarTripCompensation}} </div>
                                    <div class="rocab_table_cell"> {{d.CanceledTripCompensation=='null' ? ''  : d.CanceledTripCompensation}} </div>
                                </div>
                            </div>
                        </div>

                        <div class="rocab_table_row" data-ng-if="BookingList.length == 0">

                            <span>لا توجد بيانات</span> </td>
                        </div>

                    </div>

                </div>

                <!-----------------------------------------Location Modal content-------------------------------->
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog" style="height: 80%!important; width: 50%!important;padding-top: 5%!important;">
                        <!-- Modal content-->
                        <div class="modal-content" style="height:100%;width:100%">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">موقع الزبون</h4>
                            </div>
                            <div class="modal-body" style="height: calc(100% - 56px); width:100%;padding:0!important;">

                                <div class="col-md-8" style="padding:0!important;height: 100%;">
                                    <div class="openstreet mapview-map"
                                         style="width: 100%; height: 100%; "
                                         id="bookingmap">
                                    </div>
                                </div>
                                <div class="col-md-4" style="padding-top: 10px!important;">
                                    <h4 class="modal-title" style="border-bottom: 2px solid orange; ">التفاصيل</h4>
                                    <h6 id="coordinates"></h6>

                                    <div id="orderlist" data-ng-repeat="i in OrderItems track by $index "
                                         style="width 100%; height 100%; border-bottom: 1px solid orange; margin-right:5px;">

                                        <div class="rocab_table_cell">
                                            {{$index+1}}
                                        </div>
                                        <div class="rocab_table_cell">
                                            {{i}}
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-----------------------------------------customerModel Modal content-------------------------------->
                <div class="modal fade" id="customerModel" role="dialog">
                    <div class="modal-dialog" style="width: 97%!important;padding-top: 0%!important;overflow: auto;height: 96%;margin: 1.5%!important;margin-bottom: 0!important;background:#fff;">
                        <!-- Modal content-->
                        <div class="modal-content" style="height: 102%;    width: 100%;    box-shadow: none;">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">طلبات الزبون</h4>
                            </div>
                            <div class="modal-body" style=" height calc(100% - 56px); width 100%;padding 0!important;">
                                <div class="row" style="height:auto;    padding-right: 15px;margin-bottom: 5px;">
                                    <div class=" firstSearch " style="">
                                        <div class="SerachBox input-group input-group-unstyled">
                                            <input type="text" class="form-control" style=" float:left;" ng-model="searchCustomer" id="Text1" aria-controls="example" placeholder="{{somePlaceholder}}" maxlength="20" />
                                            <span class="input-group-addon">
                                                <i class="icon-search icon-1x"></i>
                                            </span>

                                        </div>

                                    </div>
                                    <div class="dateFilter" style="">
                                        <div class=" inline Filter_Div">
                                            <span>التاريخ</span>
                                            <div class="datePicker" style="padding: 0;">
                                                <input type="date" id="Date1" class="form-control" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="Status">
                                        <div class=" inline Filter_Div thirdSearch">
                                            <span>الحالة</span>
                                            <div class="statusSelect" style=" padding 0;">
                                                <select class="form-control chzn-select" data-ng-model="selectedStatus" style="cursor: pointer;" data-ng-change="selectStatus(selectedStatus)">
                                                    <option value="">الكل</option>
                                                    <option value="B">قيد التنفيذ</option>
                                                    <option value="A">باتجاه الزبون</option>
                                                    <option value="E">مكتمل</option>
                                                    <option value="C">ملغي</option>
                                                    <option value="R">مرفوض</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-1 " style="float: right;padding:0 ;">
                                        <div class=" inline Filter_Div Gobtn">
                                            <button type="button" class="btn btn-info btn-sm btn-flat btn-rect" style="cursor: pointer;width:100%" data-toggle="collapse" data-ng-click=" loadDailyBooking()">
                                                <span>عرض</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="total">
                                        <table class="alltable table table-bordered responsive-table TotalTable" style=" margin-bottom 5px;">
                                            <tr style="height: 32px;">
                                                <td class="td1"> اجمالي</td>
                                                <td class="td2">{{calcCustomerCount(CutomerFilteredList)}} </td>

                                            </tr>

                                        </table>
                                    </div>

                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 List" style="display:block">
                                    <div class="table-responsive">
                                        <table class="alltable table table-bordered sortableTable table-hover" id="table2">
                                            <thead>
                                                <tr>
                                                    <th style="width:3%"> <span>الوقت</span></th>
                                                    <th style="width:8%"> <span>الزبون</span></th>
                                                    <th style="width:7%"> <span>رقم الزبون</span></th>
                                                    <th style="width:15%"> <span>العنوان</span> </th>
                                                    <th style="width:15%"> <span>الى</span></th>
                                                    <th style="width:7%"> <span> السائق</span></th>
                                                    <th style="width:6%"> <span>رقم السائق </span></th>
                                                    <th style="width:10%"> <span>المكتب </span></th>
                                                    <th style="width:4%"> <span>المسافة </span></th>
                                                    <th style="width:4%"> <span>المدة </span></th>
                                                    <th style="width:4%"> <span>مدة الانتظار </span></th>
                                                    <th style="width:6%" colspan="2"> <span>المبلغ </span></th>
                                                    <th style="width:7%"> <span>الحالة</span></th>
                                                    <th style="width:4%"> <span>التقييم</span></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr data-ng-repeat="d in (CutomerFilteredList =(AllBookingsForCustomer | filter:searchCustomer)) track by $index ">

                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        <span data-ng-bind="d.date">

                                                        </span>
                                                        <br />
                                                        <span data-ng-bind="d.time">

                                                        </span>
                                                    </td>


                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="border: 2px solid rgb(0, 0, 0)!important;">
                                                        {{d.CustomerName=='null' ? ''  : d.CustomerName}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="border: 2px solid rgb(0, 0, 0)!important;">
                                                        {{d.CustomerNo=='null' ? ''  : d.CustomerNo}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="border: 2px solid rgb(0, 0, 0)!important;">
                                                        {{d.FromPlace=='null' ? ''  : d.FromPlace}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="border: 2px solid rgb(0, 0, 0)!important;"
                                                        data-ng-bind="d.ToPlace"></td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}"
                                                        data-ng-bind="d.DriverName"></td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        {{d.DriverPhoneNo=='null' ? ''  : d.DriverPhoneNo}}
                                                    </td>

                                                    <td hidden id="Td1">{{d.CompanyId}}</td>

                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.CompanyName=='null' ? ''  : d.CompanyName}}
                                                    </td>

                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.Distance=='null' ? ''  : d.Distance}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.Duration=='null' ? ''  : d.Duration}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.WaitingTime=='null' ? ''  : d.WaitingTime}}
                                                    </td>
                                                    <td colspan="2" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.Amount=='null' ? ''  : d.Amount}}
                                                        <span ng-if="d.PaymentMethod=='1'">مدفوع</span>
                                                        <span ng-if="d.PaymentMethod=='2'">خصم من الرصيد</span>
                                                    </td>


                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        <p ng-if="d.BookingStatusDesc!='ملغي'" style="text-align:right">{{d.BookingStatusDesc}} </p>


                                                    </td>

                                                    <!--  <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                          {{(d.Sent_To=="customer_app_D") ? 'السائق'  : (d.Sent_To=="customer_app_O"?'المكتب':'')}}
                                                       </td>-->
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center'}">
                                                        <a href="#" class="" ng-if="d.Trip_Rating!= null && d.Trip_Review != 'NULL'" ng-click="ReviewCustomeItem.review(d.Trip_Review)" style=" cursor pointer;color:#000 ;background:transparent!important;">{{d.Trip_Rating}}<p style=" display inline-block;margin 0; margin-right 10px;"><i style=" float left;" class="fa fa-eye" aria-hidden="true"></i></p></a>
                                                        <p href="#" class="" ng-if="d.Trip_Rating== null" style="color:#000;background:transparent!important;">{{d.Trip_Rating}}</p>
                                                        <p href="#" class="" ng-if="d.Trip_Rating!= null && d.Trip_Review == 'NULL'" style="color:#000;background:transparent!important;">{{d.Trip_Rating}}</p>

                                                    </td>

                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>

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



                <!-----------------------------------------DriverModel Modal content-------------------------------->

                <div class="modal fade" id="DriverModel" role="dialog">
                    <div class="modal-dialog" style="width: 97%!important;padding-top: 0%!important;overflow: auto;height: 96%;margin: 1.5%!important;margin-bottom: 0!important;background:#fff;">
                        <!-- Modal content-->
                        <div class="modal-content" style="height: 102%;    width: 100%;    box-shadow: none;">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">طلبات السائق</h4>
                                <div class=" firstSearch " style="">
                                    <div class="SerachBox input-group input-group-unstyled">
                                        <input type="text" class="form-control" style=" float:left;" ng-model="search" id="Text2" aria-controls="example" placeholder="{{somePlaceholder}}" maxlength="20" />
                                        <span class="input-group-addon">
                                            <i class="icon-search icon-1x"></i>
                                        </span>

                                    </div>
                                </div>
                                <div class="total">
                                    <table class="alltable table table-bordered responsive-table TotalTable" style=" margin-bottom 5px;">
                                        <tr style="height: 32px;">
                                            <td class="td1"> اجمالي</td>
                                            <td class="td2">{{calcDriverCount(DriverFilteredList)}} </td>

                                        </tr>

                                    </table>
                                </div>
                                <div class="col-md-1" style="padding:5px">
                                    <span class="TDlabel"> المبلغ </span>
                                    <span class="TDValue"> {{calculateDriverAmount(DriverFilteredList)}}</span>
                                </div>
                                <div class="col-md-1" style="padding:5px">
                                    <span class="TDlabel"> الخصم </span>
                                    <span class="TDValue">  {{calculateDriverTotalDiscount(DriverFilteredList)}} </span>
                                </div>
                                <div class="col-md-1" style="padding:5px">
                                    <span class="TDlabel"> تعويض المسافة </span>
                                    <span class="TDValue">  {{calculateDriverTotalDistanceCom(DriverFilteredList)}} </span>
                                </div>
                                <div class="col-md-1" style="padding:5px">
                                    <span class="TDlabel"> تعويض الالغاء </span>
                                    <span class="TDValue">  {{calculateDriverTotalCancelCom(DriverFilteredList)}} </span>
                                </div>
                            </div>
                            <div class="modal-body" style=" height calc(100% - 56px); width 100%;padding 0!important;">
                                <div class="row" style="height:auto;    padding-right: 15px;margin-bottom: 5px;">



                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 List" style="display:block">
                                    <div class="table-responsive">
                                        <table class="alltable table table-bordered sortableTable table-hover" id="table3">
                                            <thead>
                                                <tr>
                                                    <th style="width:3%"> <span>الوقت</span></th>
                                                    <th style="width:8%"> <span>الزبون</span></th>
                                                    <th style="width:7%"> <span>رقم الزبون</span></th>
                                                    <th style="width:15%"> <span>العنوان</span> </th>
                                                    <th style="width:15%"> <span>الى</span></th>
                                                    <th style="width:7%"> <span> السائق</span></th>
                                                    <th style="width:6%"> <span>رقم السائق </span></th>
                                                    <th style="width:10%"> <span>المكتب </span></th>
                                                    <th style="width:4%"> <span>المسافة </span></th>
                                                    <th style="width:4%"> <span>المدة </span></th>
                                                    <th style="width:4%"> <span>مدة الانتظار </span></th>
                                                    <th style="width:6%" colspan="2"> <span>المبلغ </span></th>
                                                    <th style="width:7%"> <span>الحالة</span></th>
                                                    <th style="width:4%"> <span>التقييم</span></th>
                                                    
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr data-ng-repeat="d in (DriverFilteredList=( AllBookingsForDriver | filter:search)) track by $index ">
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        <span data-ng-bind="d.date">

                                                        </span>
                                                        <br />
                                                        <span data-ng-bind="d.time">

                                                        </span>
                                                    </td>

                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="border: 2px solid rgb(0, 0, 0)!important;">
                                                        {{d.CustomerName=='null' ? ''  : d.CustomerName}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="border: 2px solid rgb(0, 0, 0)!important;">
                                                        {{d.CustomerNo=='null' ? ''  : d.CustomerNo}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont, 'cursor':'pointer'}" style="border: 2px solid rgb(0, 0, 0)!important;">
                                                        {{d.FromPlace=='null' ? ''  : d.FromPlace}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}" style="border: 2px solid rgb(0, 0, 0)!important;"
                                                        data-ng-bind="d.ToPlace"></td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}"
                                                        data-ng-bind="d.DriverName"></td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        {{d.DriverPhoneNo=='null' ? ''  : d.DriverPhoneNo}}
                                                    </td>

                                                    <td hidden id="Td2">{{d.CompanyId}}</td>

                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.CompanyName=='null' ? ''  : d.CompanyName}}
                                                    </td>

                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.Distance=='null' ? ''  : d.Distance}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.Duration=='null' ? ''  : d.Duration}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.WaitingTime=='null' ? ''  : d.WaitingTime}}
                                                    </td>
                                                    <td colspan="2" ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'color':d.colorFont}">
                                                        {{d.Amount=='null' ? ''  : d.Amount}}
                                                        <span ng-if="d.PaymentMethod=='1'">مدفوع</span>
                                                        <span ng-if="d.PaymentMethod=='2'">خصم من الرصيد</span>
                                                    </td>s



                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        <p ng-if="d.BookingStatusDesc!='ملغي'" style="text-align:right">{{d.BookingStatusDesc}} </p>


                                                    </td>

                                                    <!--  <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                          {{(d.Sent_To=="customer_app_D") ? 'السائق'  : (d.Sent_To=="customer_app_O"?'المكتب':'')}}
                                                       </td>-->
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center'}">
                                                        <a href="#" class="" ng-if="d.Trip_Rating!= null && d.Trip_Review != 'NULL'" ng-click="ReviewDriverItem.review(d.Trip_Review)" style=" cursor pointer;color:#000 ;background:transparent!important;">{{d.Trip_Rating}}<p style=" display inline-block;margin 0; margin-right 10px;"><i style=" float left;" class="fa fa-eye" aria-hidden="true"></i></p></a>
                                                        <p href="#" class="" ng-if="d.Trip_Rating== null" style="color:#000;background:transparent!important;">{{d.Trip_Rating}}</p>
                                                        <p href="#" class="" ng-if="d.Trip_Rating!= null && d.Trip_Review == 'NULL'" style="color:#000;background:transparent!important;">{{d.Trip_Rating}}</p>

                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'text-align':'center', 'cursor':'pointer', 'border':d.border, 'border-bottom':d.borderC}">
                                                        <a ng-if="d.BookingStatus=='B' || d.BookingStatus=='A'" href="#" class="" ng-click="CancelBooking.cancel(d.BookingID,d.IMEIno,d.DriverOID)" style="cursor: pointer;color:#000;background:transparent!important"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>

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

                </div>


                <!-----------------------------------------booking details Modal content-------------------------------->
                <div class="modal fade" id="BookingModal" role="dialog">
                    <div class="modal-dialog" style="width: 97%!important;padding-top: 0%!important;overflow: auto;height: 96%;margin: 1.5%!important;margin-bottom: 0!important;background:#fff;">
                        <!-- Modal content-->
                        <div class="modal-content" style="height: 98%;    width: 100%;    box-shadow: none;">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title"> تفاصيل الطلب</h4>
                            </div>
                            <div class="modal-body" style=" height calc(100% - 56px); width 100%;padding 0!important;">

                                <div class="col-lg-12 col-md-12 col-sm-12 List" style="display:block;margin-top:10px">
                                    <div class="table-responsive">
                                        <table class="alltable table table-bordered sortableTable table-hover" id="table4">
                                            <thead>
                                                <tr>
                                                    <th style="width:8%"> <span>اسم السائق</span></th>
                                                    <th style="width:8%"> <span>رقم السائق</span></th>
                                                    <th style="width:10%"> <span>المكتب </span></th>
                                                    <th style="width:12%"> <span>الحالة</span> </th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr data-ng-repeat="d in BookingDetailsList  track by $index ">



                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        {{d.DriverFirstName=='null' ? ''  : d.DriverFirstName}}
                                                        <span ng-if="d.TakenAction=='S'"><i class="fa fa-check"></i></span>
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        {{d.CorporateMobileNumber=='null' ? ''  : d.CorporateMobileNumber}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        {{d.CompanyName=='null' ? ''  : d.CompanyName}}
                                                    </td>
                                                    <td ng-style="{'background-color': d.color, 'font-weight':'bold', 'color':d.colorFont}">
                                                        <span ng-if="d.TakenAction=='N'">لم يتم الرد</span>
                                                        <span ng-if="d.TakenAction=='R'">رفض</span>


                                                    </td>


                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>

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




            </div>
        </div>


    </div>
    <script type="text/ng-template" id="ReviewItemScript.html">
        <div class="row EditItem" id="wrapper" style="height: 100%; padding: 0;">
            <div style="height: 100%">

                <div class="form-group row" style="height: 100%">
                    <div class="EditItemForm" style="">
                        <div class="row" style="background: #ffc83e;padding: 5px;color: white; font-weight: bold;    height: 37px;">
                            <div class="col-md-2">
                                <!--<div class="close-x" data-ng-click="ClickClose()" style="cursor: pointer;">x</div> -->
                            </div>
                            <div class="right col-md-10" style="padding:0;    margin-top: 7px;">
                                <span>عرض التقييمات</span>
                            </div>
                        </div>

                        <div class="row" style="margin-top:5px; padding:10px">


                            <div class="col-md-12" style="margin-top:10px;padding:0">

                                <p id="reviewP">{{ReviewTxt}}</p>

                            </div>


                        </div>


                    </div>

                </div>
            </div>
        </div>
    </script>
    <script type="text/ng-template" id="CustomerReasonScript.html">
        <div class="row EditItem" id="wrapper" style="height: 100%; padding: 0;">
            <div style="height: 100%">

                <div class="form-group row" style="height: 100%">
                    <div class="EditItemForm" style="">
                        <div class="row" style="background: #ffc83e;padding: 5px;color: white; font-weight: bold;    height: 37px;">
                            <div class="col-md-2">
                                <!--<div class="close-x" data-ng-click="ClickClose()" style="cursor: pointer;">x</div> -->
                            </div>
                            <div class="right col-md-10" style="padding:0;    margin-top: 7px;">
                                <span>السبب</span>
                            </div>
                        </div>

                        <div class="row" style="margin-top:5px; padding:10px">


                            <div class="col-md-12" style="margin-top:10px;padding:0">

                                <p>{{CustomerReason}}</p>

                            </div>


                        </div>


                    </div>

                </div>
            </div>
        </div>
    </script>
    <script type="text/ng-template" id="CancelBookingItem.html">
        <div class="row EditItem" id="wrapper" style="height: 100%; padding: 0;">
            <div style="height: 100%">

                <div class="form-group row" style="height: 100%">
                    <div class="EditItemForm" style="">
                        <div class="row" style="background: #ffc83e;padding: 5px;color: white; font-weight: bold;    height: 37px;">
                            <div class="col-md-2">
                                <!--<div class="close-x" data-ng-click="ClickClose()" style="cursor: pointer;">x</div> -->
                            </div>
                            <div class="right col-md-10" style="padding:0;    margin-top: 7px;">
                                <span>حذف الطلب</span>
                            </div>
                        </div>

                        <div class="row" style="margin-top:5px; padding:10px">


                            <div class="col-md-12" style="margin-top:10px;padding:0">
                                <span style="margin-left:10px">هل تريد بالتاكيد الغاء هذا الطلب؟</span>
                            </div>


                        </div>
                        <div class="col-sm-2" style="float:right;margin-left:10px">
                            <button style="" type="button" class="btn btn-info btn-sm btn-flat btn-rect btn-speci" data-toggle="collapse" data-ng-click="CancelBtn(1,2,3,4,5)">
                                <span>حذف  </span>
                            </button>
                        </div>
                        <div class="col-sm-2" style="float:right;">
                            <button type="button" class="btn btn-info btn-sm btn-flat btn-rect btn-speci" data-toggle="collapse" data-ng-click="ClickClose()">
                                <span>الغاء </span>
                            </button>
                        </div>

                    </div>

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

    <!--Add Driver-->
    <!-- End Of Add Driver Information-->
    <!-- GLOBAL SCRIPTS -->
    <script src="../../assets/plugins/jquery-2.0.3.min.js"></script>
    <script src="../../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../assets/plugins/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <!-- END GLOBAL SCRIPTS -->

    <script type="text/javascript">
        $("#TotalAmount").hover(function () {
            $('.showTotalDetails').removeClass('hidden');
        }, function () {
            $('.showTotalDetails').addClass('hidden');
        });
        $("#TotalKms").hover(function () {
            $('.showTotalKmsDetails').removeClass('hidden');
        }, function () {
            $('.showTotalKmsDetails').addClass('hidden');
        });
      
        
    </script>

</body>


<!-- Mirrored from web.arttech.ps/rocab/Site/Pages/AppBooking.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 27 Nov 2025 16:24:28 GMT -->
</html>

