@extends('adminlte::page')

@section('title', 'Services')

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

@section('content')
    <div class="card shadow rounded-lg  mb-3 p-2">
        <div class="card-header">
            <div class="row mt-3">
                <div class="col-md-6 float-left ">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-white">
                            <li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
                            <li class="breadcrumb-item text-bold"><a href="{{ route('admin.services.index') }}">Services</a></li>
                            <li class="breadcrumb-item text-bold active" aria-current="page">Service Categories</li>
                        </ol>
                    </nav>
                </div>

               {{--<div class= "col-md-2">
                    <select id="dw-sections" class="form-control float-md-right mx-4">
                        <option value="">--Select Sections--</option>
                        @foreach($sections as $key=>$value)
                            <option value="{{$value}}">{{$value}}</option>
                        @endforeach
                    </select>
                </div>--}}
                <div class= "col-md-6">
					<a href="{{route('admin.services.categories.add')}}"  class="btn btn-primary float-md-right ml-2" role="button" aria-pressed="true"><i class="fas fa-plus"></i> Add Category</a>
                </div>
            </div>
        </div>
        <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>Country</th>
                            <th>Main Category</th>
                            <th>Title</th>
                            <th>Slug</th>
                            <th>Actions</th>
                            <!-- <th>Published /Drafted</th> -->
                        </tr>
                    </thead>

                    <tbody>
                        @php
                            $i= 1;
                        @endphp

                        @foreach ($service_categories as $category)
                            <tr>
                                <td style="width:7%">{{$i}}.</td>
                                <td style="width:20%">{{$category['country_name']}}</td>
                                <td style="width:20%">{{$category['main_category_name']}}</td>
                                <td style="width:20%">{{$category['category_title']}}</td>
                                <td style="width:15%"> {{$category['slug']}} </td>
                                
                                <td style="width:15%">
                                    <input type="checkbox" data-id="{{ $category->id }}" name="status" class="js-switch" {{ $category->status == 1 ? 'checked' : '' }}>&nbsp;&nbsp;
                                    
                                    {{--<a href="{{ route('admin.services.view',$service->id) }}" data-toggle="tooltip" data-placement="top" title="View"><i class="fa fa-eye"></i></a>&nbsp;--}}
                                    <a href="{{route('admin.services.categories.edit',$category->id)}}" data-toggle="tooltip" data-placement="top" title="Edit">
                                        <i class="fa fa-edit"></i>
                                    </a>&nbsp;
                                </td>
                                {{--<td style="width:8%">
                                    <input type="checkbox" data-id="{{ $category->id }}" name="is_published" class="js-switch" {{ $category->is_published == 1 ? 'checked' : '' }}>
                                </td>--}}
                                
                                @php
                                    $i++;
                                @endphp
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                {{ $service_categories->withQueryString()->links('pagination::bootstrap-4') }}
            </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']);
// 			}
// 		}
// 	});
// });


</script>
<script>
    let elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch[name="status"]'));
    elems.forEach(function(html) {
        let switchery = new Switchery(html,  
        { size: 'small',
            color: '#0d6efd', 
            secondaryColor: '#dcdcdc'
         });
    });

    $('.js-switch[name="status"]').change(function () {
        let status = $(this).prop('checked') === true ? 1 : 0;
        let category_id = $(this).data('id');
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'categories/status-update/' + category_id,
            data: {
                'status': status,
                'category_id': category_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.status === 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>
<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 category_id = $(this).data('id');
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'categories/publish-status/' + category_id,
            data: {
                'is_published': is_published,
                'category_id': category_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