@extends('setup.index')
@section('title', __('form.settings') . " : " .__('form.leads_sources'))
@section('setting_page')
<style>
    .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

</style>
<meta name="csrf-token" content="{{ csrf_token() }}">



    <div class="main-content">

         <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
            @lang('form.new_lead_source')
        </button>

        <!-- Modal -->
        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalCenterTitle">@lang('form.lead_source')</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="myModalForm" action="" method="POST">

                            
                            <input type="hidden" name="id" value="">
                            <div class="form-group">
                                <label>@lang('form.name') <span class="required">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="name">
                                <div class="invalid-feedback d-block name"></div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('form.close')</button>
                        <button type="button" class="btn btn-primary" id="submitForm">@lang('form.submit')</button>
                    </div>
                </div>
            </div>
        </div>


        <hr>
        <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="data">
            <thead>
            <tr>
                <th>@lang("form.name")!</th>
                <th>@lang("form.options")</th>
            </tr>
            </thead>
        </table>
    </div>
@endsection
@section('onPageJs')
    <script>

        $(function() {

            dataTable = $('#data').DataTable({
                dom: 'Bfrtip',
                buttons: [

                    {
                        init: function(api, node, config) {
                            $(node).removeClass('btn-secondary')
                        },
                        className: "btn-light btn-sm",
                        extend: 'collection',
                        text: 'Export',
                        buttons: [
                            'copy',
                            'excel',
                            'csv',
                            'pdf',
                            'print'
                        ]
                    }
                ],

                "language": {
                    "lengthMenu": '_MENU_ ',
                    "search": '',
                    "searchPlaceholder": "{{ __('form.search') }}"
                    // "paginate": {
                    //     "previous": '<i class="fa fa-angle-left"></i>',
                    //     "next": '<i class="fa fa-angle-right"></i>'
                    // }
                }

                ,
                responsive: true,
                processing: true,
                serverSide: true,
                //iDisplayLength: 5
                pageLength: {{ data_table_page_length() }},
                ordering: false,
                // "columnDefs": [
                //     { className: "text-right", "targets": [2,4] },
                //     { className: "text-center", "targets": [5] }
                //
                //
                // ],
                "ajax": {
                    "url": '{!! route("datatables_leads_source") !!}',
                    "type": "POST",
                    'headers': {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }
            }).
            on('mouseover', 'tr', function() {
                jQuery(this).find('div.row-options').show();
            }).
            on('mouseout', 'tr', function() {
                jQuery(this).find('div.row-options').hide();
            });



            $('#myModal').on('hidden.bs.modal', function (e) {

                $('.error').html("");
                $("#myModal").find("input[type=text], textarea, input[type=hidden]").val("");
            });

            $( "input[type=text], textarea" ).focus(function() {

                $(this).next('.error').html("");
            });


            $('#submitForm').click(function (e) {
                e.preventDefault();

                var postData = $('#myModalForm').serializeArray();
                postData.push({ "name": "_token", "value" : "{{ csrf_token() }}" });

                var id = $('input[name=id]').val();

                var url = (id) ? "{{ route('patch_lead_source', ':id') }}" : "{{ route('post_lead_source') }}";           
                

                if(id)
                {
                    url = url.replace(':id', id);
                    postData.push({ "name": "_method", "value" : "PATCH" });
                 
                }

                $.post( url , postData )
                    .done(function( response ) {
                        if(response.status == 2)
                        {

                            $.each(response.errors, function( index, value ) {

                                $('.' + index).html(value.join());
                            });


                        }
                        else
                        {
                            dataTable.draw();

                            $("#myModal").find("input[type=text], textarea").val("");

                            $('#myModal').modal('hide');
                        }
                    });



            });



        });


        $(document).on('click','.edit_item',function(e){
            //  $(this) = your current element that clicked.
            // additional code
            e.preventDefault();

            var $this = $(this);

            // Check if the item is disabled
            if ($this.hasClass('disabled')) {
                return; // Prevent modal from opening
            }
            
            var id = $(this).data('id');
            var name = $(this).data('name');
       
            $('input[name=id]').val(id);

            $('input[name=name]').val(name);

            $('#myModal').modal('show');


        });

    $(document).on('click', '.disable_item', function(e) {
        e.preventDefault();

        var $this = $(this);
        var isDisabled = $this.data('disabled') || false;

        // Toggle state based on current status
        if (isDisabled) {
            $this.closest('tr').find('.edit_item').removeClass('disabled');
            $this.closest('tr').find('.delete_item').removeClass('disabled'); 
            $this.data('disabled', false); 
            $this.css('filter', '');   
            console.log('Toggle enable:', $this.data('id'));

        } else {
            $this.closest('tr').find('.edit_item').addClass('disabled');
            $this.closest('tr').find('.delete_item').addClass('disabled'); 
            $this.data('disabled', true); 
            $this.css('filter', 'blur(0.7px)'); 
            console.log('Toggle disable:', $this.data('id'));

        }
    });

//     $(document).on('change', '.toggle-status', function() {
//     var leadSourceId = $(this).data('id');
//     var isChecked = $(this).is(':checked') ? 1 : 0;

//     $.ajax({
//         url: '{{ route("toggle_leads_source_status") }}',
//         type: 'POST',
//         data: {
//             _token: '{{ csrf_token() }}',
//             id: leadSourceId
//         },
//         success: function(response) {
//             console.log(response.message);
//         },
//         error: function(xhr) {
//             console.error(xhr.responseJSON.message);
//         }
//     });
// });

$(document).on('change', '.toggle-status', function () {
    let status = $(this).is(':checked') ? 1 : 0;
    let id = $(this).data('id');

    $.ajax({
    url: '/lead-source/update-status',  // Make sure this matches your route
    type: 'POST',
    data: {
        id: $(this).data('id'),
        status: $(this).is(':checked') ? 1 : 0,
        _token: $('meta[name="csrf-token"]').attr('content')
    },
    success: function (response) {
        alert('Status updated successfully!');
    },
    error: function (xhr) {
        alert('Error: ' + xhr.status + ' ' + xhr.statusText);
    }
});
});





    </script>
@endsection