@extends('layouts.master')

@section('content')
<div class="container">
	<div class="card card-custom gutter-b">
		<div class="card-header flex-wrap py-3">
			<div class="card-title">
				<h3 class="card-label">List of News</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
                <button type="button" class="btn btn-primary" id="showAddNews">
                    <i class="flaticon-plus icon-lg"></i>
                    Add New News
                </button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered" id="news-table">
				<thead>
					<tr>
						<th>No.</th>
                        <th>Image</th>
                        <th>Title</th>
                        <th>For Role</th>
                        <th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

<!--begin::Modal-->
@include('news.add')
@include('news.edit')
<!--end::Modal-->

@endsection
@push('css')
<style>
    input[type="file"] {
      display: block;
    }
    .imageThumb {
      max-height: 75px;
      border: 1px solid;
      padding: 1px;
      cursor: pointer;
    }
    .imageThumb_edit {
      max-height: 75px;
      border: 1px solid;
      padding: 1px;
      cursor: pointer;
    }
    .pip {
      display: inline-block;
      margin: 10px 10px 0 0;
    }
    .remove {
      display: block;
      text-align: center;
      cursor: pointer;
    }
    .remove:hover {
      background: white;
      color: black;
    }
    .pip_edit {
      display: inline-block;
      margin: 10px 10px 0 0;
    }
    .remove_edit {
      display: block;
      text-align: center;
      cursor: pointer;
    }
    .remove_edit:hover {
      background: white;
      color: black;
    }
</style>
@endpush
@push('script')
<script type="text/javascript">
$(document).ready(function()
{
    if (window.File && window.FileList && window.FileReader)
    {
        $("#file_photo_add").on("change", function(e)
        {
            var files = e.target.files,
            filesLength = files.length;
            for (var i = 0; i < filesLength; i++)
            {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e)
                {
                    var file = e.target;
                    $("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                        "<br/><span class=\"remove\"><i class=\"la la-times-circle icon-xl text-danger\" style=\"margin-top: 10px;\"></i></span>" +
                        "</span>").insertAfter("#file_photo_add");

                    $(".remove").click(function(){
                        $(this).parent(".pip").remove();
                    });
                });

                fileReader.readAsDataURL(f);
            }
        });

        $("#file_photo_edit").on("change", function(e)
        {
            var files = e.target.files,
            filesLength = files.length;
            for (var i = 0; i < filesLength; i++)
            {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e)
                {
                    var file = e.target;
                    $("<span class=\"pip_edit\">" +
                        "<img class=\"imageThumb_edit\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                        "<br/><span class=\"remove_edit\"><i class=\"la la-times-circle icon-xl text-danger\" style=\"margin-top: 10px;\"></i></span>" +
                        "</span>").insertAfter("#file_photo_edit");

                    $(".remove_edit").click(function(){
                        $(this).parent(".pip_edit").remove();
                    });
                });

                fileReader.readAsDataURL(f);
            }
        });
    }
    else
    {
        alert("Your browser doesn't support to File API");
    }
});
</script>
<script type="text/javascript">
	var table = $('#news-table').DataTable({
        responsive: false,
        scrollX: true,
        lengthMenu: [10, 20, 50, 100],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.photo.length > 0)
                        return '<img src="'+row.photo[0].file_path+'" width="100px" height="80px" style="border: 1px solid #ddd; border-radius: 4px;">';
                    else
                        return '-';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.title+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.for_role == 1)
                        return "<h5><span class='badge badge-secondary'>{{ __('All') }}</span></h5>";
                    else if(row.for_role == 2)
                        return "<h5><span class='badge badge-secondary'>{{ __('Squad Only') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-secondary'>{{ __('Customer Only') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.status == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Active') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Inactive') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<a href="#" title="Send Push Notification" class="btn btn-icon btn-circle btn-light-info btn-sm mr-2 send-news" data-id="'+row.id+'"><i class="la la-send icon-xl"></i></a><a href="#" title="Edit" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 edit-news" data-id="'+row.id+'"><i class="la la-edit icon-xl"></i></a><a href="#" title="Delete" class="btn btn-icon btn-circle btn-light-danger btn-sm delete-news" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('news.dt') }}",
            dataSrc:"data",
            dataType : "json"
        }
    }).on('click', 'a.edit-news', function(e) {

        e.preventDefault();

        $(".pip_edit").remove();
        $("#curr_photo_edit").val('0');
        $("#file_photo_edit").val('');

        var id         = $(this).data('id');

        var url = "{{ route('news.detail', ':id') }}";
        url     = url.replace(':id',id);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                var val = data.data;

                var hold = [];

                if(val.photo.length > 0)
                {
                    $.each(val.photo, function(index, data){
                        hold.push(data.id);
                    });
                    var photo = hold.join();
                }
                else
                    var photo = 0;

                if(val.photo != null)
                {
                    $('#curr_photo_edit').val(photo);

                    var dt;
                    $.each(val.photo, function(index, data){
                        $("<span class=\"pip_edit\"><input type=\"hidden\" id=\"holddata\" value=\"" + data.id + "\">" +
                            "<img class=\"imageThumb_edit\" src=\"" + data.file_path + "\" title=\"" + data.file_name + "\"/>" +
                            "<br/><span class=\"remove_edit\"><i class=\"la la-times-circle icon-xl text-danger\" style=\"margin-top: 10px;\"></i></span>" +
                            "</span>").insertAfter("#file_photo_edit");
                    });

                    $(".remove_edit").click(function(){
                        var rem = $(this).parent(".pip_edit").children('#holddata').val();
                        entryArray = $('#curr_photo_edit').val().split(",");
                        updt = entryArray.indexOf(rem);
                        entryArray.splice(updt, 1);
                        $(this).parent(".pip_edit").remove();
                        if(entryArray.length > 0)
                            $('#curr_photo_edit').val(entryArray.join());
                        else
                            $('#curr_photo_edit').val('0');
                    });
                }
                else
                {
                    $('#curr_photo_edit').val(photo);
                }

                $('#id_edit').val(val.id);
                $('#title_edit').val(val.title);
                $('#body_edit').summernote('code', val.body);
                // $('#body_edit').val(val.body);
                $('#for_role_edit').val(val.for_role).select2();

                if(val.status == 1)
                {
                    document.getElementById("status_edit").checked = true;
                }
            }
        });        

        $('#editNews').modal('show');
    }).on('click', 'a.delete-news', function(e) {

        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('news.delete', ':id') }}";
        url         = url.replace(':id',id);

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        _token : _token
                    },
                    success: function(data) {
                        if(data.status != 'success')
                        {
                            var errors = data;
                            $.each(errors, function(index, sm){
                                toastr.error(sm, {timeOut: 5000});
                            });
                        }
                        else
                        {
                            Swal.fire(
                                "Deleted!",
                                "News has been deleted.",
                                "success"
                            )
                            $('#news-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    }).on('click', 'a.send-news', function(e) {

        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('news.send', ':id') }}";
        url         = url.replace(':id',id);

        Swal.fire({
            title: "Are you sure you want to send this news?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        _token : _token
                    },
                    success: function(data) {
                        if(data.status != 'success')
                        {
                            var errors = data;
                            $.each(errors, function(index, sm){
                                toastr.error(sm, {timeOut: 5000});
                            });
                        }
                        else
                        {
                            Swal.fire(
                                "Sent!",
                                "News has been sent.",
                                "success"
                            )
                            $('#news-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    });

    $(document).ready(function() {
        $('#showAddNews').on('click', function () {
            $(".pip").remove();

            $('#addNews').modal('show');
        });

        $('#for_role_add, #for_role_edit').select2();

        $('.save-news').on('click', function () {
            addNews();
        });

        $('.update-news').on('click', function () {
            updateNews();
        });

        $('#addNews').on('hidden.bs.modal', function() {
            $('#addNews form')[0].reset();
        });

        $('#body_add, #body_edit').summernote({
            height: 200,
            codemirror: { // codemirror options
                theme: 'monokai'
            }
        });   
    });

    function addNews()
    {
        var title   = $('#title_add').val();
        var body    = $('#body_add').summernote('code');
        // var body    = $('#body_add').val();
        var role    = $('#for_role_add').val();
        var status  = document.getElementById('status_add').checked ? '1' :'0';
       	var _token 	= $("input[name='_token']").val();
        var url 	= "{{ route('news.store') }}";

        let fr = new FormData();
        let photoCount = $('#file_photo_add')[0].files.length;
        let photo = $('#file_photo_add')[0];
        let curr_photo = '0';

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                title   : title,
                body    : body,
                role    : role,
                status  : status,
                _token  : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                    var news_id = data.news_id;

                    fr.append('news_id', news_id);
                    fr.append('news_count', photoCount);
                    for (let i = 0; i < photoCount; i++) {
                        fr.append('photo['+i+']', photo.files[i]);
                    }
                    fr.append('curr_photo', curr_photo);
                    fr.append('_token', _token);
                    $.ajax({
                        url: "{{ route('news.upload.image') }}",
                        data:fr,
                        type: "POST",
                        cache:false,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(data) {
                            if(data.status != 'success'){
                                var errors = data;
                                $.each(errors, function(index, sm){
                                    toastr.error(sm, {timeOut: 5000});
                                });
                            }
                            else
                            {
                                Swal.fire({
                                    title: "Success!",
                                    text: "Successfully Add New News!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 3000
                                 });
                                $('#addNews').modal('hide');
                                $('#news-table').DataTable().ajax.reload(null, false);
                            }
                        }
                    });
                }
            }
        });
    }

    function updateNews()
    {
        var id      = $('#id_edit').val();
    	var title   = $('#title_edit').val();
        var body    = $('#body_edit').summernote('code');
        // var body    = $('#body_edit').val();
        var role    = $('#for_role_edit').val();
        var status  = document.getElementById('status_edit').checked ? '1' :'0';
        var _token  = $("input[name='_token']").val();
     	var url 	= "{{ route('news.update', ':id') }}";
        url 		= url.replace(':id',id);

        let fr = new FormData();
        let photoCount = $('#file_photo_edit')[0].files.length;
        let photo = $('#file_photo_edit')[0];
        let curr_photo_edit = $('#curr_photo_edit').val();

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                title   : title,
                body    : body,
                role    : role,
                status  : status,
                _token  : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                    var news_id = data.news_id;

                    fr.append('news_id', news_id);
                    fr.append('news_count', photoCount);
                    if(photoCount > 0)
                    {
                        for (let i = 0; i < photoCount; i++) {
                            fr.append('photo['+i+']', photo.files[i]);
                        }
                    }
                    else
                    {
                        fr.append('photo', 'undefined');
                    }
                    
                    fr.append('curr_photo', curr_photo_edit);
                    fr.append('_token', _token);
                    $.ajax({
                        url: "{{ route('news.upload.image') }}",
                        data:fr,
                        type: "POST",
                        cache:false,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(data) {
                            if(data.status != 'success'){
                                var errors = data;
                                $.each(errors, function(index, sm){
                                    toastr.error(sm, {timeOut: 5000});
                                });
                            }
                            else
                            {
                                Swal.fire({
                                    title: "Success!",
                                    text: "Successfully Updated News!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 3000
                                 });
                                $('#editNews').modal('hide');
                                $('#news-table').DataTable().ajax.reload(null, false);
                            }
                        }
                    });
                }
            }
        });
    }
</script>
@endpush