@extends('layouts.app')
@section('title', 'State Sales Tax')

@section('content')
<div class="container-fluid mt-1">
	<x-setting_tabs/>
	<div class="col-lg-12">
        <div class="card ">
            <div class="card-body">
                <div class="p-0">
                    <table id="datatable" class="table table-bordered mb-0"  >
                        <thead>
                            <tr>
                                <th>Sl No</th>
                                <th>State</th>
                                <th>Sales Tax</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                                                         @forelse($tble_list as $tble_row)
                        	<tr>
                                <td>{{$i++}}</td>
                                <td>{{$tble_row->short_code}}</td>
                                <td>{{$tble_row->sales_percentage}}</td>
                                <td><img class="menuicon" onclick="edit('{{ $tble_row->id }}')" src="{{asset('app-assets/assets/images/edit.svg')}}" ></td>
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addModel">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
    	        <form method="post" name="addFrm" id="addFrm" role="form" autocomplete="off" data-parsley-validate>
    	            @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add State Sales Tax</h5>
    					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    						<span aria-hidden="true">&times;</span>
    					</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="name-input" class="col-form-label"> State <span class="mandatory">*<span></label>
                             	<select class="form-control" name="state_id" id="state_id">
                                    <option value="">Select State</option>
                                    @forelse($states as $stateslist)
                                        <option value="{{$stateslist->id}}">{{$stateslist->state_name}}({{$stateslist->short_code}})</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label for="name-input" class="col-form-label">Sales Tax</label>
                                <input type="text" class="form-control" id="sales_tax" name="sales_tax" placeholder="Enter Sales Tax"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveData();">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
    	        </form>
            </div>
        </div>
    </div>
     <div class="modal fade" id="editModel">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <form method="post" name="editFrm" id="editFrm" role="form" autocomplete="off" data-parsley-validate>
    	            @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Update State Sales Tax</h5>
    					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    						<span aria-hidden="true">&times;</span>
    					</button>
                    </div>
                <div class="modal-body" id="append_data">

                </div>
                <div class="modal-footer">
                    <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="updateDate();">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<x-alert/>
<script type="text/javascript">

	$(document).ready(function() {
		$(".odtabs").not("#tab8").addClass('btn-outline-secondary');
		$("#tab19").addClass('btn-secondary');
	});

	 var table = $('#datatable').DataTable({
		responsive: true,
		dom: 'l<"toolbar">Bfrtip',
        buttons: [
            'excel'
        ],
		initComplete: function(){
		    $("div.toolbar").html('<button id="addLender" type="button" class="ml-2 tble_btn btn btn-primary" data-toggle="modal" data-target="#addModel"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Sales Tax</button><br />');
		},
	   'columnDefs': [ {
			'targets': [3],
			'orderable': false,
		}]
    });
    function saveData()
    {
        if ($("#addFrm").parsley())
        {
            if ($("#addFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#addFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('addSalestax') }}",
                    data: new FormData($("#addFrm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response)
                    {
                        new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                        });
                        setTimeout(function(){  location.reload(); }, 800);

                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
        }
    }
    function edit(id)
    {
        var url = '/salestaxedit/'+id;

        $.ajax({
            url:url,
            success:function(data)
            {
                $("#append_data").html('');
                $("#append_data").html(data);
                $('#editModel').modal('show');
            }
        });
        return false;
    }
    function updateDate()
    {
        if ($("#editFrm").parsley())
        {
            if ($("#editFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#editFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('updatesalestax') }}",
                    data: new FormData($("#editFrm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {

                        new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                        });
                        setTimeout(function(){  location.reload(); }, 800);

                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
        }
    }
</script>
@endsection