@extends('layout.default')
@section('title','Manage Gallery')
@section('title','Manage Partner Logo')
@section('style')
<style>
    .quote-imgs-thumbs {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  margin: 1.5rem 0;
  padding: 0.75rem;
}
.quote-imgs-thumbs--hidden {
  display: none;
}
.img-preview-thumb {
  background: #fff;
  border: 1px solid #777;
  border-radius: 0.25rem;
  box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
  margin-right: 1rem;
  max-width: 140px;
  padding: 0.25rem;
}
</style>
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header flex-wrap py-5">
        <div class="card-title">
            <h3 class="card-label">Gallery Image
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <button type="button" class="btn btn-primary font-weight-bolder" data-toggle="modal"
                data-target="#image_upload">
                Upload
            </button>
            @include('section.gallery.modal_upload')
            <!--end::Button-->
        </div>
    </div>
    <!--begin::Card body-->
    <div class="card-body border-top p-9">
        @include('layout.alerts.index')
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="gallery_datatable">
            <thead>
                <tr>
                    <th title="No" width="20">No</th>
                    <th title="Big image">Big Image</th>
                    <th title="Layout Type">Layout Type</th>
                    <th title="Total Image Square">Total Image Square</th>
                    <th title="Year">Year</th>
                    <th title="Action">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $value)
                <tr>
                    <td>{{ ++$key }}</td>
                    <td>
                       <img src="{{ $value->path }}" alt="" class="w-100px">
                    </td>
                    <td>{{ $value->type == 'big_left' ? 'Big Left' : 'Big Right' }}</td>
                    <td>{{ $value->image_squares_count }}</td>
                    <td>{{ $value->year }}</td>
                    <td>
                        <a href="{{ route('gallery.edit', $value->id) }}" class="btn btn-icon btn-sm btn-success" title="Show Logos">
                            <i class="flaticon2-edit"></i>
                        </a>
                        @if($value->image_squares_count == 0)
                        <a data-url="{{ route('gallery.destroy') }}" class="btn btn-icon btn-sm btn-danger" title="Delete Admin" data-id="{{ $value->id }}" onclick="deleteSweet(this)">
                            <i class="flaticon2-rubbish-bin"></i>
                        </a>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <!--end::Table-->
    </div>
</div>
<!--end::Card-->
@endsection
@section('script')
<script>
    var imgUpload = document.getElementById('upload_imgs')
  , imgPreview = document.getElementById('img_preview')
  , imgUploadForm = document.getElementById('img-upload-form')
  , totalFiles
  , previewTitle
  , previewTitleText
  , img;

imgUpload.addEventListener('change', previewImgs, false);
imgUploadForm.addEventListener('submit', function (e) {
  e.preventDefault();
  alert('Images Uploaded! (not really, but it would if this was on your website)');
}, false);

function previewImgs(event) {
  totalFiles = imgUpload.files.length;
  
  if(!!totalFiles) {
    imgPreview.classList.remove('quote-imgs-thumbs--hidden');
    previewTitle = document.createElement('p');
    previewTitle.style.fontWeight = 'bold';
    previewTitleText = document.createTextNode(totalFiles + ' Total Images Selected');
    previewTitle.appendChild(previewTitleText);
    imgPreview.appendChild(previewTitle);
  }
  
  for(var i = 0; i < totalFiles; i++) {
    img = document.createElement('img');
    img.src = URL.createObjectURL(event.target.files[i]);
    img.classList.add('img-preview-thumb');
    imgPreview.appendChild(img);
  }
}
</script>
<script type="text/javascript">
    $("#gallery_datatable").DataTable();
    function deleteSweet(e) {
        // CommonJS
        const url = $(e).data('url')
        const id = $(e).data('id')
        const csrf_token = $('meta[name="csrf-token"]').attr('content');
        Swal.fire({
            title: "Are you sure?",
            text: "You won\'t be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: '#a83232',
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.value) {
                $('#loading').show();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        '_method': 'POST',
                        '_token': csrf_token,
                        'id': id
                    },
                    success: function (response) {
                        $('#loading').hide();
                        if (response.status == false) {
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            }).then((result) => {
                                if (result.value) {
                                    $(location).attr('href',
                                        "{{ route('gallery.index') }}"
                                        );
                                }
                            });
                        }
                        if (response.status == true) {
                            Swal.fire("Success!", "Data has been deleted!", "success").then((
                                result) => {
                                    if (result.value) {
                                        $(location).attr('href',
                                            "{{ route('gallery.index') }}"
                                            );
                                    }
                                    $(location).attr('href',
                                        "{{ route('gallery.index') }}");
                                });
                        }
                    },
                    error: function (xhr) {
                        $('#loading').hide();
                        Swal.fire("Oops....", "Something went wrong!", "error");
                    }
                });
            }
        });
    };

</script>
@endsection