@extends('frontend_template')
@section('content')
<main class="main-con">
		<section class="breadcrumb-con">
			<div class="container-fluid">
			<div class="row row-cols-1 row-cols-md-2">
				<div class="col align-self-center">
					<h5>All Audience Import List</h5>
				</div>
				<div class="col align-self-center">
					<div class="row justify-content-end g-2">
						<div class="col-auto align-self-center">
							 <a href="{{ isset($_GET) ? url('download_audience_import_format').'?'.http_build_query($_GET):''; }}" class="btn-sec pt-1 pb-1" title="Download Format">Download Audience Import Sample</a>
						</div>
						<div class="col-auto align-self-center">
							<a href="javascript.void(0)" data-bs-toggle="modal" data-bs-target="#upload-audiencemodal" class="btn-info pt-1 pb-1" title="Upload file to Import">Upload New Audience</a> 
						</div>
						<div class="col-auto align-self-center">
							<a href="{{ url('import-audience-in-db') }}" class="btn-warning pt-1 pb-1" title="Import All Uploaded File">Import in DB</a>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</section>
	
	<section>
		<div class="container-fluid">
			<div class="row">
				<div class="col-12 text-center"><h5 class="mt-4 mb-4">{{ status_error(); }}</h5></div>
			</div>
		</div>
	</section>
	<section>
		<div class="container-fluid">
			<div class="row">
				<div id="no-more-tables">
					<table class="col-md-12 table-bordered table-striped table-condensed cf bg-white">
						<thead class="cf">
							<tr>
								<th class="numeric bg-m p-2 pt-1 pb-1">Sr. No.</th>
								<th class="numeric bg-m p-2 pt-1 pb-1">Event</th>
								<th class="numeric bg-m p-2 pt-1 pb-1">Import Status</th>
								<th class="numeric bg-m p-2 pt-1 pb-1">Upload Date</th>
								<th class="numeric bg-m p-2 pt-1 pb-1">Upload By</th>
								<th class="numeric bg-m p-2 pt-1 pb-1">File</th>
								<th class="numeric bg-m p-2 pt-1 pb-1">Action</th>
							</tr>
						</thead>
						<tbody>
													</tbody>
					</table>
				</div>
			</div>
		</div>
	</section>
</main>

<div class="modal fade" id="upload-audiencemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bgcolor1 text-white">
          <h5 class="modal-title text-dark" id="exampleModalLabel">Upload Audience File</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form class="row form" id="uploadaudienceform" action="{{ url('upload_audience_file_to_import') }}" method="post" enctype= "multipart/form-data">
              @csrf
              <input type="hidden" name="data[event_key]" value="{{ $sess_event['unique_key'] }}">
              <input type="hidden" name="data[event_id]" value="{{ $sess_event['id'] }}">
              <div class="row">
                  <div class="col-md-12">
                      <div class="mb-3">
                          <label for="file">File</label>
                          <input type="file" class="form-control" id="file" name="file">
                      </div>
                  </div>
              </div>
              <div class="row">
                  <div class="col-auto text-end">
                      <button type="submit" class="btn-info pt-2 pb-2 p-5">{{isset($mode) && $mode == 'update' ? 'Update' : 'Save'}}</button>
                  </div>
              </div>
          </form>
        </div>
        <!-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div> -->
      </div>
    </div>
  </div>
<script>
    document.getElementById("idOfButton").onclick = function() {
        this.disabled = true;
    }
    function attendance_change(urls, id)
    {
        $.ajax({
            url:urls,
            type: "get",
            success:function(result){
                alert('Attendance Recorded');
                $("#attendance-p"+id).text('');
                $("#attendance-p"+id).removeAttr('onclick');
                $("#attendance-p"+id).html('<i class="fa fa-check fa-2x" title="Active Event"></i>');
            },
            error:function(err){
                alert('Could not Mark Present');
                console.log(err);
            }
        });
    }

    $(document).ready(function(){
        $("#uploadaudienceform").validate({
           rules:
           {
                'file':{
                  required: true,
                  extension: "csv",
                }
           }, 
           errorElement: 'p',
           errorPlacement: function (error, element) {
           error.insertAfter(element);
           }
        });
    });
</script>
@endsection