@extends('admin.layouts.admin')
@section('content')
<!-- [ Main Content ] start -->
<div class="pc-container">
    <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.services_types') }}">Services Types</a></li>
                            <li class="breadcrumb-item" aria-current="page">List</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->

        <!-- [ Main Content ] start -->
        <div class="row">
            @if ($message = Session::get('success'))
            <div class="col-sm-12">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ $message }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
            @endif

            <!-- [ sample-page ] start -->
            <div class="col-sm-12">
                <div class="card ">
                    <div class="card-header">
                        <h3 class="float-start">{{ $title }}</h3>
                        <a href="{{ route('admin.services_types.create') }}" class="btn btn-primary d-inline-flex align-item-center float-end">
                            <i class="ti ti-plus f-18"></i> Add Services Types
                        </a>
                    </div>
                    <div class="card-body">

                        <div class="dt-responsive table-responsive">
                            <table id="jsource-table" class="table  table-bordered nowrap"> </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ sample-page ] end -->
        </div>
        <!-- [ Main Content ] end -->


    </div>
</div>
@endsection
@push('scripts')
<script src="{{ asset('admin/js/plugins/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('admin/js/plugins/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('admin/js/plugins/sweetalert2.all.min.js') }}"></script>
<script src="{{ asset('admin/js/pages/ac-alert.js') }}"></script>
<script type="text/javascript">
    var table = $('#jsource-table').DataTable({
        ajax: "{{ route('admin.services_types') }}",
        processing: true,
        serverSide: true,
        deferRender: true,
        columns: [{
                title: '#',
                data: 'id',
                name: 'id',
            },
            {
                title: 'Image',
                data: 'image',
                name: 'image',
            },
            {
                title: 'Name',
                data: 'name',
                name: 'name',
            },
            {
                title: 'Active',
                data: 'active',
                name: 'active',
                orderable: false,
                searchable: false
            },
            {
                title: 'Action',
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

    $(document).on('click', '.deleteSelSingle', function(e) {
        e.preventDefault();
        if (confirm('Are you sure you want to delete ?')) {
            var favorite = [];
            favorite.push($(this).attr('data-val'));
            var ids = favorite.join(",");

            $.ajax({
                url: "{{ route('admin.services_types.destroy') }}",
                type: 'POST',
                data: {
                    // _method: 'DELETE',
                    "ids": ids
                },
                success: function(res) {
                    if (res.status == true) {
                        url = "{{ route('admin.services_types') }}";
                        //   localStorage.setItem("msg", res.msg);
                        window.location.href = url;
                    }
                }
            });
        }
    });

    // active
    $(document).on('click', '.active', function() {
        val = $(this).attr('data-value');
        name = $(this).attr('data-name');
        id = $(this).attr('data-id');
        text = name + '! You want to deactivate ?';

        if (val == 0) {
            text = name + '! You want to activate ?';
        }
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });
        swalWithBootstrapButtons
            .fire({
                title: 'Are you sure?',
                text: text,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            })
            .then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.services_types.updateActive') }}",
                        type: 'POST',
                        data: {
                            id: id,
                            value: val
                        },
                        success: function(res) {
                            if (res.status == true) {
                                swalWithBootstrapButtons.fire('Updated!', res.msg, 'success');

                            }
                        }
                    });


                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    if (val == 0) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                    swalWithBootstrapButtons.fire('Cancelled', '', 'error');
                }
            });
    });

 
</script>
@endpush