@extends('layouts.app')
@section('content')
<div class="page-titles">
				<ol class="breadcrumb">
					<li><h5 class="bc-title">City</h5></li>
					<li class="breadcrumb-item"><a href="{{url('/')}}">
						<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="#2C2C2C" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="#2C2C2C" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						Home</a>
					</li>
					<li class="breadcrumb-item active"><a href="javascript:void(0)">City</a></li>
				</ol>
				
			</div>
			<div class="container-fluid">
				<div class="row">
					<div class="col-xl-12">
						<div class="card">
							<div class="card-body pt-0">
								<div class="table-responsive active-projects style-1">
								<div class="tbl-caption">
									<h4 class="heading mb-0">Manage City</h4>
									<div>
										<button class="btn btn-primary btn-sm company-modal"  
                data-href="{{ action('App\Http\Controllers\CityController@create') }}" 
                data-container=".offcanvas" >+ Add City</button>
									</div>
								</div>
									<table id="example3" class="display table" style="width: 100%;">
										<thead>
											<tr>
												<th>ID</th>
												<th>City Name</th>
												<th>State Name</th>
												<th>Status</th>
                                                <th>Action</th>
											</tr>
										</thead>
										<tbody>
										
											
										</tbody>
										
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			
			</div>
            <div class="offcanvas offcanvas-end customeoff" tabindex="-1" id="offcanvasExample">
		 
		</div>
@endsection

@section('footer')
<script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
                }
            });

            var brands_table = $('#example3').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                ajax: "{{ url('/admin/city') }}",
                columns: [
                    {data: 'id',name: 'id'},
                    {data: 'cityname',name: 'cityname'},
                    {data: 'statename',name: 'statename'},
                    {
                        data: function(data) {
                            if (data.status == "Active") {
                                return '<span class="badge badge-rounded badge-success status_' +
                                    data.status +
                                    '">Active</span>';
                            } else {
                                return '<span class="badge badge-rounded badge-danger status_' +
                                    data.status +
                                    '">Inactive</span>';
                            }

                        },
                        name: 'status'
                    },
                    {data: 'action',name: 'action'}
                ],
                order: [
                    [0, 'DESC']
                ]
            });


            $(document).on('click', '.company-modal', function(e) {
                var container = $(this).data("container");
                $.ajax({
                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).addClass('show');
                    }
                });
            });




            $(document).on('submit', 'form#company_add_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#company_add_form')[0]);

                data.append('_token', '{{ csrf_token() }}');
                $.ajax({

                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $('.page-loader').show();
                    },
                    success: function(result) {
                        $('.page-loader').hide();
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');
                            $('.offcanvas').removeClass('show');
                            toastr.success(result.msg, "Success", {
                                positionClass: "toast-top-right",
                                timeOut: 5e3,
                                closeButton: !0,
                                debug: !1,
                                newestOnTop: !0,
                                progressBar: !0,
                                preventDuplicates: !0,
                                onclick: null,
                                showDuration: "300",
                                hideDuration: "1000",
                                extendedTimeOut: "1000",
                                showEasing: "swing",
                                hideEasing: "linear",
                                showMethod: "fadeIn",
                                hideMethod: "fadeOut",
                                tapToDismiss: !1
                            })
                           
                            brands_table.ajax.reload();
                        } else {
                            $.each(result.data, function(key, val) {
                                $("#" + key + "_error").text(val[0]);

                            })
                            toastr.warning(result.msg, "Warning", {
                    positionClass: "toast-top-right",
                    timeOut: 5e3,
                    closeButton: !0,
                    debug: !1,
                    newestOnTop: !0,
                    progressBar: !0,
                    preventDuplicates: !0,
                    onclick: null,
                    showDuration: "300",
                    hideDuration: "1000",
                    extendedTimeOut: "1000",
                    showEasing: "swing",
                    hideEasing: "linear",
                    showMethod: "fadeIn",
                    hideMethod: "fadeOut",
                    tapToDismiss: !1
                })
                            
                        }
                    },
                    error: function(xhr, status, error) {
                        $('.page-loader').hide();
                        toastr.error(error, "Error", {
                    positionClass: "toast-top-right",
                    timeOut: 5e3,
                    closeButton: !0,
                    debug: !1,
                    newestOnTop: !0,
                    progressBar: !0,
                    preventDuplicates: !0,
                    onclick: null,
                    showDuration: "300",
                    hideDuration: "1000",
                    extendedTimeOut: "1000",
                    showEasing: "swing",
                    hideEasing: "linear",
                    showMethod: "fadeIn",
                    hideMethod: "fadeOut",
                    tapToDismiss: !1
                })
                    }
                });
            });


            // edit emp
            $(document).on('click', 'button.employee_edit_form', function() {
                var container = $(this).data("container");
                $.ajax({
                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).modal('show');
                    }
                });
            });

            // update emp

            $(document).on('submit', '#employee_edit_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#employee_edit_form')[0]);
                //if(photo.files[0]){
                //    data.append('photo', photo.files[0]);
                // }
                data.append('_token', '{{ csrf_token() }}');
                $.ajax({
                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: '#088f7d'
                            }).showToast();
                            brands_table.ajax.reload();
                        } else {
                            $.each(result.data, function(key, val) {
                                $("#" + key + "_error").text(val[0]);
                            })
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: 'red'
                            }).showToast();

                        }
                    }
                });
            });

        });
    </script>
@endsection