@extends('adminlte::page')

@section('title', 'Travel Guide Country')




@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-3 col-3">
            <h1>Travel Guide Country</h1>
        </div>
		<div class="col-sm-3 col-3">
			<div class="form-group d-flex align-items-center">
				<form action="" method="get" class="form-inline">
					<input type="text" name="search" class="form-control float-left" id="search" placeholder="Search..." value="{{!empty($_GET['search'])?$_GET['search']:''}}">
					<button type="submit" class="btn btn-sm btn-primary">Search</button>
				</form> 
				<a href="{{route('admin.travel-guide.country')}}" class="btn btn-sm btn-warning">Clear</a>
			</div>
        </div>
        <div class="col-sm-6 col-6">
            <div class=" float-right">
				<a href="{{route('admin.travel-guide.tag.index')}}" class="btn btn-primary">Add Tags</a>
				<a href="{{route('admin.travel-guide.overview.index',[3,0])}}" class="btn btn-primary">Dashboard</a>
				<a href="{{ route('admin.travel-guide.country.create') }}" class="btn btn-primary">Add</a>
            </div>
        </div>
    </div>
@stop



@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <!-- /.box-header -->
                <div class="card-body table-responsive">
                    <table class="table table-bordered">
                        <tr>
                            <th>Code</th>
                            <th>Country</th>
                            <th>Slug</th>
                            <th>Status</th>
                            <th>Action</th>
                            <th>Most Visited</th>
                            <th>Sections</th>
                            <th>Add More Pages</th>
                        </tr>
                        @foreach ($country as $blg)
                            <tr id="tr_{{$blg->id}}">
                                <td>{{$blg->letter_code}}</td>
                                <td>{{$blg->name}}</td>
                                <td>{{$blg->slug}}</td>
                                <td>{{($blg->status =='Y')?'Active':'Deactive'}}</td>
                                <td>
									
                                    <a href="{{route('admin.travel-guide.country.edit',$blg->id)}}">
                                       <i class="fas fa-pencil-alt"></i>
                                    </a>&nbsp;&nbsp;
                                    <a title="Deactivate"
                                       href="{{route('admin.travel-guide.country.activeDeactivate',$blg->id)}}">
                                        <i class="fa  fa-lock"
                                           aria-hidden="true"></i>
                                    </a>
                                </td>
                                <td>
                                    <input type="checkbox" data-id="{{ $blg->id }}" name="is_most_visited" class="js-switch" {{ $blg->is_most_visited == 1 ? 'checked' : '' }}>
                                </td>
								<td>
									<a href="{{route('admin.travel-guide.overview.index',['1',$blg->id])}}" class="badge bg-info">
                                       Overview
                                    </a>&nbsp;									
									<a href="{{route('admin.travel-guide.overview.index',['2',$blg->id])}}" class="badge bg-info">
                                       Best Time To Visit
                                    </a>&nbsp;	
									
									@if(!empty($blg->dynamicpages))
										@foreach($blg->dynamicpages as $key=>$value)
											<a href="{{route('admin.travel-guide.overview.index',[$value->id,$blg->id])}}" class="badge bg-info">
												{{$value->name}}
											</a>&nbsp;	
										@endforeach
									@endif
								</td>
								<td>
									<a href="{{route('admin.travel-guide.countryPage.add-more',$blg->id)}}" class="badge bg-info">
                                       Add More
                                    </a>
								</td>
                            </tr>
                        @endforeach
                    </table>
                <div class="box-footer clearfix">
                    {{ $country->links() }}
                </div>
                </div>
                <!-- /.box-body -->

     
            </div>
        </div>
        <!-- /.col -->
    </div>
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@stop


@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.chk_featured').change(function(e) {
                var featured = 0;
                if($(this).is(':checked')){
                    featured = 1;
                }
                $.ajax({
                    url:$(this).attr('data-url'),
                    data:{featured:featured},
                    type:"GET",
                    success:function(data)
                    {
                        data = JSON.parse(data);
                        if(data['error'] == true){
                            new PNotify({
                                title: 'Alert',
                                text: data['message'],
                                type: 'error',
                                styling: 'bootstrap3',
                                delay: 3000
                            });
                        }else{
                            new PNotify({
                                title: 'Alert',
                                text: data['message'],
                                type: 'success',
                                styling: 'bootstrap3',
                                delay: 3000
                            });
                        }
                    }
                });
            });

            $(document).on('confirm', function (e) {
                var ele = e.target;
                e.preventDefault();
                $.ajax({
                    url: ele.href,
                    type: 'DELETE',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    success: function (data) {
                        if (data['success']) {
                            $("#" + data['tr']).slideUp("slow");
                            alert(data['success']);
                        } else if (data['error']) {
                            alert(data['error']);
                        } else {
                            alert('Whoops Something went wrong!!');
                        }
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                });
                return false;
            });
        });
    </script>
    <script>
            // $(document).ready(function() {
            //     $('.select2').select2();
            // });
            // let statusElems = Array.prototype.slice.call(document.querySelectorAll('.js-switch[name="is_most_visited"]'));
            //     statusElems.forEach(function(html) {
            //         new Switchery(html, {
            //             size: 'small',
            //             color: '#0d6efd',
            //             secondaryColor: '#dcdcdc'
            //         });
            //     });

          
     
            $('.js-switch[name="is_most_visited"]').change(function () {
                let is_most_visited = $(this).prop('checked') === true ? 1 : 0;
                let country_id = $(this).data('id');
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: 'country/most-visited/' + country_id,
                    data: {
                        'is_most_visited': is_most_visited,
                        'country_id': country_id,
                        '_token': '{{ csrf_token() }}'
                    },
                    success: function (data) {
                        console.log(data.message);
                        toastr.clear();
                        // toastr.success(data.message);
                        let toast = toastr.success(data.message, 'Notification', {
                            closeButton: true,
                            progressBar: true,
                            positionClass: 'toast-top-right',
                            timeOut: 500,
                            extendedTimeOut: 700 
                        });
                       
                        let toastElement = $(toast);
                        if (data.is_most_visited === "1") {
                            toastElement.addClass('toast-primary');
                        } else {
                            toastElement.addClass('toast-inactive');
                        }
                        if (data.redirect_url) {
                            window.location.href = data.redirect_url;
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                        toastr.error('Failed to update status');
                    }
                });
            });

            
     </script>
@stop

@stop