@extends('layouts.carrier')

@section('content')
<style> 
/* .table-bordered{
    background: #fff;
}

.table-bordered thead td, .table-bordered thead th {
    border-bottom-width: 2px;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #000;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-bordered td, .table-bordered th {
    border: 1px solid #000;
}

.table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
    border: 1px solid #000;
}

.table-bordered tbody td{
    min-width: 100px;
} */

 table {
        /* font-family: "Fraunces", serif; */
        font-size: 125%;
        white-space: nowrap;
        margin: 0;
        border: none;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
        border: 1px solid black;
      }
      table td,
      table th {
        border: 1px solid black;
        padding: 0.5rem 1rem;
      }
      table thead th {
        padding: 3px;
        position: sticky;
        top: 0;
        z-index: 1;
        width: 25vw;
        background: #e6e6e6;
    color: #000;
      }
      table td {
        background: #fff;
        padding: 4px 5px;
        text-align: center;
        min-width: 100px;
      }

      table tbody th {
        font-weight: 600;
        /* font-style: italic; */

        text-align: left;
        position: relative;
        /* border-left:2px solid black; */
      }
      table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width:150px;
      }
      table thead th:nth-child(2) {
        position: sticky;
        left: 150px;
        z-index: 2;
        
      }
      table tbody th {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
      }

      table tbody th:nth-child(2) {
        position: sticky;
        left: 150px;
        background: white;
        z-index: 1;
      }
      caption {
        text-align: left;
        padding: 0.25rem;
        position: sticky;
        left: 0;
      }

      [role="region"][aria-labelledby][tabindex] {
        width: 100%;
        max-height: calc(98vh - 120px);
        overflow: auto;
      }
      [role="region"][aria-labelledby][tabindex]:focus {
        box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
        outline: 0;
      }

.lane_bg_blue{
    background: #e1e1f9;
}


.capsule{
  border: 1px solid;
    padding: 0 0px 0 5px;
    border-radius: 50px;
        font-size: 14px;
    color: #000;
}

.capsule span{
      
    padding: 6px 10px;
    border-radius: 30px;
        border: 1px solid #000;
    border-right: 0;
}

.cap_bg_pending{
  background: #ffe2af;
}

.cap_bg_pending span{
background: #ffb50d;

}

.cap_bg_accepted{
  background: #b3ffaf;
}

.cap_bg_accepted span{
    background: #04bf00;
    color: #fff;
}

.cap_bg_rejected{
      background: #ffafaf;
}

.cap_bg_rejected span{
    background: #bf0000;
    color: #fff;
}

.lane_biddable {
	cursor: pointer;
}

.form-floating .control-label.normal {
  padding-bottom: 0px;
}
</style>

<div class="conatiner">
	<div class="col-12">
		<div class="table-responsive">
			<div role="region" aria-labelledby="caption" tabindex="0">
				@if($invites)
				<table>
					<thead>
						<tr>
						<th>DESTINATION</th>
						<th>LOADS</th>
						@if($period)
						@foreach($period as $p)
						<th scope="col">{{ $p->format('d M') }}</th>
						@endforeach
						@endif
						</tr>
					</thead>
					<tbody>
						@foreach($invites as $i)
						<tr>
	            <th scope="col">{{ $i->destination_city.', '.$i->destination_state }}</th>
	            <th scope="col">{{ $i->lane_loads }}</th>
	            @foreach($i->dates as $d)
							<td scope="col" class="@if($d->active) lane_bg_blue @endif @if($d->active && (!$d->bids)) lane_biddable @endif" data-lane="{{ $i->lane_id }}" data-loads="{{ $i->lane_loads }}" data-destination="{{ $i->destination_city.', '.$i->destination_state }}" data-price="{{ $i->load_price }}" data-biddate="{{ $d->date }}" data-equipment="{{ $i->equipment }}">
							@if($d->bids)
              @foreach($d->bids as $bd)
              <div class="capsule cap_bg_{{ strtolower($bd->status) }}">
                <span>{{ date('h:i A', strtotime($bd->pickup_date)) }}</span>
              </div>
              @endforeach
							@else
							&nbsp;
							@endif
							</td>
							@endforeach
						</tr>
						@endforeach
					</tbody>
				</table>
				@endif
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="ikoBidModal" role="dialog">
	<div class="modal-dialog" style="width:400px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title firstTime" >BID</h4>
			</div>
			<div class="modal-body">
				<div class="col-md-12">
					<form class="form-floating" id="ikoBidform" name="ikoBidform">
						{{ csrf_field() }}
						<input type="hidden" class="hidden-field" id="iko_lane_id" name="iko_lane_id">
						<input type="hidden" class="hidden-field" id="bid_date" name="bid_date">
						<fieldset>
							<div class="form-group">
								<label for="bid_destination" class="control-label">Destination</label>
								<input type="text" class="form-control" id="bid_destination" name="bid_destination" readonly>
							</div>
              <div class="form-group">
                <label for="bid_equipment" class="control-label">Equipment</label>
                <input type="text" class="form-control" id="bid_equipment" name="bid_equipment" readonly>
              </div>
							<div class="form-group">
								<label for="bid_loads" class="control-label">Loads</label>
								<input type="text" class="form-control" id="bid_loads" name="bid_loads" readonly>
							</div>
							<div class="form-group">
								<label for="bid_price" class="control-label">Price Per Load</label>
								<input type="text" class="form-control" id="bid_price" name="bid_price" readonly>
							</div>
							<div class="form-group">
								<label for="bid_load_count" class="control-label">How many loads you want to bid?</label>
								<input type="text" class="form-control" id="bid_load_count" name="bid_load_count" data-validation="required">
							</div>
              <div id="bid-times-box">
              </div>
						</fieldset>
						<div class="clearfix"></div>
						<input class="btn btn-sm btn-danger" type="button" name="Submit" value="Submit" id="bid-save"></input>
					</form>
				</div>
			</div>
			<div class="modal-footer firstTime_footer">
			</div>
		</div>
	</div>
</div>

@endsection

@section('scripts')
<script charset="utf-8" src="{{asset('backend/js/services/carrier/ikobidding.js')}}"></script>
@endsection