@extends('app')
@section('content')
<title>Manage Services</title>
<style type="text/css">
.orderdetail{
  line-height: 16px;
  font-size: 12px;
  padding: 5px 0px;
}
.filter_wrapper {
  color: #000;
  font-size: 14px;
  margin-top: 1%;
  xpadding-right: 2%;
  text-align: center;
}
.checkbox label {
  padding-left: 0px;
}
.margin {
  margin-bottom: -4%;
}
  .searchby {
    margin-top: 8px !important;
  }
  .modal{
    z-index: 1000 !important;
  }
  .statusbar {
  width:12px !important;
  height:55px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  padding: 0px;
}
.status_label {
  font-size: 12px;
}
.update_status {

}
.set_width {
 /*width: 94%;*/
  padding: 2px;
}
.substation_left{
  float: left !important;
}
.width{
    width: 70%;
}
.margin{
  margin: 0px;
}
.transfer_substation {
  cursor:pointer;
  text-align: left;
}
.status_Order_Received .statusbar,.status_New .statusbar{
  background-color:#31b0d5;
}
.status_Order_Assigned_Cancel .statusbar,.status_Order_assigned_Pickup_cancel .statusbar,.status_Cancelled .statusbar{
  background-color: #8B008B;
}
.status_Awaiting_Spares .statusbar{
  background-color:#449d44;
}
.status_Work_Pending .statusbar{
  background-color:#ec971f;
}
.status_At_substation_rtn .statusbar,.status_At_Substation_rtn_Reattempt1 .statusbar,.status_Closed .statusbar,.status_At_Substation_rtn_Reattempt2 .statusbar,.status_Closed .statusbar{
  background-color: #A52A2A;
}
.status_In_Transit .statusbar,.status_Order_picked_in_transit .statusbar,.status_Order_picked_weight_changed .statusbar,.status_In_transit .statusbar,.status_In_transit_address_changed .statusbar,.status_In_transit_Business_or_house_closed .statusbar,.status_In_transit_COD_amount_not_ready .statusbar,.status_In_transit_Customer_Refused_or_Rejected .statusbar,.status_In_transit_undelivered .statusbar,.status_In_transit_Reattempt1 .statusbar,.status_In_transit_Reattempt2 .statusbar,.status_In_transit_delay_out_of_our_control .statusbar,.status_In_Transit_Out_for_Delivery .statusbar,.status_In_Transit_Out_for_Delivery1 .statusbar,.status_In_Transit_Out_for_Delivery2 .statusbar,.status_In_transit_Shipment_Lost .statusbar,.status_Client_Side .statusbar{
  background-color:#FF00BF;
}
.status_Delivered .statusbar,.status_Delivered_Cash_collected .statusbar,.status_Delivered_card_on_delivery .statusbar,.status_Delivered_Open_box .statusbar,.status_RTN_Delivered .statusbar,.status_Completed .statusbar{
  background-color:#FA5882;
}
.status_Returned .statusbar,.status_RTN_Order_picked_in_transit .statusbar,.status_RTN_Order_picked_weight_changed .statusbar,.status_RTN_In_transit .statusbar,.status_RTN_In_transit_address_changed .statusbar,.status_RTN_In_transit_Business_or_house_closed .statusbar,.status_RTN_In_transit_COD_amount_not_ready .statusbar,.status_RTN_In_transit_Customer_Refused_or_Rejected .statusbar,.status_RTN_In_transit_undelivered .statusbar,.status_RTN_In_transit_Reattempt1 .statusbar,.status_RTN_In_transit_Reattempt2 .statusbar,.status_RTN_In_transit_delay_out_of_our_control .statusbar,.status_RTN_In_Transit_Out_for_Delivery .statusbar,.status_RTN_In_Transit_Out_for_Delivery1 .statusbar,.status_RTN_In_Transit_Out_for_Delivery2 .statusbar,.status_RTN_In_transit_Shipment_Lost .statusbar,.status_In_Progress .statusbar{
  background-color:#ff0000;
}
.labels {
   color: red;
   background-color: white;
   font-size: 10px;
   text-align: center;
   width: 50px;
   height: 30px;     
   border: 1px solid black;
 }
 .gm-style .gm-style-iw {
    font-weight: 300;
    font-size: 12px;
}
.checkbox-inline{
  font-weight: bold;
  font-size: 14px;
 
}
.checkbox_inline {
  margin-top: 10px;
  
}
.check {
   margin-top: 0px !important;
}

/* Modern Modal Card Styles */
.modern-modal-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modern-modal-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.card-header-modern {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 16px;
  border-bottom: none;
  position: relative;
}

.card-header-modern::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
}

.card-body-modern {
  padding: 20px;
  flex: 1;
}

.detail-row-modern {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
.detail-row-modern-change{
  display: flex;
  flex-direction: column;
}
.detail-row-modern:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.detail-label-modern {
  font-weight: 600;
  color: #374151;
  min-width: 140px;
  margin-right: 12px;
  font-size: 14px;
  flex-shrink: 0;
}

.detail-value-modern {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.detail-value-modern span {
  color: #111827;
  font-weight: 500;
}

.modal-section-modern {
  margin-bottom: 24px;
  height: 100%;
}

.modal-section-modern:last-child {
  margin-bottom: 0;
}

/* Equal height rows */
.col_row {
  display: flex;
  flex-wrap: wrap;
  
  align-items: stretch;
}

.col_row .full_row {
  display: flex;
  flex-direction: row;
  flex: 0 0 calc(50% - 10px);
  
  min-width: 0;
}

.admin-remark-modern {
  background: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #667eea;
  margin-top: 20px;
}

.admin-remark-modern .card-header-modern {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  margin: -16px -16px 12px -16px;
  border-radius: 4px 4px 0 0;
}

.signature-section-modern {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  border: 2px dashed #cbd5e1;
  text-align: center;
  margin-top: 20px;
}

.signature-section-modern h4 {
  color: #374151;
  margin-bottom: 16px;
  font-weight: 600;
}

.signature-image-modern {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  background: white;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.signature-date-modern {
  margin-top: 12px;
  color: #6b7280;
  font-style: italic;
  font-size: 14px;
}

.select-modern {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.select-modern:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-control{
  padding: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modern-modal-card {
    margin-bottom: 16px;
  }
  
  .card-body-modern {
    padding: 16px;
  }
  
  .detail-row-modern {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .detail-label-modern {
    min-width: auto;
    margin-bottom: 4px;
  }

}
</style>
<div class="content-wrapper">
    <div class="container">
        <div class="row" >  
            <h1 class="page-head-line">Manage Services</h1>
            @if(Session::has('flash_message'))
              <div class="alert alert-success">
                  {{ Session::get('flash_message') }}
              </div>
          @endif
         <!-- <h2 style="font-size:20px;">MANAGE SERVICES</h2>  apniamc-version1/resources/views/delivery/index.blade.php-->
                <div class="col-lg-12 col-md-12  col-xs-12 col-sm-12 report_leftpanel">
                <div class="col-lg-11 col-md-11 col-xs-12 col-sm-12" >

                   
                                    @if($servicestatuses == 0)
                    <div id="new_service_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#31b0d5;"> 
                          <!-- <input type="checkbox" class="check" id="Order_Received" value="New" onclick="gs_filter()"   checked>-->New ( {{ $new_service }} )
                          <input type="hidden" name="filter_for_new_service" value="New" id="filter_for_new_service">
                        </label>
                      </div>
                    <div id="progress_service_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#ff0000;">
                        <!--  <input type="checkbox" class="check" id="In_Progress" value="In Progress" onclick="gs_filter()"    checked>-->In Progress ( {{ $progress_service }} )
                          <input type="hidden" name="filter_for_progress_service" value="In Progress" id="filter_for_progress_service">
                        </label>
                      </div>
                      <div  id="awaiting_service_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#449d44;">
                          <!-- <input type="checkbox" class="check" id="Awaiting_Spares" value="Awaiting Spares" onclick="gs_filter()"    checked>-->Awaiting Spares ( {{ $awaiting_service}} )

                          <input type="hidden" name="filter_for_awaiting_service" value="Awaiting Spares" id="filter_for_awaiting_service">
                        </label>
                        </div>
                    <div id="work_pending_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#ec971f;">
                          <!-- <input type="checkbox" class="check" id="Work_Pending" value="Work Pending" onclick="gs_filter()"   checked> -->Work Pending ( {{ $work_pending }} )
                          <input type="hidden" name="filter_for_work_pending" value="Work Pending" id="filter_for_work_pending">
                        </label>
                        </div>
                      <div id="client_side_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#FF00BF;">
                          <!-- <input type="checkbox" class="check" id="Client_Side" value="Client_side" onclick="gs_filter()"    checked>-->Client Side ( {{ $client_side }} )
                          <input type="hidden" name="filter_for_client_side" value="Client Side" id="filter_for_client_side">
                        </label>
                        </div>
                      <div id="completed_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#FA5882;">
                          <!-- <input type="checkbox" class="check" id="Completed" value="Completed" onclick="gs_filter()"    checked>-->Completed <!-- <span id="delivered_count"></span> --> ( {{ $completed}} )
                          <input type="hidden" name="filter_for_completed" value="Completed" id="filter_for_completed">
                        </label>
                        </div>
                      <div id="closed_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#A52A2A;">
                          <!-- <input type="checkbox" class="check" id="Closed" value="Closed" onclick="gs_filter()"    checked>-->Closed<!--  <span id="closed_count"></span> --> ( {{ $closed}} )
                          <input type="hidden" name="filter_for_closed" value="Closed" id="filter_for_closed">
                        </label>
                        </div>
                      <div id="cancelled_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                        <label class="checkbox-inline checkbox_inline" style="color:#8B008B;">
                          <!-- <input type="checkbox" class="check" id="Order_Cancelled" value="Cancelled" onclick="gs_filter()"   checked> -->Cancelled <!-- <span id="cancel_count"></span> --> ( {{ $cancelled}} )
                          <input type="hidden" name="filter_for_cancelled" value="Cancelled" id="filter_for_cancelled">
                        </label>
                      </div>
                    @else
                        @foreach ($all_statuses as $status)
                          <div id="{{$status['NAME']}}_div" class="col-lg-2 col-md-2 col-sm-6 col-xs-6" style="padding: 0px">
                            <label class="checkbox-inline checkbox_inline" style="color:#8B008B;">
                              {{ $status['NAME'] }} ( {{ $status['count'] }} )
                              <input type="hidden" name="filter_for_{{$status['NAME']}}_service" value="{{$status['id']}}" id="filter_for_{{$status['NAME']}}_service">
                            </label>  
                          </div>
                          <script>
                            $("#{{$status['NAME']}}_div").click(function(){
                              console.log("Need to check")
                              var filter_on_click = document.getElementById("filter_for_{{$status['NAME']}}_service").value;
                              
                              console.log(filter_on_click);

                              var frmtoken = document.getElementById("token").value; 
                              window.location.href="http://uat.mukesoft.com/managedelivery?type=today&_token="+frmtoken+"&filter_on_click="+filter_on_click;
                            })
                          </script>
                        @endforeach
                    @endif
                   </div> 

       <div class="col-md-1 col-lg-1 col-xs-12 col-sm-12">
              <a href="?report=1" data-toggle="tooltip" title="" class="btn btn-primary" data-original-title="Download Excel" style=""><i class="fa fa-download"></i></a>       
        </div> </div>
       
        </div>
        <div class="row">

        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" /> 
           <div class="col-md-2 report_leftpanel" style="margin: 0px" >
            <div class="">
              <form method="GET" action="{{ route('managedelivery.index') }}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                <input type="hidden" name="substation_id" value="">
                  <div class="row" id="date_search" style="margin-top:4%">
                      <label class="col-md-12 control-label" style="margin-top: 1%;">Start Date</label>
                        <div class="col-md-12">
                          <div class="input-group date">
                              <input type="text" id="start_date" name="start_date" data-format="DD-MM-YYYY" value="" class="form-control">
                              <span class="input-group-btn">
                              <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                              </span>
                            </div>
                        </div>
                        <label class="col-md-12 control-label" style="margin-top: 1%;">End Date</label>
                        <div class="col-md-12">
                          <div class="input-group date">
                            <input type="text" id="end_date" name="end_date" data-format="DD-MM-YYYY" value="" class="form-control">
                            <span class="input-group-btn">
                            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                            </span>
                          </div>
                        </div>
                  </div>
              <div class="row" id="type_search" style="margin-top:4%">
               <label class="col-md-12 control-label" style="margin-top:1%;">By Type</label>
               <div class="col-md-12">
                  <div class="input-group date"> 
                                        @foreach($service_type as $type)
                        <label class="checkbox-inline" style="margin-left: 5px; padding-right: 40px;"><input type="checkbox"  name="service_type[]" value="" style="margin-top: 0%;" ></label>  
                      @endforeach
                     
                    </div>
                  </div>
                </div>
                            <div class="row" id="biker_search" style="margin-top:4%">
                             <div class="col-md-12">
                               <label style="margin-top: 8%;">By Technician</label>
                             </div>
                             <div class="col-md-12">
                                                              <select class="form-control" name="biker_id">
                                    <option value="">Please Select</option>
                                        @foreach($bikers as $biker)
                                                      <option value=""   selected="selected"> </option>
                                        @endforeach
                                </select>
                              </div>
                            </div>

                             <div class="row" id="" style="margin-top:4%">
                             
                             <div class="col-md-12">   
                                                              
                              <label class="checkbox-inline" style="margin-left: 0px;">
                                <input type="checkbox"  name="no_technician" value="test" style="margin-top: 0%;"  >No Technician Assign
                               </label>  
                                    
                              </div>
                            </div> 
              
              <div class="row" id="biker_search" style="margin-top:4%">
                             <div class="col-md-12">
                               <label style="margin-top: 8%;">By Client</label>
                             </div>
                             <div class="col-md-12">
                                                              <select class="form-control" name="vendor_id">
                                    <option value="">Please Select</option>
                                        @foreach($vendors as $vendor)
                                                      <option value=""   selected="selected"></option>
                                        @endforeach
                                </select>
                              </div>
                            </div>

                            <div class="row" style="margin-top:4%">
                                                             <div class="col-md-12">
                                  <label style="margin-top: 8%;">Service No.</label>
                               </div>
                               <div class="col-md-12">
                                  <input type="text" class="form-control" name="filter_shipment" value="">
                               </div>
                            </div>

                            <!-- Added by gaurav on 6-4-20 to make client ticket number -->
                            <div class="row" style="margin-top:4%">
                                                            <div class="col-md-12">
                                  <label style="margin-top: 8%;">Client Ticket No.</label>
                              </div>
                                <div class="col-md-12">
                                  <input type="text" class="form-control" name="clientticketno" value="">
                                </div>
                            </div>

                            <div class="row" style="margin-top:4%">
                              <div class="col-md-12">
                                  <label>By Status</label>
                               </div>
                              <div class="col-md-12">
                              @if($servicestatuses == 0)
                                @foreach($status_filters as $status_filter)
                                <div class="col-md-12 checkbox" style="margin:0">
                                  <label class="checkbox-inline"><input type="checkbox"  style="margin-top:1px" name="filter_status[]" value="" /></label>
                                </div>
                               @endforeach
                              @else
                                @foreach($status_filters as $status_filter)
                                  <div class="checkbox">
                                    <label style="padding-left: 10px;">
                                      <label class="checkbox-inline"><input type="checkbox"  style="margin-top:1px" name="filter_status[]" value="" >                                    </label>
                                  </div>
                                @endforeach
                              @endif
                             </div>
                            </div>

                            <div class="row">
                              <div class="form-group">
                                      <div class="col-md-6 col-sm-6 col-xs-6" >
                                        <button type="submit" id="search" class="btn btn-success" style="margin-top:2%">Search</button>
                                        </div>
                                         <div class="col-md-5 col-sm-5 col-xs-5" >
                                         <button type="button" class="btn btn-success" style="cursor: pointer;margin-top:2%" onclick="window.location.href='managedelivery?type=today';">Clear</button>
                                    </div>
                              </div>
                            </div>
                          </form>
                        </div>


           </div>   
       
          <div class="col-md-10">
              <div class="col-md-12" style="padding-right: 0px;padding-left: 0px;">
                <ul class="nav nav-tabs"> 
                               <li class="active"><a data-toggle="tab" href=".todayorder" onclick="setpagecount1();return false;">Todays Services</a></li>

                                 <li><a data-toggle="tab" href="#pastorders" onclick="setpagecount2();return false;">Past Services</a></li>
                                  </ul>
              </div>

        <div class="tab-content"> 
                      <div class="col-md-12 tab-pane fade in active todayorder" id="todayorder" style="padding-right: 0px;padding-left: 0px;    border-left-style: solid;
              border-color: #ddd; border-width: 1px;ight;height:auto;min-height:400px;border-bottom-style:solid;">
                @if(count($deliveries)== 0)
             <p style="cursor: pointer; padding:5%;">
                <strong>Sorry No Data Available.</strong>   
              </p>
          @else  
                @foreach($deliveries as $delivery)
              
                  @if($delivery->awb_no)
                                       <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 set_width">
                      @if($servicestatuses == 0)
                        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 order status_" id="ticket" style="border: 1px solid #d5d5d5;height: 150px;">
                      @else
                        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 order status_" id="ticket" style="border: 1px solid #d5d5d5;height: 150px;">
                      @endif

                        <div class="col-md-1 col-lg-1 col-sm-1 col-xs-1 statusbar" style="height:138px;">
                        </div>
                          <div class="orderdetail col-md-9 col-lg-9 col-sm-9 col-xs-9" style="font-size: 15px;"> 
                                                                                                   
                                  <p class="assigned_biker margin" style="cursor:pointer;clear:both;padding-top:1%;margin-top:0px;">
                                                            <b>Name: </b> 
                                                                        <span>No Technician Assign</span>
                                                                    </p>
                            @if($servicestatuses == 0)
                                <input class="selected_status" type="hidden" value="">
                            @else
                              <input class="selected_status" type="hidden" value="">
                            @endif
                            <input type="hidden" name="assined_biker_id" class="assined_biker_id" value="{{ $delivery->biker_id }}">
                            
                            <select class="biker_id width" id="">
                                <option value="0">Please Select</option>
                                  @foreach($bikers as $biker)
                                    <option value=""   selected="selected"> </option>
                                  @endforeach
                            </select>

                          <span class="biker_loader"><img src="/assets/website_assets/images/loader.gif" style="width: 8%;"></span>
                      </p>
                                                                   <p class="status margin" style="padding-top:1%;">
                                                                                    @if($servicestatuses == 0)
                                <span class="delivery_status" style="cursor:pointer;"><b>Service Status :</b> {{ $delivery->delivery_status }}</span>
                                <span class="dropdown_status">
                                  <label>Select Status : </label>
                                  <select class="update_status" id="" name="" style="width: 50%;">