@extends('adminlte::page')

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




@section('content_header')
	<div class="">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
				<li class="breadcrumb-item text-bold"><a href="{{ route('admin.travel-guide.overview.index',[$page_type,$country_id]) }}">{{$page->name}}</a></li>
				<li class="breadcrumb-item active text-bold" aria-current="page">Cards</li>
			</ol>
		</nav>
	</div>
	
    <div class="row mb-2">
        <div class="col-sm-6 col-6">
            <h1>Travel Guide Cards</h1>
        </div>
        <div class="col-sm-6 col-6">
            <div class=" float-right">
            <a href="{{ route('admin.travel-guide.cluster.create',[$country_id, $page_type]) }}" 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></th>
                            <th>Title</th>
                            <th>Tags</th>
							<th>Show On Home</th>
							<th>Show On Overview</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                        @foreach ($cluster as $blg)
                            <tr id="tr_{{$blg->id}}">
                                <td>
									@if(!empty($blg->image))
										<img src="{{ $front_url.'travel_guide/image/'.$blg->image }}" style="height: 25px;">
									@endif
								</td>
                                <td>{{$blg->title}}</td>
                                <td>{{$blg->tag_names}}</td>
								<td>
                                    <input type="checkbox" data-id="{{ $blg->id }}" name="is_dashboard" class="js-switch" {{ $blg->is_dashboard == 1 ? 'checked' : '' }}>
                                </td>
								<td>
                                    <input type="checkbox" data-id="{{ $blg->id }}" name="is_overview" class="js-switch" {{ $blg->is_overview == 1 ? 'checked' : '' }}>
                                </td>
                                <td>{{($blg->status)?'Active':'Deactive'}}</td>
                                <td>
                                    <a href="{{route('admin.travel-guide.cluster.edit',[$country_id,$page_type,$blg->id])}}">
                                       <i class="fas fa-pencil-alt"></i>
                                    </a>
									&nbsp;&nbsp;
                                    <a onclick="return (confirm('Are you sure you want to delete ?'))?true:false"
                                       href="{{route('admin.travel-guide.cluster.delete',[$country_id,$page_type,$blg->id])}}">
                                       <i class="fas fa-trash"></i>
                                    </a>
									&nbsp;&nbsp;
                                    <a title="Activate"
                                       href="{{route('admin.travel-guide.cluster.activeDeactivate',[$country_id,$page_type,$blg->id])}}">
                                        <i class="fa  fa-check deActive-color"
                                           aria-hidden="true"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                <div class="box-footer clearfix">
                    {{ $cluster->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 () {
			$('.js-switch[name="is_dashboard"]').change(function () {
                let is_dashboard = $(this).prop('checked') === true ? 1 : 0;
                let cluster_id = $(this).data('id');
				let url = "{{ url('admin/travel-guide/cluster/is-dashboard') }}/"+ cluster_id;
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: url,
                    data: {
                        'is_dashboard': is_dashboard,
                        '_token': '{{ csrf_token() }}'
                    },
                    success: function (data) {
                        toastr.clear();
                        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_dashboard === "1") {
                            toastElement.addClass('toast-primary');
                        } else {
                            toastElement.addClass('toast-inactive');
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                        toastr.error('Failed to update status');
                    }
                });
            });
			
			$('.js-switch[name="is_overview"]').change(function () {
                let is_overview = $(this).prop('checked') === true ? 1 : 0;
                let cluster_id = $(this).data('id');
				let url = "{{ url('admin/travel-guide/cluster/is-overview') }}/"+ cluster_id;
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: url,
                    data: {
                        'is_overview': is_overview,
                        '_token': '{{ csrf_token() }}'
                    },
                    success: function (data) {
                        toastr.clear();
                        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_overview === "1") {
                            toastElement.addClass('toast-primary');
                        } else {
                            toastElement.addClass('toast-inactive');
                        }
                    },
                    error: function (data) {
                        console.log('Error:', data);
                        toastr.error('Failed to update status');
                    }
                });
            });
        });
    </script>
@stop

@stop