@extends('layouts.app')
@section('content')
<link href="{{ asset('assets/newsite/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<div class="">

@foreach($data['bids'] as $bid)
<div class="dashboard-content-container" data-simplebar>
		<div class="dashboard-content-inner" >
			
			<!-- Dashboard Headline -->
			<div class="dashboard-headline">
				<h3>Manage Bidders</h3>
				<span class="margin-top-7">Bids for <a href="#">{{ $bid->job_title }}</a></span>

				<!-- Breadcrumbs -->
				<!-- <nav id="breadcrumbs" class="dark">
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">Dashboard</a></li>
						<li>Manage Bidders</li>
					</ul>
				</nav> -->
			</div>
	
			<!-- Row -->
			<div class="row">

				<!-- Dashboard Box -->
				<div class="col-xl-12">
					<div class="dashboard-box margin-top-0">

						<!-- Headline -->
						<div class="headline">
							<h3><i class="icon-material-outline-supervisor-account"></i> {{ count($bid->bids) }} Bidders</h3>
							<div class="sort-by">
								<select class="selectpicker hide-tick">
									<option>Highest First</option>
									<option>Lowest First</option>
									<option>Fastest First</option>
								</select>
							</div>
						</div>

						<div class="content">
							<ul class="dashboard-box-list">
								@foreach($bid->bids as $bidders)
								<li>
									<!-- Overview -->
									<div class="freelancer-overview manage-candidates">
										<div class="freelancer-overview-inner">

											<!-- Avatar -->
											<div class="freelancer-avatar">
												<div class="verified-badge"></div>
												<a href="#"><img src="images/user-avatar-big-02.jpg" alt=""></a>
											</div>

											<!-- Name -->
											<div class="freelancer-name">
												<h4><a href="#">{{ $bidders->user->name }} <img class="flag" src="images/flags/de.svg" alt="" title="{{ $bidders->user->company }}" data-tippy-placement="top"></a></h4>

												<!-- Details -->
												<span class="freelancer-detail-item"><a href="#"><i class="icon-feather-mail"></i> {{ $bidders->user->email }}</a></span>

												<!-- Rating -->
												<div class="freelancer-rating">
													<div class="star-rating" data-rating="{{ $bidders->user->average_stars }}"></div>
												</div>

												<!-- Bid Details -->
												<ul class="dashboard-task-info bid-info">
													<li><strong>R{{ $bidders->bid_price }}</strong><span>Fixed Price</span></li>
													<li><strong>{{ $bidders->delivery_integer }} {{ $bidders->delivery_interval }}</strong><span>Delivery Time</span></li>
												</ul>

												<!-- Buttons -->
												<div class="buttons-to-right always-visible margin-top-25 margin-bottom-0">
													<a onclick="accept_offer({{ $bidders->id }})"  class="popup-with-zoom-anim button ripple-effect" style="color: #FFF;"><i class="icon-material-outline-check"></i> Accept Offer</a>
													<!-- <a href="#small-dialog-1"  class="popup-with-zoom-anim button ripple-effect"><i class="icon-material-outline-check"></i> Accept Offer</a> -->
													<!-- <a href="#small-dialog-2" class="popup-with-zoom-anim button dark ripple-effect"><i class="icon-feather-mail"></i> Send Message</a> -->
													<a onclick="send_message({{ $bidders->id }})" class="button dark ripple-effect"><i class="icon-feather-mail"></i> Send Message</a>
													<a href="#" class="button gray ripple-effect ico" title="Remove Bid" data-tippy-placement="top"><i class="icon-feather-trash-2"></i></a>
												</div>
											</div>
										</div>
									</div>
								</li>
								@endforeach
							</ul>
						</div>
					</div>
				</div>

			</div>
			<!-- Row / End -->

		</div>
	</div>

	
@php /* @endphp
	@foreach($bid->bids as $bidders)
	<!-- Bid Acceptance Popup
================================================== -->
<div id="small-dialog-1" class="zoom-anim-dialog mfp-hide dialog-with-tabs">

	<!--Tabs -->
	<div class="sign-in-form">

		<ul class="popup-tabs-nav">
			<li><a href="#tab1">Accept Offer</a></li>
		</ul>

		<div class="popup-tabs-container">

			<!-- Tab -->
			<div class="popup-tab-content" id="tab">
				
				<!-- Welcome Text -->
				<div class="welcome-text">
					<h3>Accept Offer From  {{ $bidders->user->name }}</h3>
					<div class="bid-acceptance margin-top-15">
						$3200
					</div>

				</div>

				<form id="terms">
					<div class="radio">
						<input id="radio-1" name="radio" type="radio" required>
						<label for="radio-1"><span class="radio-label"></span>  I have read and agree to the Terms and Conditions</label>
					</div>
				</form>

				<!-- Button -->
				<button class="margin-top-15 button full-width button-sliding-icon ripple-effect" type="submit" form="terms">Accept <i class="icon-material-outline-arrow-right-alt"></i></button>

			</div>

		</div>
	</div>
</div>
<!-- Bid Acceptance Popup / End -->	



	<!-- Send Direct Message Popup
================================================== -->
<div id="small-dialog-121" class="zoom-anim-dialog mfp-hide dialog-with-tabs">

<!--Tabs -->
<div class="sign-in-form">

	<ul class="popup-tabs-nav">
		<li><a href="#tab{{$bidders->id}}">Send Message</a></li>
	</ul>

	<div class="popup-tabs-container">

		<!-- Tab -->
		<div class="popup-tab-content" id="tab{{$bidders->id}}">
			
			<!-- Welcome Text -->
			<div class="welcome-text">
				<h3>Direct Message To  {{ $bidders->user->name }}</h3>
			</div>
				
			<!-- Form -->
			<form action="{{ URL::to('send-message',$bidders->id) }}" method="post" id="send-pm">
				@csrf
				<textarea name="message" cols="10" placeholder="Message" class="with-border" required></textarea>
			</form>
			
			<!-- Button -->
			<button class="button full-width button-sliding-icon ripple-effect" type="submit" form="send-pm">Send <i class="icon-material-outline-arrow-right-alt"></i></button>

		</div>

	</div>
</div>
</div>
</div>
<!-- Send Direct Message Popup / End -->
@endforeach
@php */ @endphp

@endforeach
<div id="small-dialog-21" class="modal zoom-anim-dialog dialog-with-tabs"></div>
@endsection

@section('scripts')
	<script>
		function send_message(id) {
			$('#small-dialog-21').load('/load_send_message/'+id, function(response) {
				$('#small-dialog-21').modal( {backdrop:'static'} );
	    });
		}
	</script>
		<script>
		function accept_offer(id) {
			$('#small-dialog-21').load('/load_accept_offer/'+id, function(response) {
				$('#small-dialog-21').modal( {backdrop:'static'} );
	    });
		}
	</script>
@endsection