@extends('layouts.app')

@section('title','Actions')

@push('styles')
<style>
   
   th:last-child, tr td:last-child{
   display: table-cell!important;
   }
     .dataTables_wrapper:before {
   content: 'Permission Actions';
   }
 
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Actions</h5>
        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addActionModal">
            <i class="fas fa-plus"></i> Add New
        </button>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table id="actionsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Action Name</th>
                        <th>Label</th>
                        <th>Created At</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Add Action Modal -->
@push('modals')
<div class="modal fade" id="addActionModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="addActionForm">
        @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Action</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div class="form-group mb-3">
                    <label>Action Key <span class="asterisk">*</span></label>
                    <input type="text" class="form-control" name="name" placeholder="ex: create" required>
                </div>

                <div class="form-group mb-3">
                    <label>Action Label <span class="asterisk">*</span></label>
                    <input type="text" class="form-control" name="label" placeholder="ex: Create" required>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Action</button>
            </div>
        </div>
    </form>
</div>

</div>
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="editForm" method="POST" action="">
        @csrf
        @method('PUT')
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Action</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit_id" name="id">
                <div class="form-group mb-3">
                    <label>Action Key <span class="asterisk">*</span></label>
                    <input type="text" id="edit_name" name="name" class="form-control" required>
                </div>
                <div class="form-group mb-3">
                    <label>Action Label <span class="asterisk">*</span></label>
                    <input type="text" id="edit_label" name="label" class="form-control" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </div>
    </form>
</div>

</div>

@endpush
@endsection

@push('scripts')
<script>
$(function() {

  $.ajaxSetup({
  headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
 });
 

  let table = $('#actionsTable').DataTable({
    processing: true,
    serverSide: true,
    searching: true,
    "language": {
        "processing": "Please wait",
        searchPlaceholder: 'Search',
        sSearch: '',
    },
    responsive: {
        details: false
    },
    
    ajax: {
        url: "{{ route('settings.actions.index') }}",
        type: "GET",
    },
    
    columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
        { data: 'name', name: 'name', orderable: false },
        { data: 'label', name: 'label', orderable: false },
        { data: 'created_at', name: 'created_at', orderable: true },
        { data: 'actions', name: 'actions',orderable: false ,searchable: false},
    ],
    
    iDisplayLength: 50,
    
});

    // Add action form submit via AJAX
    $('#addActionForm').on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: "{{ route('settings.actions.store') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(res){
                if(res.status){
                    $('#addActionModal').modal('hide');
                    $('#addActionForm')[0].reset();
                    table.ajax.reload();
                    toastr.success(res.message);
                } else {
                    toastr.warning("Something went wrong!");
                }
            },
            error: function(xhr){
                let errors = xhr.responseJSON.errors;
                $.each(errors, function(key, value){
                    toastr.error(value[0]);
                });
            }
        });
    });

    $(document).on('click', '.btn-action-edit', function () {
    let id = $(this).data('id');

    $.get("{{ route('settings.actions.edit', ':id') }}".replace(':id', id), function (data) {

        $('#edit_id').val(data.data.id);
        $('#edit_name').val(data.data.name);
        $('#edit_label').val(data.data.label);

        $('#editModal').modal('show');
    });
});
$('#editForm').submit(function (e) {
    e.preventDefault();

    let id = $('#edit_id').val();

    $.ajax({
        url: "{{ route('settings.actions.update', ':id') }}".replace(':id', id),
        type: "PUT",
        data: $(this).serialize(),
        success: function (res) {
            toastr.success(res.message || 'Updated successfully');
            $('#editModal').modal('hide');
            $('#actionsTable').DataTable().ajax.reload();
        },
        error: function () {
            toastr.error('Update failed');
        }
    });
});


});
function deleteAction(id) {   
    swal({
        title: "Are you sure?",
        text: "Do you really want to delete this action?",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            $.ajax({
                url: "{{ route('settings.actions.destroy', ':id') }}".replace(':id', id),
                type: "DELETE",
                data: {
                    _token: "{{ csrf_token() }}" // important for Laravel DELETE
                },
                success: function(d) {
                    if (d.status) {
                        toastr.success(d.message);
                        $('#actionsTable').DataTable().ajax.reload();
                    } else {
                        toastr.warning(d.message);
                    }
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON.message || "Something went wrong");
                }
            });
        }
    }); 
}

</script>
@endpush