@extends('backend.amainlayout')
@section('title', 'RERF-Admin')
@section('maincontrol')
@if (session()->has('user'))
    <div class="content-body">
      
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <!--Card Header-->
                            <div class="card-header text-center">
                                <button type="button" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#addImageModal" title="Edit" data-placement="top">Add Image</button>
                               

                                @if (Session::has('msg'))
                                    <p class="text-danger text-center pt-5">{{ session('msg') }}</p>
                                @endif
                                @if (count($errors) > 0)
                                <div class="row justify-content-md-center pt-2">
                                    <div class="alert alert-danger text-center">
                                        <strong>Whoops!</strong> There were some problems with your input file.<br>image dimensions(Ratio 400/243)<br>
                                        <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                        </ul>
                                    </div>
                                </div>    
                                
                                @endif
                               
                            </div>
                            <!--ADD-->
                            <div class="modal fade bd-example-modal-lg" id="addImageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Add Image</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row justify-content-md-center">
                                                <div class="col-lg-12">
                                                    <form action="/addPageImage" method="POST" enctype="multipart/form-data">
                                                    @csrf
                                                    
                                                    <div class="basic-form">
                                                        <div class="card  m-0">
                                                            <div class="card-header text-center">
                                                               
                                                                <div class="row pt-2 justify-content-md-center">
                                                                    <div class="upload-btn-wrapper">
                                                                        <button class="btn">Upload a file</button>
                                                                        <input type="file" name="image" required />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="card-body p-2">
                                                                <div class="form-row">
                                                                    <div class="form-group col-md-6">
                                                                        <label>Display Image</label>
                                                                        <select id="inputState" class="form-control" name="disp_section"  required> 
                                                                            <option  value="" selected>  Choose...  </option> 
                                                                            <option value="hhs">Home Head Section</option>                                                                                             
                                                                            <option value="hbs">Home Body Section</option>
                                                                            <option value="sbs">Subpage Body Section</option>
                                                                        </select>
                                                                    </div>
                                                                    <div  class="form-group col-md-6 ">
                                                                        <label for="inputState">Show Now</label>                                                     
                                                                        <select id="inputState" class="form-control" name="status"  required> 
                                                                            <option  value="" selected>  Choose...  </option> 
                                                                            <option value="Yes">Yes</option>                                                                                             
                                                                            <option value="No">No</option>
                                                                        </select>
                                                                    </div> 
                                                                                                
                                                                </div>
                                                                <div class="form-row justify-content-md-center">
                                                                    <div class="form-group">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input"  type="checkbox" required>
                                                                            <label class="form-check-label">Check me out</label>
                                                                        </div>                                                                                         
                                                                    </div>
                                                                </div>
                                                                <div class="form-row justify-content-md-center p-2">
                                                                    <button type="submit" class="btn btn-dark">Add</button>                                                                               
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Card Header-->
                            <div class="card-body pt-0">
                                <!-- End Row -->
                <div class="row">
                    <div class="col-12 m-b-30">
                        
                        <div class="row">
                           @foreach ($pageImages as $item)                            
                            <div class="col-md-6 col-lg-3">
                                <div class="card">
                                    <img class="img-fluid" src="/upload/image/home_header/{{$item['link']}}" alt="">
                                    <div class="card-body p-2">
                                        @if($item['disp_section']=='hhs')
                                        <h5 class="card-title">Home Head Section</h5>
                                        @endif
                                        @if($item['disp_section']=='hbs')
                                        <h5 class="card-title">Home Body Section</h5>
                                        @endif
                                        @if($item['disp_section']=='sbs')
                                        <h5 class="card-title">Subpage Body Section</h5>
                                        @endif                            
                                        
                                    </div>
                                    <div class="card-footer p-2">
                                        <p class="card-text d-inline"><small class="text-muted">Last updated 3 mins ago</small>
                                        </p><a href="/deletePageImage/{{ Crypt::encryptString($item['id']) }}" class="card-link float-right"><small>Delete Image</small></a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            <!-- End Col -->
                            
                        </div>
                    </div>
                </div>
                <!-- End Row -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
       
    </div>
@endif    
@endsection