@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 Promotion</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addPromotion">
				    <i class="flaticon-plus icon-lg"></i>
				    Add New Promotion
				</button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered table-checkable" id="promotion-table">
				<thead>
					<tr>
						<th>No.</th>
						<th>Promo</th>
                        <th>Code</th>
						<th>Start Date</th>
						<th>End Date</th>
                        <th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

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

@endsection
@push('script')
<script type="text/javascript">
	var table = $('#promotion-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)  {
                    return '<span>'+row.name+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.promo_code+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return moment(row.start_date).format('DD/MM/YYYY');
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return moment(row.end_date).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)  {
                	return '<a href="#" title="Edit" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 edit-promotion" 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-promotion" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

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

        e.preventDefault();

        var id  = $(this).data('id');
        var url = "{{ route('promotion.detail', ':id') }}";
        url     = url.replace(':id',id);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                var val = data.data;
                $('#id_edit').val(val.id);
                $('#name_edit').val(val.name);
                $('#code_edit').val(val.promo_code);
                $('#start_date_data_edit').val(moment(val.start_date).format('DD/MM/YYYY hh:mm A'));
                $('#end_date_data_edit').val(moment(val.end_date).format('DD/MM/YYYY hh:mm A'));

                if(val.promo_type == 1)
                {
                    $('#type_edit').val("Buy X Get RM X");
                }
                else if(val.promo_type == 2)
                {
                    $('#type_edit').val("Buy X Free Y");
                }

                const hold = [];
                const holdCat = [];

                if(val.promo_type == 1)
                {
                    $('#showByEdit').show();
                    $('#showBuyQuantityEdit').show();
                    $('#showPriceEdit').show();

                    $('input[name="by_edit"]:checked').val();

                    if(val.promo_by == 1)
                    {
                        document.getElementById("by_edit_1").checked = true;
                        $.each(val.productpromo, function(index, value){
                            hold.push(value.product_id);
                        });
                        $('#showByProductEdit').show();
                        $('#showByCategoryEdit').hide();
                        $('#product_edit').val(hold).select2();
                    }
                    else
                    {
                        document.getElementById("by_edit_2").checked = true;
                        $.each(val.productpromo, function(index, value){
                            hold.push(value.product_id);
                            holdCat.push(value.category_id);
                        });

                        const productId = hold.filter((x, i, a) => a.indexOf(x) == i)
                        const categoryId = holdCat.filter((x, i, a) => a.indexOf(x) == i)

                        $('#showByProductEdit').hide();
                        $('#showByCategoryEdit').show();
                        $('#product_edit').val(productId).select2();
                        $('#category_edit').val(categoryId).select2();
                    }

                    $('#buy_quantity_edit').val(val.quantity);
                    $('#price_edit').val(val.price);
                }
                else
                {
                    $('#showByEdit').hide();
                    $('#showBuyQuantityEdit').hide();
                    $('#showPriceEdit').hide();
                    $('#showByProductEdit').hide();
                    $('#showByCategoryEdit').hide();
                }

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

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

        e.preventDefault();

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

    $(document).ready(function() {
        $('.save-promotion').on('click', function () {
            addPromotion();
        });

        $('.update-promotion').on('click', function () {
            updatePromotion();
        });

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

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

        $('#product_add').select2({
            placeholder: "Please select product",
            width: 'resolve'
        });

        $('#category_add').select2({
            placeholder: "Please select category",
            width: 'resolve'
        });

        $('#product_edit').select2({
            placeholder: "Please select product",
            width: 'resolve'
        });

        $('#category_edit').select2({
            placeholder: "Please select category",
            width: 'resolve'
        });

        $('#start_date_add').datetimepicker({
            format: "DD/MM/YYYY hh:mm A"
        });

        $('#end_date_add').datetimepicker({
            useCurrent: false,
            format: "DD/MM/YYYY hh:mm A"
        });

        $('#start_date_edit').datetimepicker({
            format: "DD/MM/YYYY hh:mm A"
        });

        $('#end_date_edit').datetimepicker({
            useCurrent: false,
            format: "DD/MM/YYYY hh:mm A"
        });

        $('#start_date_add').on('change.datetimepicker', function(e) {
            $('#end_date_add').datetimepicker('minDate', e.date);
        });

        $('#end_date_add').on('change.datetimepicker', function(e) {
            $('#start_date_add').datetimepicker('maxDate', e.date);
        });

        $('#start_date_edit').on('change.datetimepicker', function(e) {
            $('#end_date_edit').datetimepicker('minDate', e.date);
        });

        $('#end_date_edit').on('change.datetimepicker', function(e) {
            $('#start_date_edit').datetimepicker('maxDate', e.date);
        });

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

            if(val == 1)
            {
                $('#showBy').show();
                $('#showBuyQuantity').show();
                $('#showPrice').show();
                $('input[name="by_add"]').on('change', function(){
                    var val = $(this).val();

                    if(val == 1)
                    {
                        $('#showByProduct').show();
                        $('#showByCategory').hide();
                    }
                    else
                    {
                        $('#showByProduct').hide();
                        $('#showByCategory').show();
                    }
                });
            }
            else
            {
                $('#showBy').hide();
                $('#showBuyQuantity').hide();
                $('#showPrice').hide();
                $('#showByProduct').hide();
                $('#showByCategory').hide();
            }
        });

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

                $('#product_add').append(html);
                $('#product_edit').append(html);
            }
        });

        $('input[name="by_edit"]').on('change', function(){
            var val = $(this).val();

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

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

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

    function addPromotion()
    {
     	var name 		  = $('#name_add').val();
        var code          = $('#code_add').val();
     	var start_date    = $('#start_date_data_add').val();
        var end_date      = $('#end_date_data_add').val();
        var type          = $('#type_add').val();
        var product       = $('#product_add').val();
        var category      = $('#category_add').val();
        var by            = $('input[name="by_add"]:checked').val();
        var buy_quantity  = $('#buy_quantity_add').val();
        var price         = $('#price_add').val();
     	var status 	      = document.getElementById('status_add').checked ? '1' :'0';
     	var _token 		  = $("input[name='_token']").val();
        var url 		  = "{{ route('promotion.store') }}";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                name 		    : name,
                code            : code,
                start_date      : start_date,
                end_date        : end_date,
                type            : type,
                by              : by,
                product         : product,
                category        : category,
                buy_quantity    : buy_quantity,
                price 	        : price,
                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{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Add New Promotion!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#addPromotion').modal('hide');
                    $('#promotion-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function updatePromotion()
    {
    	var id 			  = $('#id_edit').val();
     	var name          = $('#name_edit').val();
        var start_date    = $('#start_date_data_edit').val();
        var end_date      = $('#end_date_data_edit').val();
        var product       = $('#product_edit').val();
        var category      = $('#category_edit').val();
        var by            = $('input[name="by_edit"]:checked').val();
        var status        = document.getElementById('status_edit').checked ? '1' :'0';
        var _token        = $("input[name='_token']").val();
     	var url 		  = "{{ route('promotion.update', ':id') }}";
        url 			  = url.replace(':id',id);

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                name            : name,
                start_date      : start_date,
                end_date        : end_date,
                by              : by,
                product         : product,
                category        : category,
                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{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Updated Promotion!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#editPromotion').modal('hide');
                    $('#promotion-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endpush