@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 Product</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
				<button type="button" class="btn btn-primary" id="showAddProduct">
				    <i class="flaticon-plus icon-lg"></i>
				    Add New Product
				</button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered table-checkable" id="product-table">
				<thead>
					<tr>
						<th>No.</th>
						<th>Image</th>
                        <th>Code</th>
						<th>Name</th>
						<th>Price</th>
                        <th>Publish</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

<!--begin::Modal-->
@include('product.add')
@include('product.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 = $('#product-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.product_code+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span><b>'+row.name+'</b><br />'+row.description+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>RM '+row.price+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.is_publish == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Publish') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Not Publish') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                	return '<a href="#" title="Edit" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 edit-product" 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-product" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

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

        e.preventDefault();

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

        var id  = $(this).data('id');
        var url = "{{ route('product.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);
                }

                $('#name_edit').val(val.name);
                $('#code_edit').val(val.product_code);
                document.getElementById("description_edit").value = val.description;
                $('#price_edit').val(val.price);
                $('#special_price_edit').val(val.special_price);
                $('#category_edit').val(val.category_id).select2();
                $('#type_edit').val(val.type).select2();
                $('#day_edit').val(val.perday);
                $('#comp_quantity_edit').val(val.compulsory_quantity);

                if(val.is_publish == 1)
                {
                    document.getElementById("publish_edit").checked = true;
                }
                
                if(val.is_featured == 1)
                {
                    document.getElementById("featured_edit").checked = true;
                }

                if(val.is_compulsory == 1)
                {
                    document.getElementById("compulsory_edit").checked = true;
                    $('#formCompulsoryEdit').show();
                }
                else
                {
                    document.getElementById("compulsory_edit").checked = false;
                    $('#formCompulsoryEdit').hide();
                }

                if(val.type == 1)
                {
                    $('#formRentEdit').show();
                }
                else
                {
                    $('#formRentEdit').hide();
                }
            }
        });

        $('#id_edit').val(id);

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

        e.preventDefault();

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

    $(document).ready(function() {
        $('#showAddProduct').on('click', function () {
            $(".pip").remove();
            $('#type_add').val('').select2();
            $('#category_add').val('').select2();
            $('#formCompulsory').hide();
            $('#addProduct').modal('show');
        });

        $('.save-product').on('click', function () {
            addProduct();
        });

        $('.update-product').on('click', function () {
            updateProduct();
        });

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

        $('#category_add, #category_edit').select2();

        $('#type_add, #type_edit').select2();

        $.ajax({
            url: "{{ route('product.category.dt') }}",
            type: 'GET',
            success: function(data) {
                var val = data.data;
                $('#category_add').html('');
                $('#category_edit').html('');
                html="";
                html+="<option value='' disabled selected>Please select category</option>";
                $.each(val, function(index, value){
                    html+="<option value='"+value.id+"'>"+value.name+"</option>";
                });

                $('#category_add').append(html);
                $('#category_edit').append(html);
            }
        });

        $('#type_add').on('change', function () {
            var val = $(this).val();

            if(val == 1)
            {
                $('#formRent').show();
            }
            else
            {
                $('#formRent').hide();
            }
        });

        $('#type_edit').on('change', function () {
            var val = $(this).val();

            if(val == 1)
            {
                $('#formRentEdit').show();
            }
            else
            {
                $('#formRentEdit').hide();
            }
        });

        $('#compulsory_add').on('change', function () {
            if(document.querySelector('input[name="compulsory"]:checked') != null)
            {
                $('#formCompulsory').show();
            }
            else
            {
                $('#formCompulsory').hide();
            }
        });

        $('#compulsory_edit').on('change', function () {
            if(document.querySelector('input[name="compulsory_edit"]:checked') != null)
            {
                $('#formCompulsoryEdit').show();
            }
            else
            {
                $('#formCompulsoryEdit').hide();
            }
        });
    });

    function addProduct()
    {
     	var name 		  = $('#name_add').val();
        var code          = $('#code_add').val();
     	var category      = $('#category_add').val();
        var price         = $('#price_add').val();
        var special_price = $('#special_price_add').val();
        var description   = $('#description_add').val();
     	var featured 	  = document.getElementById('featured_add').checked ? '1' :'0';
     	var publish 	  = document.getElementById('publish_add').checked ? '1' :'0';
        var compulsory    = document.getElementById('compulsory_add').checked ? '1' :'0';
        var comp_quantity = $('#comp_quantity_add').val();
        var type          = $('#type_add').val();
        var day           = $('#day_add').val();
     	var _token 		  = $("input[name='_token']").val();
        var url 		  = "{{ route('product.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: {
                name 		    : name,
                code            : code,
                category        : category,
                price           : price,
                special_price   : special_price,
                description     : description,
                compulsory      : compulsory,
                comp_quantity   : comp_quantity,
                type            : type,
                day             : day,
                featured 	    : featured,
                publish 	    : publish,
                _token  	    : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                }
                else
                {
                    var prod_id = data.product_id;

                    fr.append('prod_id', prod_id);
                    fr.append('prod_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('product.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 Product!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 3000
                                 });
                                $('#addProduct').modal('hide');
                                $('#product-table').DataTable().ajax.reload(null, false);
                            }
                        }
                    });
                }
            }
        });
    }

    function updateProduct()
    {
    	var id 			  = $('#id_edit').val();
     	var name          = $('#name_edit').val();
        var code          = $('#code_edit').val();
        var category      = $('#category_edit').val();
        var price         = $('#price_edit').val();
        var special_price = $('#special_price_edit').val();
        var description   = $('#description_edit').val();
        var featured      = document.getElementById('featured_edit').checked ? '1' :'0';
        var publish       = document.getElementById('publish_edit').checked ? '1' :'0';
        var compulsory    = document.getElementById('compulsory_edit').checked ? '1' :'0';
        var comp_quantity = $('#comp_quantity_edit').val();
        var type          = $('#type_edit').val();
        var day           = $('#day_edit').val();
        var _token        = $("input[name='_token']").val();
     	var url 		  = "{{ route('product.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: {
                name            : name,
                code            : code,
                category        : category,
                price           : price,
                special_price   : special_price,
                description     : description,
                compulsory      : compulsory,
                comp_quantity   : comp_quantity,
                type            : type,
                day             : day,
                featured        : featured,
                publish         : publish,
                _token          : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                }
                else
                {
                    var prod_id = data.product_id;

                    fr.append('prod_id', prod_id);
                    fr.append('prod_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('product.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 Product!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 3000
                                 });
                                $('#editProduct').modal('hide');
                                $('#product-table').DataTable().ajax.reload(null, false);
                            }
                        }
                    });
                }
            }
        });
    }
</script>
@endpush