@extends('backend.layout.sidenav-layout')
@section('content')
<div class="container-fluid">
    @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
        @endif
    <form action="{{ route('gallary.save') }}" method="POST"  enctype="multipart/form-data">
        <div class="row">
            @csrf
            <div class="col-12 p-1">
                <label class="form-label" for="name">Name *</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Name">
            </div>
            <div class="col-12 p-1">
                <label class="form-label">Image(Max 4) *</label>
                <input type="file" class="form-control" id="image" name="image[]" multiple  accept="image/png, image/jpeg, image/jpg">
            </div>
            <br>
            <div class="text-center">
                <button type="submit" class="btn btn-sm  btn-success w-20 mt-2"  >Save</button>
            </div>
          
        </div>
    </form>
        <hr class="bg-secondary"/>
            <div class="table-responsive">
            <table class="table  table-flush" id="tableData">
                <thead>
                <tr class="bg-light">
                    <th>No</th>
                    <th>Name</th>
                    <th>Image1</th>
                    <th>Image2</th>
                    <th>Image3</th>
                    <th>Image4</th>
                  
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                    @forelse (get_setting_array('gallary') as $key=>$item )
                        @php
                            $data = json_decode($item->value,true);
                            // print_r($data);
                        @endphp
                        <tr>
                            <td>{{ ++$key }}</td>
                            <td>{{ $data['name'] }}</td>
                            <td><img src="{{ $data['image'][0]??'' }}" width="100px" height="100px" alt='n/a' ></td>
                            <td><img src="{{ $data['image'][1]??'' }}" width="100px" height="100px" alt='n/a' ></td>
                            <td><img src="{{ $data['image'][2]??'' }}" width="100px" height="100px" alt='n/a' ></td>
                            <td><img src="{{ $data['image'][3]??'' }}" width="100px" height="100px" alt='n/a'></td>
                            <td>
                                <a href="{{ route('gallary.remove',$item->id) }}">
                                    <button  onclick="return confirm('Are you Sure?')" class="btn btn-sm btn-outline-danger">Delete</button>
                                </a>
                            </td>
                        </tr>
                    @empty
                        {{-- <tr>
                            <td colspan="5"><h1 class="text-danger">No Data Found</h1></td>
                        </tr> --}}
                    @endforelse

                </tbody>
            </table>
            </div>
</div>
@endsection
@section('script')
<script>
     $("#image").on("change", function() {
        if ($("#image")[0].files.length > 4) {
            alert("You can select only 4 images");
            document.getElementById("image").value='';
        } else {
            //$("#imageUploadForm").submit();
        }
    });
    function validateFileType(){
        var fileName = document.getElementById("image").value;
            var idxDot = fileName.lastIndexOf(".") + 1;
            var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
            var allowedExt = ['jpg','jpeg','png'];
            if (allowedExt.indexOf(extFile) != -1 ){
                //successToast('File attachment completed');
            }else{
                errorToast('Only JPG,JPEG,PNG files are allowed');
                document.getElementById("image").value='';
                return;
              }   
        }
     
    $(document).ready(function(){
        new DataTable('#tableData',{
            order:[[0,'desc']],
            lengthMenu:[5,10,15,20,30]
        });
    });
    
</script>
@endsection