@extends('adminlte::page')

@section('title', 'Core Services')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">Core Services</h1>
@stop

@section('content')

		<div class="card shadow rounded-lg mb-3">
			<div class="card-header">
				<div class="row align-items-center">
					<div class="col-md-2 float-left ">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb bg-white mb-0 p-0">
								<li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
								<li class="breadcrumb-item text-bold active" aria-current="page">Core Services</li>
							</ol>
						</nav>
					</div>
					<div class= "col-md-10">
						<a href="{{ route('admin.core-service-add') }}"  class="btn btn-primary float-md-right ml-2" role="button" aria-pressed="true"><i class="fas fa-plus"></i> Add Core Service</a>
					</div>
				</div>
			</div>
		</div>
		<div class="card shadow rounded-lg mb-3">
			<ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="custom-tabs-four-home-tab" style="font-size:18px; font-weight:bold;" data-toggle="pill" href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home" aria-selected="false">India</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="custom-tabs-four-profile-tab" style="font-size:18px; font-weight:bold;" data-toggle="pill" href="#custom-tabs-four-profile" role="tab" aria-controls="custom-tabs-four-profile" aria-selected="true">USA</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="custom-tabs-four-messages-tab" style="font-size:18px; font-weight:bold;" data-toggle="pill" href="#custom-tabs-four-messages" role="tab" aria-controls="custom-tabs-four-messages" aria-selected="false">UK</a>
				</li>
			</ul>
			<div class="tab-content" id="custom-tabs-four-tabContent">
				<div class="tab-pane fade active show" id="custom-tabs-four-home" role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">
					<div class="card shadow rounded-lg p-2 mb-0">
						<div class="card-body">
							<div class="table-responsive">
								<table class="table table-bordered w-100" id="dataTable"  cellspacing="0">
									<thead>
										<tr>
											<th>No.</th>
											<th>Title</th>
											<th>Short Description</th>
											<th>Country Page</th>
											<th>Service Link</th>
											<th>Published/Drafted</th>
											<th>Created At</th>
											<th>Action</th>
										</tr>
									</thead>
									<tbody>
										@php
											$i= 1;
										@endphp
										@if(!empty($services))
											@foreach ($services as $service)
												<tr>
													<td style="width:2%">{{$i}}.</td>
													<td style="width:18%">{{$service['title']}}</td>
													<td style="width:15%"> {{$service['short_desc']}} </td>
													<td style="width:7%"> {{$service['service_country']}} </td>
													<td style="width:10%"> {{$service['service_link']}} </td>
													<td style="width:8%">
															<input type="checkbox" data-id="{{ $service->id }}" name="is_published" class="js-switch" {{ $service->is_published == 1 ? 'checked' : '' }}>
													</td>
													<td style="width:8%" class="font-italic text-bold">
															{{ $service->created_at->format('d-M-Y') }}
													</td>
													<td style="width:7%">
															<a href="{{ route('admin.core-service-edit', ['id'=>$service->id]) }}" class="badge bg-info" data-toggle="tooltip" data-placement="top" title="Edit core service"><i class="fas fa-edit"></i></a> <a href="{{ route('admin.remove.core.service', [$service->id]) }}" class="badge bg-danger delete-service" data-toggle="tooltip" data-placement="top" title="Delete core service"><i class="fas fa-trash"></i></a>
													</td>
													@php
															$i++;
													@endphp
												</tr>
											@endforeach
										@endif
									</tbody>
								</table>
								{{ $services->withQueryString()->links('pagination::bootstrap-4') }}
							</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade " id="custom-tabs-four-profile" role="tabpanel" aria-labelledby="custom-tabs-four-profile-tab">
					<div class="card shadow rounded-lg p-2 mb-0">
						<div class="card-body">
							<div class="table-responsive">
								<table class="table table-bordered w-100" id="dataTable"  cellspacing="0">
									<thead>
										<tr>
											<th>No.</th>
											<th>Title</th>
											<th>Short Description</th>
											<th>Country Page</th>
											<th>Service Link</th>
											<th>Published/Drafted</th>
											<th>Created At</th>
											<th>Action</th>
										</tr>
									</thead>
									<tbody>
										@php
											$i= 1;
										@endphp
										@if(!empty($services_usa))
											@foreach ($services_usa as $service)
												<tr>
													<td style="width:2%">{{$i}}.</td>
													<td style="width:18%">{{$service['title']}}</td>
													<td style="width:15%"> {{$service['short_desc']}} </td>
													<td style="width:7%"> {{$service['service_country']}} </td>
													<td style="width:10%"> {{$service['service_link']}} </td>
													<td style="width:8%">
															<input type="checkbox" data-id="{{ $service->id }}" name="is_published" class="js-switch" {{ $service->is_published == 1 ? 'checked' : '' }}>
													</td>
													<td style="width:8%" class="font-italic text-bold">
															{{ $service->created_at->format('d-M-Y') }}
													</td>
													<td style="width:7%">
															<a href="{{ route('admin.core-service-edit', ['id'=>$service->id]) }}" class="badge bg-info" data-toggle="tooltip" data-placement="top" title="Edit core service"><i class="fas fa-edit"></i></a> <a href="{{ route('admin.remove.core.service', [$service->id]) }}" class="badge bg-danger delete-service" data-toggle="tooltip" data-placement="top" title="Delete core service"><i class="fas fa-trash"></i></a>
													</td>
													@php
															$i++;
													@endphp
												</tr>
											@endforeach
										@endif
									</tbody>
								</table>
								{{ $services->withQueryString()->links('pagination::bootstrap-4') }}
							</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="custom-tabs-four-messages" role="tabpanel" aria-labelledby="custom-tabs-four-messages-tab">
					<div class="card shadow rounded-lg p-2 mb-0">
						<div class="card-body">
							<div class="table-responsive">
								<table class="table table-bordered w-100" id="dataTable"  cellspacing="0">
									<thead>
										<tr>
											<th>No.</th>
											<th>Title</th>
											<th>Short Description</th>
											<th>Country Page</th>
											<th>Service Link</th>
											<th>Published/Drafted</th>
											<th>Created At</th>
											<th>Action</th>
										</tr>
									</thead>
									<tbody>
										@php
											$i= 1;
										@endphp
										@if(!empty($services_uk))
											@foreach ($services_uk as $service)
												<tr>
													<td style="width:2%">{{$i}}.</td>
													<td style="width:18%">{{$service['title']}}</td>
													<td style="width:15%"> {{$service['short_desc']}} </td>
													<td style="width:7%"> {{$service['service_country']}} </td>
													<td style="width:10%"> {{$service['service_link']}} </td>
													<td style="width:8%">
															<input type="checkbox" data-id="{{ $service->id }}" name="is_published" class="js-switch" {{ $service->is_published == 1 ? 'checked' : '' }}>
													</td>
													<td style="width:8%" class="font-italic text-bold">
															{{ $service->created_at->format('d-M-Y') }}
													</td>
													<td style="width:7%">
															<a href="{{ route('admin.core-service-edit', ['id'=>$service->id]) }}" class="badge bg-info" data-toggle="tooltip" data-placement="top" title="Edit core service"><i class="fas fa-edit"></i></a> <a href="{{ route('admin.remove.core.service', [$service->id]) }}" class="badge bg-danger delete-service" data-toggle="tooltip" data-placement="top" title="Delete core service"><i class="fas fa-trash"></i></a>
													</td>
													@php
															$i++;
													@endphp
												</tr>
											@endforeach
										@endif
									</tbody>
								</table>
								{{ $services->withQueryString()->links('pagination::bootstrap-4') }}
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
@stop

@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>
$(document).on("click",".cls-section",function(e) {
    e.preventDefault();
    let section_link = $(this).attr('href');
    if($('#dw-sections').val() == ''){
        mytoast.error('Please select a section to edit.');
        $('#dw-sections').focus();
    }else{
        window.location.href = section_link+'/'+$('#dw-sections').val();
       
    }
});

$('.chk_recent').change(function (e) {
	var noindex = 'N';
	if ($(this).is(':checked')) {
		noindex = 'Y';
	}
	$.ajax({
		url: $(this).attr('data-url'),
		data: {noindex: noindex},
		type: "GET",
		success: function (data) {
			data = JSON.parse(data);
			if (data['error'] == true) {
				mytoast.error(data['message']);
			} else {
				mytoast.success(data['message']);
			}
		}
	});
});


$(document).ready(function() {
    $('.delete-service').click(function(e) {
        e.preventDefault(); // prevent default link action

        if (confirm("Are you sure you want to delete this service?")) {
            window.location.href = $(this).attr('href');
        }
    });
});


</script>

<script>
    let publishedElems = Array.prototype.slice.call(document.querySelectorAll('.js-switch[name="is_published"]'));
    publishedElems.forEach(function(html) {
        new Switchery(html, {
            size: 'small',
            color: '#28a745',
            secondaryColor: '#dc3545'
            
        });
    });

    $('.js-switch[name="is_published"]').change(function () {
        let is_published = $(this).prop('checked') === true ? 1 : 0;
        let service_id = $(this).data('id');
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'core-publish-status/' + service_id,
            data: {
                'is_published': is_published,
                'service_id': service_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');
                let toastElement = $(toast);
                if (data.is_published === "1") {
                    toastElement.addClass('toast-success');
                } else {
                    toastElement.addClass('toast-danger');
                }
                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