@extends('layouts.adminLayouts')

@section('head')
<link href="{{url('/assets/css/fileupload.css')}}" rel="stylesheet" type="text/css">
    <meta name="_token" content="{{csrf_token()}}">
@stop

@section('content-header')
<section class="content-header">
    <h1>
        مدیریت آیکون ها و نماد ها
    </h1>

    {{ Breadcrumbs::render('icons.index') }}


</section>
@stop

@section('content')


<div class="margin" dir="ltr">

    <div class="btn-group">
        <a href="{{url('/admin/icons/create')}}" class="btn btn-primary"> <i class="fa fa-plus"></i> مورد جدید</a>
    </div>

</div>

<div class="row">
    <div class="col-xs-12">
        <div class="box pt-0">
        <table id="example1" class="table table-bordered table-striped mt-0 mb-0">
            <thead>
                <tr>
                    <th>
                        <div class="custom-checkbox">
                            <input type="checkbox" id="check_all">
                            <label></label>
                        </div>
                    </th>
                    <th>عنوان</th>
                    <th>تصویر</th>
                    <th>وضعیت</th>
                    <th>ویرایش</th>
                </tr>
            </thead>
            <tbody class="text-center">
            @foreach ($icons as $icon)
                <tr>
                    <td>
                        <div class="custom-checkbox">
                            <input type="checkbox" class="checkbox" data-id="1">
                            <label for="1"></label>
                        </div>
                    </td>
                    <td>{{$icon->name}}</td>
                    <td>
                        <img src="{{url('assets/img/icons/'.$icon->image)}}" height="80" class="img-fluid" alt="">
                    </td>
                    <td>
                        @if($icon->status == 1)
                            <small class="label bg-green">فعال</small>
                        @else
                            <small class="label bg-yellow">غیرفعال</small>
                        @endif
                    </td>
                    <td>
                        <a onclick="modal_edit('{{$icon->id}}')" class="btn btn-primary btn-xs">ویرایش</a>
                        <a data-id='{{$icon->id}}' class="btn btn-danger btn-xs delete">حذف</a>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        </div>
    </div>
</div>

<div class="modal modal-edit-ads fade" id="modal-default">
    <div class="modal-dialog modal-lg">
        <div class="box">
            <div class="modal-content" id="edit-modal">

            </div>
            <div class="overlay" style="display:none" id="loading">
                <i class="fa fa-refresh fa-spin"></i>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


@stop

@section('footer')
<script type="text/javascript">
        $(document).ready(function () {
            $('#check_all').on('click', function (e) {
                if ($(this).is(':checked', true)) {
                    $(".checkbox").prop('checked', true);
                } else {
                    $(".checkbox").prop('checked', false);
                }
            });

            $('.checkbox').on('click', function () {
                if ($('.checkbox:checked').length == $('.checkbox').length) {
                    $('#check_all').prop('checked', true);
                } else {
                    $('#check_all').prop('checked', false);
                }
            });
        });
    </script>
<script>
    $(document).on("click", ".delete", function () {
        var id = $(this).data('id');
        var el = this;

        Swal.fire({
            title: 'از حذف مطمئن هستید؟',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#00a018',
            cancelButtonColor: '#d33',
            confirmButtonText: 'بله',
            cancelButtonText: 'خیر'
        }).then((result) => {
            if (result.value) {
                var token = $("meta[name='csrf-token']").attr("content");
                $.ajax({
                    url: '{{ url('admin/icons') }}/' + id,
                    type: 'DELETE',
                    data: {
                        "id": id,
                        "_token": token,
                    },

                    success: function (data) {
                        if (data == 'ok') {
                            Swal.fire(
                                'موفق',
                                'حذف گردید',
                                'success'
                            );
                            $(el).closest("tr").remove();
                        } else {
                            Swal.fire(
                                'خطا',
                                'مشکلی رخ داد',
                                'danger'
                            )
                        }
                    }
                });
            }
        });
    });

</script>

<script>
    modal_edit = function (id) {
        $('#loading').show();
        $('#modal-default').modal('show');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });
        $.ajax({
            url: '{{url('/admin/iconEdit')}}',
            type: 'POST',
            data: {id: id},
            success: function (response) {

                $('#edit-modal').empty().html(response);
                $('#loading').hide();
            },
            error: function (xhr) {
                $('#modal-default').modal('hide');
                $('#loading').hide();
                toastr.warning('خطایی در سامانه رخ داد!');
            }
        });
    }
</script>
@stop