@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 Banner</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
				<button type="button" class="btn btn-primary" id="showAddBanner">
				    <i class="flaticon-plus icon-lg"></i>
				    Add New Banner
				</button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered" id="banner-table">
				<thead>
					<tr>
						<th>No.</th>
                        <th>Banner</th>
                        <th>Title</th>
                        <th>Display Location</th>
						<th>Date</th>
                        <th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

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

@endsection
@push('script')
<script type="text/javascript">
	var table = $('#banner-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.banner != null)
                        return '<img src="'+row.banner.file_path+'" width="200px" 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.display_location == 1)
                    {
                        return '<span>Home Client Screen</span>';
                    }
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return moment(row.created_at).format('DD/MM/YYYY');
                }
            },
            {
                "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)  {
                    if(row.banner)
                        var banner = row.banner.file_path;
                    else
                        var banner = 0;

                    return '<a href="#" title="View" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 edit-banner" data-id="'+row.id+'" data-banner="'+banner+'" data-title="'+row.title+'" data-display="'+row.display_location+'" data-status="'+row.status+'"><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-banner" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

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

        e.preventDefault();

        $('#preview_edit').hide();
        $('#removeFile_edit').hide();
        $('input[type="file"]').show();

        var id          = $(this).data('id');
        var title       = $(this).data('title');
        var display     = $(this).data('display');
        var status      = $(this).data('status');
        var banner      = $(this).data('banner');

        $('#id_edit').val(id);
        $('#title_edit').val(title);
        $('#display_loc_edit').val(display).select2();
        $('#current_banner_edit').val(banner);

        if(banner != 0)
        {
            $('#removeFile_edit, #preview_edit').show();
            document.getElementById("preview_edit").src = banner;
            $('input[type="file"]').hide();
        }

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

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

        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('configure.banner.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!",
                                "Banner has been deleted.",
                                "success"
                            )
                            $('#banner-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    });

    $(document).ready(function() {
        $('#display_loc_add').select2();

        $('#display_loc_edit').select2();

        $('#showAddBanner').on('click', function () {
            $('#preview_edit').hide();
            $('#removeFile_edit').hide();
            $('#preview').hide();
            $('#removeFile').hide();
            $('input[type="file"]').show();

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

        $('.save-banner').on('click', function () {
            addBanner();
        });

        $('.update-banner').on('click', function () {
            updateBanner();
        });

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

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

        $('.file').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile, #preview').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview").src = '';
                $(".file").val('');
                $('#preview').hide();
                $('#current_banner').val('0');
            }
            
        });

        $('.file_edit').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile_edit, #preview_edit').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview_edit").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview_edit").src = '';
                $(".file_edit").val('');
                $('#preview_edit').hide();
                $('#current_banner_edit').val('');
            }
            
        });

        $("#removeFile").click(function(){
            document.getElementById("preview").src = '';
            $(".file").val('');
            $('#preview').hide();
            $('#current_banner').val('');
            $(this).hide();
            $('input[type="file"]').show();
        });

         $("#removeFile_edit").click(function(){
            document.getElementById("preview_edit").src = '';
            $(".file_edit").val('');
            $('#preview_edit').hide();
            $('#current_banner_edit').val('0');
            $(this).hide();
            $('input[type="file"]').show();
        });
  
    });

    function addBanner()
    {
        var title        = $('#title_add').val();
        var display_loc  = $('#display_loc_add').val();
     	var status 	     = document.getElementById('status_add').checked ? '1' :'0';
     	var _token 		 = $("input[name='_token']").val();
        var url 		 = "{{ route('configure.banner.store') }}";

        let fr = new FormData();
        let banner = $('#banner_add').prop('files')[0];
        let curr_banner = '0';

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                title       : title,
                display_loc : display_loc,
                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 banner_id = data.banner_id;

                    if(banner)
                    {
                        fr.append('banner_id', banner_id);
                        fr.append('banner', banner);
                        fr.append('curr_banner', curr_banner);
                        fr.append('_token', _token);
                        $.ajax({
                            url: "{{ route('configure.upload.banner') }}",
                            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 Banner!",
                                        icon: "success",
                                        buttonsStyling: false,
                                        showConfirmButton: false,
                                        timer: 3000
                                     });
                                    $('#addBanner').modal('hide');
                                    $('#banner-table').DataTable().ajax.reload(null, false);
                                }
                            }
                        });
                    }
                    else
                    {
                        Swal.fire({
                            title: "Success!",
                            text: "Successfully Add New Banner!",
                            icon: "success",
                            buttonsStyling: false,
                            showConfirmButton: false,
                            timer: 3000
                         });
                        $('#addBanner').modal('hide');
                        $('#banner-table').DataTable().ajax.reload(null, false);
                    }
                }
            }
        });
    }

    function updateBanner()
    {
        var id            = $('#id_edit').val();
    	var title         = $('#title_edit').val();
        var display_loc   = $('#display_loc_edit').val();
        var status        = document.getElementById('status_edit').checked ? '1' :'0';
        var _token        = $("input[name='_token']").val();
     	var url 		  = "{{ route('configure.banner.update', ':id') }}";
        url 			  = url.replace(':id',id);

        let fr = new FormData();
        let banner      = $('#banner_edit').prop('files')[0];
        let curr_banner = $('#current_banner_edit').val();

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                title       : title,
                display_loc : display_loc,
                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 banner_id = data.banner_id;

                    fr.append('banner_id', banner_id);
                    fr.append('banner', banner);
                    fr.append('curr_banner', curr_banner);
                    fr.append('_token', _token);
                    $.ajax({
                        url: "{{ route('configure.upload.banner') }}",
                        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 Banner!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 3000
                                 });
                                $('#editBanner').modal('hide');
                                $('#banner-table').DataTable().ajax.reload(null, false);
                            }
                        }
                    });
                    
                }
            }
        });
    }
</script>
@endpush