@extends('layouts.app')
@section('title', 'Middleware | Services')
@section('content')
<div class="container-fluid mt-2">
    @include('app.settings.index')
    <div class="col-lg-12">
        <div class="card ">
            <div class="card-body">
                <div class="p-0">
                    <table id="datatable" class="table table-bordered nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>Sl No</th>
                                @role('Super Admin')
                                <th>Company</th>
                                @endrole
                                <th>Service Name</th>
                                <th>Short Code</th>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($serviceData as $service)
                            <tr>
                                <td>{{ $loop->iteration}}</td>
                                @role('Super Admin')
                                <td>{!! isset($service->companies->company_name) ? $service->companies->company_name : "" !!}</td>
                                @endrole
                                <td>{{ $service->service_name}}</td>
                                <td>{{ $service->short_code}}</td>
                                <td>{{ $service->description}}</td>
                                <td>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox"  class="custom-control-input" id="customSwitch{{ $service->id }}"  value="{{ $service->id }}" onclick="serviceStatus(this.value)" @if($service->is_active==1) checked @endif>
                                        <label class="custom-control-label" for="customSwitch{{ $service->id }}">@if($service->is_active==1) Active @else Inactive @endif</label>
                                    </div>
                                </td>
                                <td>
                                    <a href="#"><span class="edit_service ml-2"  data-id="{{ $service->id }}">
                                        <img class="menuicon tbl_editbtn" src="{{asset('assets/images/edit.svg')}}" >&nbsp;
                                    </span></a>
                                    <a href="#"><span class="show_users ml-2"  data-id="{{ $service->id }}">
                                        <i class="fas fa-info-circle" title="Show Assigned Users"></i>
                                    </span></a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- Addingservice --}}
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form id="serviceForm" name="serviceForm" method="post" role="form" enctype="multipart/form-data">
        @csrf
        <!-- Modal Header -->
            <div class="modal-header">
            <h5 class="modal-title">Add Service</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div class="row">
            @role('Super Admin')  {{-- Super Admin --}}
            <div class="col-lg-4" id="company_select">
                <label for="example-email-input" class="col-form-label"> Company <span class="text-danger"> * </span></label>
                <Select required class="form-control select_role company_id" name="company_id" id="company_id">
                    <option selected disabled value="">Select Company</option>
                    @forelse($companyList as $company)
                    <option value="{{$company->id}}"> {{$company->company_name}}</option>
                    @empty
                    @endforelse
                </Select>
            </div>
            <div class="col-lg-4">
                <label for="name-input" class="col-form-label">Service Name<span class="text-danger"> * <span></label>
                <input id="servicename" name="service_name" type="text" class="form-control" autocomplete="off" placeholder="Enter service Name" required>
            </div>
            <div class="col-lg-4">
                <label for="name-input" class="col-form-label">Description<span class="text-danger">  <span></label>
                <input id="description" name="description" type="text" class="form-control" autocomplete="off" placeholder="Enter Description">
            </div>
            @endrole

            @if(Session::get('user_type_id') != 1)
                <input type="hidden" id="company_id" name="company_id" value="{{ Session::get('company_id')}}">
                <div class="col-lg-4">
                        <label for="name-input" class="col-form-label">Service Name<span class="text-danger"> * <span></label>
                        <input id="servicename" name="service_name" type="text" class="form-control" autocomplete="off" placeholder="Enter service Name" required>
                </div>
                <div class="col-lg-4">
                    <label for="name-input" class="col-form-label">Description<span class="text-danger">  <span></label>
                    <input id="description" name="description" type="text" class="form-control" autocomplete="off" placeholder="Enter Description">
                </div>
                <div class="col-lg-4">
                    <label for="name-input" class="col-form-label">Short Code<span class="text-danger">  <span></label>
                    <input id="short_code" name="short_code" type="text" class="form-control" autocomplete="off" placeholder="Enter Shortcode" >
                </div>
            @endif

          </div>
          <div class="row mt-1">
            @if(Session::get('user_type_id') == 1)
            <div class="col-lg-4">
                <label for="name-input" class="col-form-label">Short Code<span class="text-danger">  <span></label>
                <input id="short_code" name="short_code" type="text" class="form-control" autocomplete="off" placeholder="Enter Shortcode" >
            </div>
            <div class="col-lg-2">
                <br>
                <div class="mt-4">
                    <input type="checkbox" class="mx-1"  value="1" id="is_active" name="is_active" />
                    <label for="" class="">Is Active ?</label>
                </div>
            </div>
            @else
            <div class="col-lg-2">
                <div class="mt-4">
                    <input type="checkbox" class="mx-1"  value="1" id="is_active" name="is_active" />
                    <label for="" class="">Is Active ?</label>
                </div>
            </div>
            @endif
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="serviceVal();">Submit</button>

        </div>
        </form>
      </div>
    </div>
  </div>
{{-- Edit Model service --}}
    <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Edit service</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="post" id="updateservicefrm" name="updateservicefrm"  enctype="multipart/form-data">
					@csrf
                    <input  name="id" value="" id="service_id_ed" type="hidden"  />
					<div class="modal-body">
						<div class="row">
                            @role('Super Admin')  {{-- Super Admin --}}
                            <div class="col-lg-4" id="company_select">
                                <label for="example-email-input" class="col-form-label"> Company <span class="text-danger"> * </span></label>
                                <Select required class="form-control select_role company_id" name="company_id" id="company_id_ed">
                                    <option selected disabled value="">Select Company</option>
                                    @forelse($companyList as $company)
                                    <option value="{{$company->id}}"> {{$company->company_name}}</option>
                                    @empty
                                    @endforelse
                                </Select>
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Service Name<span class="text-danger"> * <span></label>
                                <input id="servicename_ed" name="service_name" type="text" class="form-control" autocomplete="off" placeholder="Enter service Name" required>
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Description<span class="text-danger">  <span></label>
                                <input id="description_ed" name="description" type="text" class="form-control" autocomplete="off" placeholder="Enter Description">
                            </div>
                            @endrole

                            @if(Session::get('user_type_id') != 1)
                                <input type="hidden" id="company_id_ed" name="company_id" value="{{ Session::get('company_id')}}">
                                <div class="col-lg-4">
                                        <label for="name-input" class="col-form-label">Service Name<span class="text-danger"> * <span></label>
                                        <input id="servicename_ed" name="service_name" type="text" class="form-control" autocomplete="off" placeholder="Enter service Name" required>
                                </div>
                                <div class="col-lg-4">
                                    <label for="name-input" class="col-form-label">Description<span class="text-danger">  <span></label>
                                    <input id="description_ed" name="description" type="text" class="form-control" autocomplete="off" placeholder="Enter Description">
                                </div>
                                <div class="col-lg-4">
                                    <label for="name-input" class="col-form-label">Short Code<span class="text-danger">  <span></label>
                                    <input id="short_code_ed" name="short_code" type="text" class="form-control" autocomplete="off" placeholder="Enter Shortcode" >
                                </div>
                            @endif

                          </div>
                          <div class="row mt-1">
                            @if(Session::get('user_type_id') == 1)
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Short Code<span class="text-danger">  <span></label>
                                <input id="short_code_ed" name="short_code" type="text" class="form-control" autocomplete="off" placeholder="Enter Shortcode" >
                            </div>
                            <div class="col-lg-2">
                                <br>
                                <div class="mt-4">
                                    <input type="checkbox" class="mx-1"  value="1" id="is_active_ed" name="is_active" />
                                    <label for="" class="">Is Active ?</label>
                                </div>
                            </div>
                            @else
                            <div class="col-lg-2">
                                <div class="mt-4">
                                    <input type="checkbox" class="mx-1"  value="1" id="is_active_ed" name="is_active" />
                                    <label for="" class="">Is Active ?</label>
                                </div>
                            </div>
                            @endif
                          </div>
                </div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary">Update</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="showuserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Assigned Users</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <div class="row justify-content-center">
                    <table id="user-datatable" class="table table-bordered nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th style="width:5%"  class="text-center">Sl No</th>
                                <th style="width:30%"  class="text-center">User Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Your table body content goes here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- Js --}}
<script type="text/javascript">
    $(function () {
                @if(Session::has('success'))
                new PNotify({
                title: 'Success',
                delay: 500,
                text:  "{{Session::get('success')}}",
                type: 'success'
                });

                @endif
                @if ($errors->any())
                var err = "";
                @foreach ($errors->all() as $error)

                    new PNotify({
                    title: 'Error',
                    text: "{{$error}}",
                    delay: 800,
                    type: 'error'
                    });
                    @endforeach
                @endif
            });


    function serviceStatus(value) {
        window.location.href = '/serviceStatus/' + value;
    }
    $(document).ready(function()
        {

            var $tabid=  'tab3';
            $(".odtabs").not("#tab3").addClass('btn-outline-secondary');
            $("#tab3").addClass('btn-secondary');

            $('.modal').on('hidden.bs.modal', function() {
                $(this).find('form')[0].reset();
                $(this).find('form').parsley().reset();
            });

            window.ParsleyValidator
            .addValidator('fileextension', function (value, requirement) {
            var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
            var arr=[];
            $.each(tagslistarr,function(i,val){
            arr.push(val);
            });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
            return true;
            } else {
            return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
        $("form").parsley();
            var table = $('#datatable').DataTable({
                responsive: true,
                dom: 'l<"toolbar">Bfrtip',
                buttons: [
                    'excel'
                ],
                initComplete: function(){
                    $("div.toolbar").html('<button id="addservice" type="button" class="ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("assets/images/add.svg")}}">&nbsp;Add service</button><br />');
                }
            });
        });
        function getservice(){
            window.location.href = "/service";
        }
        function serviceVal(){
            if ($("#serviceForm").parsley()) {
                if ($("#serviceForm").parsley().validate()) {
                    event.preventDefault();
                    if ($("#serviceForm").parsley().isValid()) {
                        $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/serviceInsert') }}",
                        data: new FormData($("#serviceForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if(response.msg=="service Name Already Exists!"){

                                new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error'
                                });
                                return false;
                            }
                            else if(response.msg=="Service Added Successfully!"){

                                new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                                });
                              window.location.reload();
                            }
                        },
                        error:function(response) {

                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err+error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 1000
                            });
                        }
                        });
                    }
                }
            }
        }

    function serviceUpdate(){
        if ($("#serviceUpdateForm").parsley()) {
            if ($("#serviceUpdateForm").parsley().validate()) {
                event.preventDefault();
                if ($(serviceUpdateForm).parsley().isValid()) {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/updateService') }}",
                        data: new FormData($("#serviceUpdateForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err +'<br>' + error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 2000
                            });
                        }
                    });
                }
            }
        }
        return false;
    }

    // Edit service
     $('#datatable').on('click','.edit_service',function () {
		var id = $(this).data('id');
		var url = '{{ route("edit_service") }}';
		$.ajax({
			type: "post",
			url: url,
			data: { id:id , _token: '{{csrf_token()}}'},
			success: function(response)
			{
				var res = response;
                console.log(res);
                $('#company_id_ed').val(res['company_id']);
                $('#servicename_ed').val(res['service_name']);
                $("#service_id_ed").val(res['id']);
                $("#short_code_ed").val(res['short_code']);
                $("#description_ed").val(res['description']);
                $("#output_type_ed").val(res['output_type']);


				if(res['is_active'] == 1) {
					$( "#is_active_ed" ).attr('checked', 'checked');
				} else {
					$( "#is_active_ed" ).removeAttr('checked', 'checked');
				}
				$("#myModalEdit").modal('show');
			}
		});
	});


    $('#updateservicefrm').on('submit', function(event){
		event.preventDefault();
		if($('#updateservicefrm').parsley().isValid()){
			var url = '{{ route("updateService") }}';
			var formData = new FormData(this);
			$.ajax({
				type: "post",
				url: url,
				data: formData,
                contentType: false,
                processData: false,
				success: function(response) {
					new PNotify({
						title: 'Success',
						text:  response.msg,
						type: 'success'
					});
					setTimeout(function(){  location.reload(); }, 800);
				},
				error:function(response) {
					var err = "";
					$.each(response.responseJSON.errors,function(field_name,error){
						err = err +'<br>' + error;
					});
					new PNotify({
						title: 'Error',
						text:err,
						type: 'error',
						delay: 2000
					});
				}
			});
		}
	});
</script>


<script>
    $(document).ready(function () {
        $('.delete-service').on('click', function () {
            Swal.fire({
            title: 'Are you sure?',
            text: 'You want to delete this Service!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            console.log(result);
            if (result.value) {
                deleteService(serviceId);
            }
        });
            var serviceId = $(this).data('service-id');
            showDeleteConfirmation(serviceId);
        });
    });

    function deleteService(serviceId) {
        $.ajax({
            type: "POST",
            url: "{{ url('/deleteService') }}",
            data: { id: serviceId, _token: '{{ csrf_token() }}' },
            dataType: 'json',
            success: function (response) {
                if (response.data === 'success') {
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Your service has been deleted.',
                        icon: 'success'
                    }).then(() => {
                        location.reload();
                    });


                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Failed to delete service.',
                        icon: 'error'
                    });
                }
            },
            error: function (xhr, status, error) {
                console.error('AJAX request failed:', error);
            }
        });
    }

    // Show Assigned Users
    $('#datatable').on('click', '.show_users', function () {
        var id = $(this).data('id');
        var url = '{{ route("show_user") }}';

        $.ajax({
            type: "post",
            url: url,
            data: { id: id, _token: '{{csrf_token()}}' },
            success: function (response) {
                // Initialize DataTable with your response data
                var dataTable = $('#user-datatable').DataTable({
                    data: response,
                    "destroy": true,
                    "paging": false,
                    "searching": false,
                    "ordering": false,
                    "info": false,
                    "scrollCollapse": true,
                    columns: [
                        {
                            data: null,
                            orderable: false,
                            render: function (data, type, row, meta) {
                                return meta.row + 1;
                            },
                        },
                        {
                            data: null,
                            render: function (data, type, row) {
                                return data.first_name + ' ' + data.last_name;
                            },
                        },
                    ],
                });

                // Add "Sl No" starting from 1
                dataTable.on('order.dt search.dt', function () {
                    dataTable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }).draw();
                $("#showuserModal").modal('show');
            }
        });
    });

</script>

@endsection