@extends('layouts.app')
@section('title', \App\CPU\translate('Upload New Campaign'))
@push('css_or_js')
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="{{asset('assets')}}/css/bootstrap-datepicker.min.css"/>
   <meta name="csrf-token" content="{{ csrf_token() }}">
	<style>
	.form-group{
		    margin-bottom: 25px;
			padding-right:25px;
	}
	</style>
@endpush

@section('content')
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">

							<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
								<!--begin::Toolbar container-->
								<div id="kt_app_toolbar_container" class="app-container container-xl d-flex flex-stack">
									<!--begin::Page title-->
									<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
										<!--begin::Title-->
										<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Campaigns</h1>
										<!--end::Title-->
										<!--begin::Breadcrumb-->
										<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
											<!--begin::Item-->
											<li class="breadcrumb-item text-muted">
												<a href="" class="text-muted text-hover-primary">Dashboard</a>
											</li>
											<!--end::Item-->
											<!--begin::Item-->
											<li class="breadcrumb-item">
												<span class="bullet bg-gray-400 w-5px h-2px"></span>
											</li>
											<!--end::Item-->
											<!--begin::Item-->
											<li class="breadcrumb-item text-muted">Campaigns</li>
											<!--begin::Item-->
											<li class="breadcrumb-item">
												<span class="bullet bg-gray-400 w-5px h-2px"></span>
											</li>
											<li class="breadcrumb-item text-muted">{{\App\CPU\translate('Upload New')}}</li>
											<!--end::Item-->
										</ul>
										<!--end::Breadcrumb-->
									</div>
									<!--end::Page title-->

								</div>
								<!--end::Toolbar container-->
							</div>


							<!-- Content Row -->
							<div class="app-container container-xl d-flex flex-stack">
								<div class="col-md-12">
									<div class="card">
										<div class="card-body" style="min-height: 375px;">
											<div class="d-flex align-items-center position-relative mb-7">
												<!--begin::Label-->
												<div class="position-absolute top-0 start-0 rounded h-100 bg-secondary w-4px"></div>
												<!--end::Label-->
												<!--begin::Details-->
												<div class="fw-semibold ms-5">
													<a href="#" class="fs-5 fw-bold text-dark text-hover-primary">Uploading Campaign</a>
													<!--begin::Info-->
													<div class="fs-7 text-muted">Please carefully read the following Terms and Conditions</div>
													<!--end::Info-->
												</div>
												<!--end::Details-->

											</div>
											<form class="add_new_form" action="{{route('admin.campaign.add-new')}}" method="post" enctype="multipart/form-data">
												@csrf
												<div class="form-group">
													<div class="row">
														<div class="col-md-6 form-group">
															<button type="button" class="btn btn-primary" id="btnfile">
															<!--begin::Svg Icon | path: icons/duotune/files/fil018.svg-->
															<span class="svg-icon svg-icon-2">
																<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																	<path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor"></path>
																	<path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM16 11.6L12.7 8.29999C12.3 7.89999 11.7 7.89999 11.3 8.29999L8 11.6H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H16Z" fill="currentColor"></path>
																	<path opacity="0.3" d="M11 11.6V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H11Z" fill="currentColor"></path>
																</svg>
															</span>
															<!--end::Svg Icon-->Upload Contract</button>
															<span id="fname"></span>


															<div class="wrapper" style="display:none;">
																<input type="file" id="uplodfile" name="contractfile" />
															</div>
															<br>
															<div class="col-md-12 form-group" style="margin-top:20px;">
																<input type="checkbox" name="terms_conditions" onchange="document.getElementById('sendNewContract').disabled = !this.checked;"> <span>I have read and agree to <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_terms">terms and conditions</a></span>
															</div>


														</div>


														<div class="col-md-6 form-group d-flex justify-content-end" style="max-height:45px;">
															<div class="row row-cols-lg-2 g-10">


																<div class="col">
																	<div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
																		<!--begin::Label-->
																		<label class="fs-6 fw-semibold mb-2 required">Campaign Start Date</label>
																		<!--end::Label-->
																		<!--Date picker -->
																		<input class="form-control form-control-solid startdate input dateSelect" type="text" name="start_date" readonly="readonly">
																	</div>
																</div>
																<div class="col" data-kt-calendar="datepicker">
																	<div class="fv-row mb-9">
																		<!--begin::Label-->
																		<label class="fs-6 fw-semibold mb-2">Campaign End Date</label>
																		<!--end::Label-->
																		<!--Date picker -->
																		<input class="form-control form-control-solid enddate input dateSelect" type="text" name="end_date" readonly="readonly">
																	</div>
																</div>

																<div class="col">
																	<div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
																		<!--begin::Label-->
																		<label class="fs-6 fw-semibold mb-2 required">Campaign Name</label>
																		<!--end::Label-->
																		<!--begin::Input-->
																		<input class="form-control form-control-solid" name="contract_name" placeholder="Campaign Name" id="contract_name" type="text">
																		<!--end::Input-->
																	<div class="fv-plugins-message-container invalid-feedback"></div></div>
																</div>																<div class="col">
																	<div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
																		<!--begin::Label-->
																		<label class="fs-6 fw-semibold mb-2 required">Campaign Category</label>
																		<!--end::Label-->
																		<!--begin::Input-->
																		<input class="form-control form-control-solid" name="contract_category" placeholder="Campaign Category" id="contract_category" type="text">
																		<!--end::Input-->
																	<div class="fv-plugins-message-container invalid-feedback"></div></div>
																</div>

															</div>
														</div>

														<div class="col-md-12 form-group justify-content-end" style="max-height:45px;">
															<button type="submit" class="btn btn-primary px-4" id="sendNewContract" disabled>{{\App\CPU\translate('Submit')}}</button>
														</div>


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


									<!--begin::Modal - Upload File-->
									<div class="modal fade" id="kt_modal_terms" tabindex="-1" aria-hidden="true">
										<!--begin::Modal dialog-->
										<div class="modal-dialog modal-dialog-centered mw-650px">
											<!--begin::Modal content-->
											<div class="modal-content">
												<!--begin::Form-->
												<form class="form" action="none" id="kt_modal_upload_form">
													<!--begin::Modal header-->
													<div class="modal-header">
														<!--begin::Modal title-->
														<h2 class="fw-bold">Terms and Conditions</h2>
														<!--end::Modal title-->
														<!--begin::Close-->
														<div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
															<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
															<span class="svg-icon svg-icon-1">
																<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																	<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
																	<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
																</svg>
															</span>
															<!--end::Svg Icon-->
														</div>
														<!--end::Close-->
													</div>
													<!--end::Modal header-->
													<!--begin::Modal body-->
													<div class="modal-body pt-10 pb-15 px-lg-17">
														<!--begin::Input group-->
														<div class="form-group">

														</div>
														<!--end::Input group-->
													</div>
													<!--end::Modal body-->
												</form>
												<!--end::Form-->
											</div>
										</div>
									</div>
									<!--end::Modal - Upload File-->

</div>
@endsection

@push('script')
	<script src="{{asset('assets')}}/js/custom/apps/file-manager/list.js"></script>
	<script src="{{asset('assets')}}/js/widgets.bundle.js"></script>
	<script src="{{asset('assets')}}/js/custom/widgets.js"></script>
	<script src="{{asset('assets')}}/js/custom/apps/chat/chat.js"></script>
	<script src="{{asset('assets')}}/js/custom/utilities/modals/upgrade-plan.js"></script>
	<script src="{{asset('assets')}}/js/custom/utilities/modals/create-app.js"></script>
	<script src="{{asset('assets')}}/js/custom/utilities/modals/users-search.js"></script>
	<script src="{{asset('assets')}}/js/bootstrap-datepicker.min.js"></script>
	<script>
	$("#btnfile").click(function () {
		$("#uplodfile").click();
	});

	$("#uplodfile").change(function () {
		var file=$(this).val().replace(/C:\\fakepath\\/ig,'');

		$("#fname").text(file);
	});

    //datepicker$('.datepicker').datepicker();
        rtl = false;
    if( $('.startdate').length > 0 ){
        $('.startdate').datepicker({
            language: rtl ? 'ar' : 'en',
            //startDate:'tomorrow',
            clearBtn:true,
            autoclose: true,
        });
        $('.startdate').datepicker('update', 'tomorrow');
    }
    if( $('.enddate').length > 0 ){
        $('.enddate').datepicker({
            language: rtl ? 'ar' : 'en',
            //startDate:'tomorrow',
            clearBtn:true,
            autoclose: true,
        });
        $('.enddate').datepicker('update', 'tomorrow');
    }

  
	</script>

@endpush