@extends('admin.index')
@section('title')
    {{ translate("gallery_title") }} -
@endsection
@section('header')
@endsection
@section('content')

    <div class="row">
        <div class="col-12">

            <div class="card card-body">
                <div class="toolbar d-flex justify-content-between">
                    <div>
                        <h5 class="mb-0">{{ translate("gallery_title") }}</h5>
                        <p class="text-sm mb-0">
                            {{ translate("gallery_description") }}
                        </p>
                    </div>
                    <div>
                        <a href="{{ url('admin/gallery/add') }}" class="btn btn-primary btn-sm">{{ translate("create_new_gallery") }}</a>
                    </div>
                </div>
                <table class="table table-striped" id="table1" data-locale="tr-TR" data-toolbar=".toolbar"
                    data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"
                    data-pagination="true" data-resizable="true" data-sortable="true" data-show-search-clear-button="true"
                    data-side-pagination="server" data-url="{{ secure_url('admin/gallery/list/ajax') }}">
                    <thead>
                        <tr>
                            <th data-sortable="true" data-field="image" data-formatter="imageFormatter">{{ translate("media_label") }}</th>
                            <th data-sortable="true" data-field="image" data-formatter="typeFormatter">{{ translate("type_label") }}</th>
                            <th data-sortable="true" data-field="default_content.title">{{ translate("title_label") }}</th>
                            <th data-sortable="true" data-field="default_content.description" data-formatter="descriptionFormatter">{{ translate("description_label") }}</th>
                            <th data-sortable="true" data-field="created_at" data-formatter="dateFormatter">{{ translate("created_at_label") }}</th>
                            <th data-formatter="buttonFormatter">{{ translate("edit_label") }}</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
@endsection
@section('footer')
    <script>
        function checkImage(image) {
            if (image == null || image == "") {
                return false;
            }
            return image.match(
                /\.(jpg|jpeg|png|gif|bmp|svg|svgz|cgm|djv|djvu|ico|ief|jpe|pbm|pgm|pnm|ppm|ras|rgb|tif|tiff|wbmp|xbm|xpm|xwd)$/i
            );
        }

        function imageFormatter(image, row) {
            if (checkImage(image)) {
                var html = "<img src='/uploads/gallery_media/" + row.id + "/" + image + "' width='100' />";
            } else {
                if (row.thumbnail != null) {
                    var html = "<img src='/uploads/gallery_media/" + row.id + "/" + row.thumbnail.name + "' width='100' />";
                } else {
                    var html = "<img src='{{ asset('images/no_image.png') }}' width='100' />";
                }
            }
            return html;
        }

        function typeFormatter(_, row) {
            if (row.image == null || row.image == "") {
                return "-";
            } else if (checkImage(row.image)) {
                return "{{ translate('photo_label') }}";
            } else {
                return "{{ translate('video_label') }}";
            }
        }

        function buttonFormatter(id, row) {
            var url = "{{ url('admin/gallery/edit') }}" + "/" + row.id;
            return '<div class="btn-group btn-block" role="group" aria-label="editremove"><a href="' + url +
                '" class="btn btn-sm btn-primary"> <i class="far fa-edit"></i> </a> <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item" data-id="' +
                row.id + '" data-item-type="gallery"> <i class="fas fa-trash-alt"></i> </button></div>';
        }

        function dateFormatter(date) {
            var date = new Date(date);
            var newDate = ("0" + (date.getDate())).slice(-2) + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + date
                .getFullYear() + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":" +
                ("0" + date.getMilliseconds()).slice(-2);
            return newDate;
        }

        function descriptionFormatter(description) {
            var html = "";
            html = description;

            if (description != null && description.length > 50) {
                html = html.substring(0, 50);
                html = html + "...";
            }

            return html;
        }
    </script>
@endsection