@extends('layouts.admin.admin')

@section('script')
     <!-- BEGIN PAGE LEVEL CUSTOM SCRIPTS -->
     <script src="{{ url('assets/js/scrollspyNav.js') }}"></script>
     <script>
        checkall('todoAll', 'todochkbox');
        $('[data-toggle="tooltip"]').tooltip()
     </script>
     <!-- END PAGE LEVEL CUSTOM SCRIPTS -->
@endsection


@section('head')
       <!-- BEGIN PAGE LEVEL CUSTOM STYLES -->
       <link href="{{ url('assets/css/scrollspyNav.css') }}" rel="stylesheet" type="text/css" />
       <link rel="stylesheet" type="text/css" href="{{ url('assets/css/forms/theme-checkbox-radio.css') }}">
       <link href="{{ url('assets/css/tables/table-basic.css') }}" rel="stylesheet" type="text/css" />
       <!-- END PAGE LEVEL CUSTOM STYLES -->
@endsection

@section('content')
    <!--  BEGIN CONTENT AREA  -->
    <div id="content" class="main-content">
        <div class="container">
           <div class="container">
           <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
           <input type="hidden" name="selected_sponsor" id="selected_sponsor" value="">

             
              <div class="row layout-top-spacing">
                 
                 <div id="tableHover" class="col-lg-12 col-12 layout-spacing">
                    <div class="statbox widget box box-shadow">
                       <div class="widget-header">
                          <div class="row">
                             <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                <h4>Sponsors <button data-toggle="modal" data-target="#createSponsorModal" class="btn btn-primary btn-sm float-right">Create</button></h4>
                             </div>
                          </div>
                       </div>
                       <div class="widget-content widget-content-area">
                          <div class="table-responsive">
                            @include('layouts.admin.alerts')

                            @if (count($sponsors)>0)
                                <table class="table table-bordered table-hover mb-4">
                                   <thead>
                                      <tr>
                                          <th width="5%">#</th>
                                          <!-- <th width="9%">Name</th> -->
                                          <th width="9%">Image</th>
                                          <th width="9%">Link</th>
                                          <!-- <th width="9%">Description</th>
                                          <th width="9%">Intro</th>
                                          <th width="9%">CoverImage</th>
                                          <th width="9%">CoverImage1</th>                                     
                                          <th width="9%">CoverImage2</th>                                     
                                          <th width="9%">CoverImage3</th>                                      -->
                                          <th width="13%" colspan="2" style="text-align:center">Action</th>
                                      </tr>
                                   </thead>
                                   <tbody>
                                      @foreach ($sponsors as $item)
                                      <tr>

                                       <td>{{ $no++ }}</td>
                                       <!-- <td>{{ $item->name }}</td> -->
                                    
                                     
                                       <td>
                                          @if($item->image_path !=="text")
                                       
                                             <a href="{{ $item->image_path }}" target="_blank"><img style="max-width: 100px" src="{{ $item->image_path }}"></a>

                                          @else
                                             <small style="color:#EDE04D"> No-Image-to-display </small>
                                          @endif
                                       </td>
                                       <td>
                                       {{ $item->link }}
                                       </td>
                                      
                                       <td>
                                          <button onclick="editSelectedSponsor('{{ stripslashes(json_encode($item)) }}')" class="btn btn-warning btn-sm " style="">Edit</button>
                                          
                                       </td>
                                       <td> 
                                              <button class="btn btn-danger btn-sm " style="" onclick="deleteSelectedSponsor('{{$item->id}}')">Delete</button>
                                       </td>
                                   </tr> 
                                      @endforeach
                                   </tbody>
                                </table>
                            @else
                                No Sponsors Added Yet
                            @endif
                         </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div>
     <!--  END CONTENT AREA  -->
@endsection

  <!-- CReate sponsor Modal -->
  <div class="modal fade" id="createSponsorModal">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Create Sponsor</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">

                          <div class="row">
                                <div class="col-lg-6 col-6 " style="margin-top:0px">
                                        <div class="custom-file-container" data-upload-id="Imagepreview1">

                                             <a href="javascript:void(0)" style="float: right" id="sponsor_logo_clear_image" class="custom-file-container__image-clear" title="Clear Image">Clear Image
                                             <i class="fa fa-times text-danger" aria-hidden="true"></i></a>
                                             <label class="custom-file-container__custom-file" >
                                                   <input type="file" onchange="checkResolution()" class="custom-file-container__custom-file__custom-file-input add_sponsor" placeholder="Logo-Image"  id="sponsor_logo_image"  name="sponsor_logo_image" accept="image/*" >
                                                   <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                                   <span class="custom-file-container__custom-file__custom-file-control"></span>
                                             </label>
                                             <div class="custom-file-container__image-preview"></div>
                                             <span id="error_sponsor_logo_image" ></span>


                                        </div>
                                        <p style="float: left">Upload logo Image :<span style="color:#EDE04D"> ( Standard image resolution to be used :  approx 100*100 ) </span> </p>

                                       

                                    </div>

                                    <div class="col-lg-6 col-6 "  style="margin-top:20px" >
                                        <div class="form-group">
                                           
                                            <input  type="text" name="sponsor_link" id="sponsor_link" placeholder="Link" class="form-control noSpace add_sponsor" value="" >

                                             <span id="error_sponsor_link" ></span>
                                        </div>
                                        <p style="float: left;color:#EDE04D"> ( Standard link format: https://google.co.in )  </p>


                                       
                                    </div>
                              </div>
           
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="addSponsor('main')" >Add</button>

          <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetSponsorModal()">Close</button>
        </div>
        
      </div>
    </div>
  </div>

  <!-- end of create sponsor modal -->

  <!-- edit sponsor Modal -->
  <div class="modal fade" id="editSponsorModal">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Edit Sponsor</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">

                               <div class="row">
                                <div class="col-lg-6 col-6 " style="">
                                       <div class="custom-file mb-4" style="cursor:pointer">
                                            <input type="file" onchange="checkResolution()" class="custom-file-input" id="edit_sponsor_logo_image" name="edit_sponsor_logo_image"   style="cursor:pointer">
                                            <label class="custom-file-label" for="customFile" style="cursor:pointer">Choose logo file  :<span style="color:#EDE04D"> ( Standard image resolution to be used : 100 X 100 ) </span></label>
                                            <br><br>
                                            <img src="" id="edit_sponsor_img_prev" style="margin-top:20px;max-width: 100%" alt="">
                                        </div>

                                        <span id="error_edit_sponsor_logo_image" ></span>

                                    </div>

                                    <div class="col-lg-6 col-6 "  style="margin-top:" >
                                        <div class="form-group">
                                            <input  type="text" name="edit_sponsor_link" id="edit_sponsor_link" placeholder="Link" class="form-control noSpace edit_sponsor " value="" >
                                            <small class="text-danger"></small>
                                        </div>

                                        <p style="float: left;color:#EDE04D"> ( Standard link format: https://google.co.in )  </p>

                                       <span id="error_edit_sponsor_link" ></span>


                                       
                                    </div>
                              </div>
           
           
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
        <button type="button" class="btn btn-success" onclick="updateSponsor('main')" >Update</button>

        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetSponsorModal()">Close</button>
        </div>
        
      </div>
    </div>
  </div>

  <!-- end of edit sponsor modal -->
  <script>
           edit_sponsor_logo_image.onchange = evt => {
           const [file] = edit_sponsor_logo_image.files
            if (file) {
               edit_sponsor_img_prev.src = URL.createObjectURL(file)
            }
       }
 
     </script>