@extends('../layouts.app')
<link rel="stylesheet" href="{{ asset('css/preloader.css')}}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}">


@section('title', 'Romaneio')
@section('content')
@include('../layouts.headers.cards_prod')
<!-- A consulta desta tabela deve envolver INNER JOIN por causa dos nomes da família, nome do grupo e subgrupo, todos vindos das respectivas chaves estrangeiras -->

<div class="container-fluid mt--5">
	<div class="row">
		<div class="col-xl-12 order-xl-1">
			<div class="card bg-secondary shadow">
				<div class="card-header bg-white border-0">
					<div class="row align-items-center">
						<div class="col-md-8">
							<h3 class="mb-0">{{ __('Romaneio e Telemarketing') }}</h3>
						</div>
					</div>
				</div>
				<div class="card-body">
					<div class="row">

						<div class="col-md-12">
							<div class="card">
								<form action="{{route('crm.romaneio_store')}}" method="post">
									@csrf
									<div class="card-header bg-default row align-items-center">
										<div class="col-md-3">
											<small class="text-info">Dia da Semana</small>
											<select class="form-control form-control-sm " name="dia_semana">
												<option value='segunda-feira'>Segunda-feira</option>
												<option value='terca-feira'>Terca-feira</option>
												<option value='quarta-feira'>Quarta-feira</option>
												<option value='quinta-feira'>Quinta-feira</option>
												<option value='sexta-feira'>Sexta-feira</option>
											</select>
										</div>
										<div class="col-md-3">
											<small class="text-info">Cidade</small>
											<select class="form-control form-control-sm" id='select_cidade' name="cidade" required>
												<option disabled="on" selected="on">Escolha uma cidade</option>
												@foreach($cidades as $cidade)
												<option value="{{$cidade->cidade_cliente}}" ibge="{{$cidade->codigo_municipio_cliente}}"> {{$cidade->cidade_cliente}}</option>
												@endforeach
											</select>
										</div>
										<div class="col-md-3">
											<small class="text-info">Codigo</small>
											<input type='text' class="form-control form-control-sm" value="" id="ibge" name="ibge">
										</div>
										<div class="col-md-2">
											<small class="text-info">Frequência</small>
											<select class="form-control form-control-sm " name="frequencia">
												<option value='7'>SEMANAL</option>
												<option value='14'>QUIZENAL</option>
												<option value='28'>MENSAL</option>
											</select>
										</div>
										<div class="col-md-1 text-right"><button class="btn btn-success" type="submit"><i class="fas fa-plus"></i></button></div>
									</div>
								</form>
							</div>
						</div>

						<div class="col-md-6">
							<div class="card rounded">
								<!-- Card body -->
								<div class="card-body p-3">
									<div class="accordion" id="accordionExample">

										<!-- Segunda -->
										<div class="card">
											<div class="card-header bg-default row align-items-center" data-toggle="collapse" data-target="#segunda" aria-expanded="true" aria-controls="segunda">
												<h5 class="text-white">Segunda-feira</h5>
											</div>
											<div id="segunda" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
												<div class="card-body bg-light px-1">
													<ul class="list-group list-group-flush list my--3">
														@foreach($segunda as $segunda)
														<li class="list-group-item px-3">
															<div class="row align-items-center">
																<div class="col-auto">
																	<!-- Avatar -->
																	<span class="avatar rounded-circle bg-primary font-weight-bold">
																		SEG
																	</span>
																</div>
																<div class="col ml--2">
																	<h4 class="mb-0">
																		<span href="#!">{{$segunda->cidade_romaneio}}</span>
																	</h4>
																	<!-- <span class="text-success">●</span>
																	<small>Online</small> -->
																</div>
																<div class="col-auto">
																	<a href="{{route('crm.romaneio_delete',$segunda->id)}}" class="btn btn-danger"><i class="fas fa-trash"></i></a>
																</div>
															</div>
														</li>
														@endforeach
													</ul>
												</div>
											</div>
										</div>
										<!-- Terca -->
										<div class="card">
											<div class="card-header bg-default row align-items-center" data-toggle="collapse" data-target="#terca" aria-expanded="true" aria-controls="terca">
												<h5 class="text-white">Terca-feira</h5>
											</div>
											<div id="terca" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
												<div class="card-body bg-light px-1">
													<ul class="list-group list-group-flush list my--3">
														@foreach($terca as $terca)
														<li class="list-group-item px-3">
															<div class="row align-items-center">
																<div class="col-auto">
																	<!-- Avatar -->
																	<span class="avatar rounded-circle bg-primary font-weight-bold">
																		TER
																	</span>
																</div>
																<div class="col ml--2">
																	<h4 class="mb-0">
																		<span href="#!">{{$terca->cidade_romaneio}}</span>
																	</h4>
																	<!-- <span class="text-success">●</span>
																	<small>Online</small> -->
																</div>
																<div class="col-auto">
																	<a href="{{route('crm.romaneio_delete',$terca->id)}}" class="btn btn-danger"><i class="fas fa-trash"></i></a>
																</div>
															</div>
														</li>
														@endforeach
													</ul>
												</div>
											</div>
										</div>
										<!-- Quarta -->
										<div class="card">
											<div class="card-header bg-default row align-items-center" data-toggle="collapse" data-target="#quarta" aria-expanded="true" aria-controls="quarta">
												<h5 class="text-white">Quarta-feira</h5>
											</div>
											<div id="quarta" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
												<div class="card-body bg-light px-1">
													<ul class="list-group list-group-flush list my--3">
														@foreach($quarta as $quarta)
														<li class="list-group-item px-3">
															<div class="row align-items-center">
																<div class="col-auto">
																	<!-- Avatar -->
																	<span class="avatar rounded-circle bg-primary font-weight-bold">
																		QUA
																	</span>
																</div>
																<div class="col ml--2">
																	<h4 class="mb-0">
																		<span href="#!">{{$quarta->cidade_romaneio}}</span>
																	</h4>
																	<!-- <span class="text-success">●</span>
																	<small>Online</small> -->
																</div>
																<div class="col-auto">
																	<a href="{{route('crm.romaneio_delete',$quarta->id)}}" class="btn btn-danger"><i class="fas fa-trash"></i></a>
																</div>
															</div>
														</li>
														@endforeach
													</ul>
												</div>
											</div>
										</div>
										<!-- Quinta -->
										<div class="card">
											<div class="card-header bg-default row align-items-center" data-toggle="collapse" data-target="#quinta" aria-expanded="true" aria-controls="quinta">
												<h5 class="text-white">Quinta-feira</h5>
											</div>
											<div id="quinta" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
												<div class="card-body bg-light px-1">
													<ul class="list-group list-group-flush list my--3">
														@foreach($quinta as $quinta)
														<li class="list-group-item px-3">
															<div class="row align-items-center">
																<div class="col-auto">
																	<!-- Avatar -->
																	<span class="avatar rounded-circle bg-primary font-weight-bold">
																		QUI
																	</span>
																</div>
																<div class="col ml--2">
																	<h4 class="mb-0">
																		<span href="#!">{{$quinta->cidade_romaneio}}</span>
																	</h4>
																	<!-- <span class="text-success">●</span>
																	<small>Online</small> -->
																</div>
																<div class="col-auto">
																<a href="{{route('crm.romaneio_delete',$quinta->id)}}"><i class="fas fa-trash"></i></a>
																</div>
															</div>
														</li>
														@endforeach
													</ul>
												</div>
											</div>
										</div>
										<!-- Sexta -->
										<div class="card">
											<div class="card-header bg-default row align-items-center" data-toggle="collapse" data-target="#sexta" aria-expanded="true" aria-controls="sexta">
												<h5 class="text-white">Sexta-feira</h5>
											</div>
											<div id="sexta" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
												<div class="card-body bg-light px-1">
													<ul class="list-group list-group-flush list my--3">
														@foreach($sexta as $sexta)
														<li class="list-group-item px-3">
															<div class="row align-items-center">
																<div class="col-auto">
																	<!-- Avatar -->
																	<span class="avatar rounded-circle bg-primary font-weight-bold">
																		SEX
																	</span>
																</div>
																<div class="col ml--2">
																	<h4 class="mb-0">
																		<span href="#!">{{$sexta->cidade_romaneio}}</span>
																	</h4>
																	<!-- <span class="text-success">●</span>
																	<small>Online</small> -->
																</div>
																<div class="col-auto">
																<a href="{{route('crm.romaneio_delete',$sexta->id)}}" class="btn btn-danger"><i class="fas fa-trash"></i></a>
																</div>
															</div>
														</li>
														@endforeach
													</ul>
												</div>
											</div>
										</div>

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

						<div class="col-md-6">
							<div class="card rounded">
								<a href="../img/icones/mapa_vale_litoral.jpg" target="_blank">
									<img class="card-img-top" src="../img/icones/mapa_vale_litoral.jpg" width="auto">
								</a>
								<!-- Card body -->
								<div class="card-body p-3">
									<ul class="d-none">
										@foreach($cidades as $cidade)
										<li>{{$cidade->cidade_cliente}} - {{$cidade->codigo_municipio_cliente}}</li>
										@endforeach
										<li></li>
									</ul>
								</div>
							</div>
						</div>

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

<!-- Comentando o navbar horizontal -->
@endsection

@push('js')
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script>
	$('input[type="checkbox"]').change(function() {
		this.value = this.checked ? 1 : 0;
	});
</script>

<script>
	$('#select_cidade').change(function() {
		var ibge = $(this).find(':selected').attr('ibge');
		document.getElementById('ibge').setAttribute("value", ibge);
	});
</script>
@endpush