@extends('admin.includes.master')

@section('content')

  <div class="header bg-primary pb-0">
    <div class="container-fluid">
      <div class="header-body">
        <div class="row align-items-center py-2">
          <div class="col-lg-6 col-7">
            <h6 class="h4 text-white d-inline-block mb-0">Advertisement</h6>
          </div>
          <div class="col-lg-6 col-5 text-right">
            <button class="btn btn-icon btn-default btn-sm" type="button"  class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            	<i class="fas fa-plus-circle"></i> Add
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="exampleModalLabel">Add Advertise</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form action="{{ url('admin/Advertise/add')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="row">
                      <div class="col-md-7">
                        <div class="row">
                          <div class="col-md-4">
                            <p class="p-0 m-0" style="font-size:15px;font-weight:600">Title :</p>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                              <input type="text" class="form-control form-control-sm input_text character" id="title" name="title"  autocomplete="off"  placeholder="Title" required>
                            </div>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-md-4">
                            <p class="p-0 m-0" style="font-size:15px;font-weight:600">Image :</p>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                              <label for="img" class="custom-file-upload">Image</label>
                              <input type="file"  id="img" name="img" onchange="document.getElementById('preview').src = window.URL.createObjectURL(this.files[0])">
                            </div>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-md-4">
                            <p class="p-0 m-0" style="font-size:15px;font-weight:600">Start Date :</p>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                              <input type="date" class="form-control form-control-sm input_text date" id="start_date" name="start_date"  autocomplete="off"  required >
                            </div>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-md-4">
                            <p class="p-0 m-0" style="font-size:15px;font-weight:600">End Date :</p>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                              <input type="date" class="form-control form-control-sm input_text date" id="end_date" name="end_date"  autocomplete="off"  required >
                            </div>
                          </div>
                        </div>


                        <div class="row">
                          <div class="col-md-4">
                            <p class="p-0 m-0" style="font-size:15px;font-weight:600">To Show :</p>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                              <select class="form-control form-control-sm" name="page[]" id="page" multiple required>
                                <option value="index">INDEX</option><option value="yojna">YOJNA</option><option value="search">SEARCH</option>                              </select>
                              <small class="text-red">Use CTRL + option for multiple selection</small>
                            </div>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-md-4">
                            <p class="p-0 m-0" style="font-size:15px;font-weight:600">Link :</p>
                          </div>
                          <div class="col-md-8">
                            <div class="form-group">
                              <input type="text" class="form-control form-control-sm" name="link" id="link">
                              <small class="text-red">copy and paste link from website</small>
                            </div>
                          </div>
                        </div>

                      </div>
                      <div class="col-md-5">
                        <img id="preview" style="height:100%;width:100%">
                      </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Add</button>
                  </form>
                  </div>
                </div>
              </div>
            </div>

      <div class="container">
        <div class="flash-message">
            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
              @if(Session::has('alert-' . $msg))
                  <p class="alert alert-{{ $msg }}" style="color:#ffff;">{{ Session::get('alert-' . $msg) }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>
                  {{ session()->forget('alert-' . $msg) }}
                @endif
              @endforeach
        </div> <!-- end .flash-message -->

        <div class="card card-body">
            <div class="table-responsive pt-2">
              <table class="table align-items-center" id="users">
                <thead class="thead-light">
                  <th  scope="col" class="p-1">Sr No</th>
                  <th  scope="col" class="p-1">Image</th>
                  <th  scope="col" class="p-1">Title</th>
                  <th  scope="col" class="p-1">Start Date</th>
                  <th  scope="col" class="p-1">End Date</th>
                  <th  scope="col" class="p-1">Page</th>                  
                  <th  scope="col" class="p-1">Link</th>
                  <th  scope="col" class="p-1">Options</th>
                </thead>
                <tbody>

                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!-- ***************************************** EDIT MODAL ************************************************* -->
        <div class="modal" id="Edit_Modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-lg " role="document">
            <div class="modal-content">
              <div class="modal-header bg-gradient-primary">
                <h5 class="modal-title text-white" id="">Edit Advertise</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <form action="{{ url('admin/Advertise/update')}}" method="post" enctype="multipart/form-data">
              {{ csrf_field() }}
                <div class="modal-body pb-0" id="Edit_Modal_Body">
                </div>
                <div class="modal-footer mt-0 pt-2">
                  <button type="submit" class="btn btn-primary btn-sm" >Update</button>
                  <button type="button" class="btn btn-warning btn-sm" data-dismiss="modal">Close</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        
     
@endsection

@section('script')
<script type="text/javascript">
// $(document).ready(function() {
// $('#img1').on('change','select',function(){
//   alert("Changed");
//   });
// });

$(document).ready(function() {
$.ajaxSetup({
     headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
 });
$('#users').DataTable({
      processing: true,
      serverSide: true,
      language: {
        paginate: {
          next: '&#8594;', // or '→'
          previous: '&#8592;' // or '←'
        }
      },
      columnDefs: [{
                targets: '_all',
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css('padding', '3px')
                }
            }],
      ajax: {
          url:"{{ url('admin/Advertise/get_table') }}",
          type: 'GET',
          data: function (d) {
          d.search_batch = $('#search_batch').val();
          d.search_course = $('#search_course').val();
          d.search_extra = $('#search_extra').val();
       }
      },
      columns: [
                {data: 'index', orderable: false, searchable: false,},
                {data: 'file', name: 'file',  render: function( data)
                   {
                     return data;
                   }
                 },
                {data: 'title', name: 'title', },
                {data: 'start_date', name: 'start_date', },
                {data: 'end_date', name: 'end_date', },
                {data: 'pages', name: 'pages', },
                {data: 'link', name: 'link', },
                {data: 'action', name: 'action',orderable: false, searchable: false,
                render: function( data)
                 {
                   return data;
                 }
              },
           ],
      });
    });
 function get_modal(id)
 {
   var json_data = { 'id': id};
   $.ajax({
       type: "GET",
       url: "{{ url('admin/Advertise/get_modal') }}",
       data: json_data,
       success: function (data)
       {
         $('#Edit_Modal_Body').html(data);
         $('#Edit_Modal').modal("show");
       }
     });
 }
 function deletee(id)
 {
   var json_data = { 'id': id};
   $.ajax({
       type: "GET",
       url: "{{ url('admin/Advertise/delete') }}",
       data: json_data,
       success: function (data)
       {
         if(data=='1')
         {
           $("#Success_Modal").modal('show');
           $("#Success_Modal_Msg").html('Advertise Deleted !!!');
           $("#users").DataTable().ajax.reload();
           clear();
         }else{
           $("#Error_Modal").modal('show');
           $("#Error_Modal_Msg").html("Opps ! We've got some error ");
         }
       }
     });
 }
</script>
@endsection