@extends('admin::layouts.master')

@section('title')
@lang('translation.Universities') / Images
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
<a href="{{ route('admin.university.index') }}">Universities</a>
@endslot
@slot('title')
Images
@endslot
@endcomponent

@if ($text = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@elseif ($text = Session::get('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body border-bottom">
                <div class="d-flex align-items-center">
                    <h5 class="mb-0 card-title flex-grow-1">Images Lists</h5>
                    <div class="flex-shrink-0">
                        <a href="{{ route('admin.university.image.create', $id) }}" class="btn btn-primary">Add Image</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if(count($images) > 0)
                <table id="imagetable" class="table table-bordered dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Image</th>
                            <th>Sequence</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="tablecontents">
                        @foreach($images as $index => $value)
                        <tr class="row1" data-id="{{ $value->id }}">
                            <td>{{ $index + 1 }}</td>
                            <td><a href="{{ asset($value->path) }}" target="_blank"><img src="{{ asset($value->path) }}" alt="" width="48" /></a></td>
                            <td>{{ $value->sequence }}</td>
                            <td>
                                <a href="{{ route('admin.university.image.destroy', $value->id) }}" class="btn btn-soft-danger btn-sm" title="Delete"><i class="mdi mdi-delete-outline"></i></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <h3>No Data Found</h3>
                @endif
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


<script type="text/javascript">
    $(function() {
        // $("#imagetable").DataTable();
        var catTable = document.getElementById('imagetable');

        $("#tablecontents").sortable({
            items: "tr",
            cursor: 'move',
            opacity: 0.6,
            update: function() {
                sendOrderToServer();
            }
        });

        var currentURL = document.URL;
        var id = currentURL.substring(currentURL.lastIndexOf('/') + 1);

        function sendOrderToServer() {
            var order = [];
            $('tr.row1').each(function(index, element) {
                order.push({
                    id: $(this).attr('data-id'),
                    position: index + 1
                });
            });
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ url('admin/university/image/sort') }}?id=" + id,
                data: {
                    order: order,
                    _token: '{{csrf_token()}}',
                },
                success: function(response) {
                    if (response.status == "success") {
                        window.location.reload();
                        // $("#imagetable").load(window.location + " #imagetable").reload();
                    } else {
                        alert(response.message);
                    }
                }
            });
        }

    });
</script>
@endsection