@extends('layouts.backend.app')

@section('title')
    {{$title}}
@stop

@push('css')

@endpush

@section('content')
<div class="bg-title">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6"> 
            <h4 class="box-title">{{$title}}</h4>
        </div>
        {{-- <div class="col-lg-6 col-sm-6 col-md-6 text-right">
            <button data-toggle="modal" data-target="#create" class="btn btn-primary btn-xs">{{$title}} Posting</button>
        </div> --}}
        <!-- Create Modal -->
        <!-- Create Modal -->
        <div class="modal fade" id="create" role="dialog">
          <div class="modal-dialog">
          
            <!--Add Modal content-->
            <div class="modal-content">
             <form action="{{ route('admin.banner.store') }}" method="POST" enctype="multipart/form-data" >
                 @csrf

              <div class="modal-header">
                <h4 class="modal-title">Add Banner </h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                    <label>Image </label>
                    <div>                      
                        <input type="file" required name="image" id="banner Image" value="">
                    </div>
                </div>

                <div class="form-group">
                    <div>
                      <label for="link">Link</label>
                    </div>
                    <div>
                        <input type="text" class="form-control" name="link" value=""  placeholder="Link">
                    </div>
                </div>

                <div class="form-group">
                    <div>
                      <label for="link">Serial</label>
                    </div>
                    <div>
                        <input type="number" class="form-control" name="serial" value="0" min="0" placeholder="Serial">
                    </div>
                </div>

                <div class="form-group">
                    <div>
                      <label for="link">Position <i class="text-danger">*</i></label>
                    </div>
                    <div>
                        <select name="position" required class="form-control" id="">
                          <option value="">Select One</option>
                          <option value="Full">Full Width: 1200px</option>
                          <option value="Left">Left Width: 600px</option>
                          <option value="Right">Right Width: 600px</option>
                          <option value="Slider">Slider Width: 250px</option>
                        </select>
                    </div>
                </div>

              </div>
              <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-xs">SUBMIT</button>
                                                                              
              </div>
            </form>
            </div>
            
          </div>
        </div> {{-- model end --}}
    </div>
    <!-- /.col-lg-12 -->
</div>

<div class="mb-4">
    <div class="white-box">
        <div class="table-responsive">
              <table class="table table-bordered">
                  <thead>
                  <tr>
                      <th width="5%">SL</th>
                      <th width="30%">Banner image</th>
                      <th width="40%">Link</th>
                      <th width="15%">Position</th>
                      <th width="10%">Serial</th>
                      <th width="10%" class="text-center">Action</th>
                  </tr>
                  </thead>
                  <tbody>
                      @foreach($banners as $key=>$banner)
                          <tr>
                              <td>{{ $key + 1 }}</td>
                              <td>
                                <img class="img-responsive" width="200px" height="140px"  style="border-radius: 2px;" src="{{ Storage::disk('public')->url($banner->image) }}" alt="">
                              </td>
                              <td>{{ $banner->link }}</td>
                              <td>{{ $banner->position }}</td>
                              <td>{{ $banner->serial }}</td>
                              <td class="text-center">
                                  <!-- Trigger the edit modal with a button -->
                                    <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#edit_{{$key}}"><i class="fa fa-pencil"></i></button>

                                  {{-- <button class="btn btn-danger btn-xs" type="button" onclick="deleteData({{ $banner->id }})">
                                      <i class="fa fa-trash"></i>
                                  </button> --}}
                                  <form id="delete-form-{{ $banner->id }}" action="{{ route('admin.banner.destroy',$banner->id) }}" method="POST" style="display: none;">
                                      @csrf
                                      @method('DELETE')
                                  </form>
                              </td>
                          </tr>

            <!-- edit Modal -->
            <div class="modal fade" id="edit_{{$key}}" role="dialog">
              <div class="modal-dialog">
              
                <!--Edit Modal content-->
                <div class="modal-content">
                 <form action="{{ route('admin.banner.update',$banner->id) }}" method="POST" enctype="multipart/form-data" >
                    @csrf
                    @method('PUT')

                  <div class="modal-header">
                    <h4 class="modal-title">Edit Banner </h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>
                  <div class="modal-body">

                    <div class="form-group">
                        <div>
                          <img class="img-responsive" width="200px" height="150px;"  style="border-radius: 2px;" src="{{ Storage::disk('public')->url($banner->image) }}" alt="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Image </label>
                        <div>
                            <input type="file" name="image" id="banner Image" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <div>
                          <label for="link">Link</label>
                        </div>
                        <div>
                            <input type="text" class="form-control" name="link" value="{{ $banner->link }}"  placeholder="Link">
                        </div>
                    </div>

                    <div class="form-group">
                        <div>
                          <label for="link">Serial</label>
                        </div>
                        <div>
                            <input type="number" class="form-control" name="serial" value="{{ $banner->serial }}" min="0" placeholder="Serial">
                        </div>
                    </div>

                    <div class="form-group">
                        <div>
                          <label for="link">Position <i class="text-danger">*</i></label>
                        </div>
                        <div>
                            <select name="position" required class="form-control" id="">
                              <option value="">Select One</option>
                              <option @if ($banner->position == "Full")
                                selected 
                              @endif value="Full">Full Width: 1200px</option>
                              <option @if ($banner->position == "Left")
                                selected 
                              @endif value="Left">Left Width: 600px</option>
                              <option @if ($banner->position == "Right")
                                selected 
                              @endif value="Right">Right Width: 600px</option>

                              <option @if ($banner->position == "Slider")
                                selected 
                              @endif value="Slider">Slider Width: 250px</option>
                            </select>
                        </div>
                    </div>

                  </div>
                  <div class="modal-footer">
                        <button type="submit" class="btn btn-primary m-t-15 waves-effect">UPDATE</button>
                                                                                  
                  </div>
                </form>
                </div>
                
              </div>
            </div> {{-- model end --}}

                      @endforeach
                  </tbody>
              </table>
        </div>
    </div>
</div>

    
@endsection

@push('js')
<script src="{{ asset('js/sweetalert2.all.js') }}"></script>

<script type="text/javascript">
    function deleteData(id) {
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!',
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: false,
            reverseButtons: true
        }).then((result) => {
            if (result.value) {
                // event.preventDefault();
                document.getElementById('delete-form-'+id).submit();
            } else if (
                // Read more about handling dismissals
                result.dismiss === swal.DismissReason.cancel
            ) {
                swal(
                    'Cancelled',
                    'Your data is safe :)',
                    'error'
                )
            }
        })
    }
</script>
@endpush