@extends('voyager::master')

@php $title="Services" @endphp

@section('page_title', __('voyager::generic.viewing') . ' ' . $title)

@section('page_header')
    <div class="page-header">
        <div class="row align-items-center py-2">
            <div class="col-sm mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}" src="{{ asset('thumb.png') }}"
                        width="38" alt="img">
                    <div class="w-0 flex-grow pl-2">
                        <h1 class="page-header-title mb-0">{{ __('services.page_title') }} <span
                                class="badge badge-info"></span></h1>
                        <p class="page-header-text m-0">{{ __('services.description') }}</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
@stop

@section('content')
    <div class="page-content">
        <div class="alerts">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>{{ __('datatable.service.service_name') }}</th>
                                        <th>{{ __('datatable.service.service_image') }}</th>
                                        <th>{{ __('datatable.service.service_category') }}</th>
                                        <th>{{ __('datatable.service.kyc_required') }}</th>
                                        <th>{{ __('datatable.status') }}</th>
                                        <th>{{ __('voyager::generic.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (isset($services))
                                        @foreach ($services as $service)
                                            <tr>
                                                <td>{{ checkAndReturnValue($service, 'name') }}</td>
                                                <td>
                                                    <img src=" {{ checkAndReturnValue($service, 'image') }} "
                                                        class="img-fluid" style="height: 30px;">
                                                </td>
                                                <td> {{ checkAndReturnValue($service, 'category') }} </td>
                                                <td>{{ checkAndReturnValue($service, 'name') ? 'Yes' : 'No' }}</td>
                                                <td class="d-flex p-0">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input category-{{ checkAndReturnValue($service, 'category') }} toggle-switch"
                                                            id="toggle-{{ $loop->index }}"
                                                            data-service-id="{{ checkAndReturnValue($service, 'id') }}"
                                                            data-service-category="{{ checkAndReturnValue($service, 'category') }}"
                                                            @if (checkAndReturnValue($service, 'status') == 'ACTIVE') checked @endif>

                                                        <label class="custom-control-label"
                                                            for="toggle-{{ $loop->index }}"></label>
                                                    </div>

                                                    <div class="mt-3 pb-1">
                                                        <span
                                                            class="p-1 label label-{{ strtolower(checkAndReturnValue($service, 'status')) }}"
                                                            id="status-label-{{ $loop->index }}">

                                                        </span>
                                                    </div>
                                                </td>
                                                <td class="">
                                                    @if(isset($service['subservicesstatus']) && $service['subservicesstatus'])
                                                    <a href="{{ route('voyager.services.sub-services.index',['name'=> $service['category']])}}" class="btn btn-sm btn-warning font-weight-bold">
                                                    <i class="voyager-eye"></i>

                                                       {{__('datatable.view_sub_service')}}
                                                    </a>
                                                    @endif
                                                    {{-- @if (hasPermission('edit', 'Service'))
                                                        <a href="{{ route('voyager.services.edit', $loop->index) }}"
                                                            class="btn btn-sm btn-primary">
                                                            <i class="voyager-edit"></i> {{ __('voyager::generic.edit') }}
                                                        </a>
                                                    @endif
                                                    @if (hasPermission('delete', 'Service'))
                                                        <form
                                                            action="{{ route('voyager.services.destroy', $loop->index) }}"
                                                            method="POST" style="display:inline-block;"
                                                            class="delete-form">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="button"
                                                                class="btn btn-sm btn-danger delete-button">
                                                                <i class="voyager-trash"></i>
                                                                {{ __('voyager::generic.delete') }}
                                                            </button>
                                                        </form>
                                                    @endif --}}
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            var searchLabel = "@lang('datatable.sSearch')";
            var lengthMenuLabel = "@lang('datatable.sLengthMenu')";
            var infoLabel = "@lang('datatable.sInfo')";
            var infoEmptyLabel = "@lang('datatable.sInfoEmpty')";
            var infoFilteredLabel = "@lang('datatable.sInfoFiltered')";
            var loadingRecordsLabel = "@lang('datatable.sLoadingRecords')";
            var processingLabel = "@lang('datatable.sProcessing')";
            var zeroRecordsLabel = "@lang('datatable.sZeroRecords')";

            var firstLabel = "@lang('datatable.oPaginate.sFirst')";
            var lastLabel = "@lang('datatable.oPaginate.sLast')";
            var nextLabel = "@lang('datatable.oPaginate.sNext')";
            var previousLabel = "@lang('datatable.oPaginate.sPrevious')";

            var sortAscendingLabel = "@lang('datatable.oAria.sSortAscending')";
            var sortDescendingLabel = "@lang('datatable.oAria.sSortDescending')";
            $('#dataTable').DataTable({
                "order": [],
                language: {
                    search: searchLabel,
                    lengthMenu: lengthMenuLabel,
                    info: infoLabel,
                    infoEmpty: infoEmptyLabel,
                    infoFiltered: infoFilteredLabel,
                    loadingRecords: loadingRecordsLabel,
                    processing: processingLabel,
                    zeroRecords: zeroRecordsLabel,
                    paginate: {
                        first: firstLabel,
                        last: lastLabel,
                        next: nextLabel,
                        previous: previousLabel
                    },
                    aria: {
                        sortAscending: sortAscendingLabel,
                        sortDescending: sortDescendingLabel
                    }
                },
            });


    $('#dataTable').on('click', '.toggle-switch', function() {

                var category = $(this).data('service-category');
                var id = $(this).data('service-id');
                var csrfToken = "{{ csrf_token() }}";

                $.ajax({
                    url: "{{ route('voyager.services.status') }}",
                    method: 'POST',
                    headers: {
                        'X-CSRF-Token': csrfToken
                    },
                    data: {
                        id: id,
                        _token: csrfToken,
                        category: category,
                    },
                    success: function(response) {
                    $(`.category-${category}`).prop('checked', response.status === 'ACTIVE');
                        toastr.success(response.message);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });
        });
    </script>
@endsection

@push('javascript')
    <script src="{{ asset('assets/admin/js/deleteConfirmation.js') }}"></script>
@endpush