@extends('layouts.admin.main')
@section('title','Banner')
@section('style')
<link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">

@endsection
@section('rightbar-content')

<div class="breadcrumbbar">
  <div class="row align-items-center">
    <div class="col-md-8 col-lg-8">
      <h4 class="page-title">Banner</h4>
      <div class="breadcrumb-list">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{url('/')}}">{{ __('adminWords.home') }}</a></li>
          <li class="breadcrumb-item"><a href="#">{{ __('Banner') }}</a></li>
        </ol>
      </div>
    </div> 
  </div>          
</div>

<div class="contentbar">
       <div class="row">
              <div class="col-md-12">
                    <div class="card-header">    
                            <div class="text-right">   
                                <button class="btn btn-primary" data-toggle="modal" data-target="#bannermodal">Create Banner</button>
                            </div>                                 
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h5 class="card-title mb-0">All Banners</h5>
                                </div>
                            </div>
                        </div>
              </div>

              <table class="table mt-10" id="bannertbl">
                     <thead>
                           <tr>
                               <th>S.No</th>
                               <th>Banner Image</th>
                               <th>Created At</th>
                           </tr>
                     </thead>
                     <tbody>
                           @if(!empty($banner))
                           @foreach($banner as $key => $v)
                              <tr>
                                   <td>{{ $key + 1  }}</td>
                                   <td><img src="{{ asset('images/sites/'.$v->value) }}" style="width: 500px;"></td>
                                   <td>{{ $v->created_at  }}</td>
                              </tr>
                        @endforeach
                        @endif
                     </tbody>
              </table>
       </div>
</div>



        <!-- Modal -->
        <div class="modal fade" id="bannermodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                   <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Banner</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form action="{{url('banner/save')}}" method="post" enctype="multipart/form-data">
                                @csrf
                            <div class="modal-body">
                                  <div class="row">
                                         <div class="col-md-3">
                                                <label for="Bannerimage">Banner Image <sup>*</sup></label>
                                         </div>

                                         <div class="col-md-7">
                                                 <input type="file" class="form-control" name="image" id="Bannerimage" required>
                                         </div>
                                  </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                            </form>
                    </div>
            </div>
        </div>
@endsection

@section('script')

<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>      
    <script src="{{ asset('assets/js/mrcls-custom.js') }}"></script>  
    

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.buttons.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

        <script>

$(document).ready(function () {
    $('#bannertbl').DataTable({
        "lengthChange":false,
        "searching":false,
    });
});
                // $('#Bannerimage').on('change', function() {
                // var file = this.files[0];
                // var image = new Image();

                // image.onload = function() {
                //     var width = this.width;
                //     var height = this.height;

                //     if (width === 1080 && height === 1024) {
                //     // Image dimensions are valid
                //     console.log('Image dimensions are correct.');
                //     } else {
                //     // Image dimensions are not valid
                //     console.log('Image dimensions are incorrect. Please select an image with dimensions 1080x1024 pixels.');
                //     }
                // };

                // image.src = URL.createObjectURL(file);
                // });
        </script>
@endsection