@extends('Admin.Layout.main_layout')
@section('main_container')
<!-- begin app-main -->
<div class="app-main" id="main">
   <!-- begin container-fluid -->
   <div class="container-fluid">
      <!-- begin row -->
      <div class="row">
         <div class="col-md-12 m-b-30">
            <!-- begin page title -->
            <div class="d-block d-sm-flex flex-nowrap align-items-center">
               <div class="page-title mb-2 mb-sm-0">
                  <h1>Manage Event Images</h1>
               </div>
               <!-- <div class="ml-auto d-flex align-items-center">
                  <a class="btn btn-secondary" href="{{ route('addGallery') }}">Add Gallery</a>
               </div> -->
            </div>
            <!-- end page title -->
         </div>
      </div>

      <div class="row mb-2">
             <div class="col-12 droupzone">
             <form action="{{ route('saveeventimage', $event_id) }}" class="dropzone" id="my-awesome-dropzone">
             @csrf
            </form>

        </div>
    </div>
      <!-- end row -->
      <!-- begin row -->
      <div class="row editable-wrapper">
         <div class="col-lg-12 ">
            <div class="card card-statistics">
               <div class="card-body">
                  <div class="table-responsive">
                     <table id="table" class="table display responsive nowrap table-light table-bordered">
                        <thead class="thead-light">
                           <tr>
                              <th scope="col">id</th>
                              <th scope="col">Image Path</th>
                              <th scope="col">Image</th>
                              <th class="text-right">Actions</th>
                           </tr>
                        </thead>
                        <tbody>
                           @if(!$event_arr->isEmpty())
                           @foreach($event_arr as $key => $data)
                           <tr>
                              <th style="width:25px" scope="row">{{ ($key+1) }}</th>
                              <td><div class="copy-td"><input class="linkToCopy w-100 form-control" value="{{ ('/admin/public/public/upload/event') }}/{{ $data->image }}" readonly=""></div>

                                <form action="{{ route('event.update_alt', $data->event_image_id) }}" method="post" enctype="multipart/form-data">
                                       @csrf
                                       <div class="col-6">
                                          <div class="form-group">
                                             <label for="exampleInputEmail1">Alt Tag</label>
                                             <input type="text" class="form-control" placeholder="Enter Alt Tag" name="alt_tag" value="{{ $data->alt_tag }}">
                                          </div>
                                       </div>
                                       <div class="col-6">
                                          <button type="submit" class="btn btn-primary" name="submit" value="Send">Submit</button>
                                       </div>
                                </form>

                              </td>
                              <td style="width:120px"><img src="{{ URL('public/upload/event') }}/{{ $data->image }}" alt="" height="100px" width="100px"></td>
                              <td class="text-left" style="width:25px">
                                 <div class="actions">

                                    <a  href="javascript:void(0)" data-delete_url="{{url('eventimage/delete/'.$data->event_image_id)}}"   class="btnDelete btn btn-sm bg-danger-light">
                                    <i class="fe fe-trash" style="font-size: 2em;"></i>
                                    </a>
                                 </div>
                              </td>
                           </tr>
                           @endforeach
                           @else
                           <p class="text-danger mt-2" style="padding-left:450px;">No Event Available</p>
                           @endif
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- end row -->
   </div>
   <!-- end container-fluid -->
</div>
<!-- end app-main -->
</div>
<!-- end app-container -->
<script type="text/javascript">
	$( document ).ready(function() {
	  // Handler for .ready() called.
		$('.copy-td').click(function(){
		    $(this).find('input.linkToCopy').select();
		    document.execCommand("copy");
		});
	});
</script>
@endsection