@extends('admin.layouts.app')

@section('content')
@push('styles')
<style>
    div#myTable_filter {
    display: none;
}
</style>
@endpush
        <div class="container-fluid py-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                        Roles</li>
                </ol>
            </nav>
            <div class="row mt-4">
                <div class="col-12">
                    <div class="row justify-content-between">
                        <div class="col-md-4">
                            <a class="btn bg-gradient-info mb-3" href="./dashboard.html">Back</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                @if(isset($role))
                  <form action="{{ route('admin.roles.update', @$role->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="card pt-3 mb-4">
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="d-md-flex align-items-center justify-content-between px-3 mb-3">
                                <div class="table-top-left d-flex align-items-center justify-content-between">
                                    <div class="d-md-flex align-items-center justify-content-start">
                                        <div class="d-flex align-items-center justify-content-start"
                                            style="margin-right: 15px;">
                                            <label class="mb-0" style="margin-right: 10px; white-space: nowrap;">Role
                                                Title</label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ @$role->name }}" placeholder="Role" required>
                                            @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="check-wrap">
                                            <div class="d-flex align-items-center justify-content-start"
                                                style="margin-right: 15px;">
                                                <label class="mb-0"
                                                    style="margin-right: 10px; white-space: nowrap;">Type</label>
                                                <div class="form-check form-check-inline">
                                                  <input class="form-check-input" type="radio" id="activeRadio" value="1" name="status" checked>
                                                  <label class="form-check-label custom-radio-label" for="activeRadio">Active</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                  <input class="form-check-input" type="radio" id="inactiveRadio" value="0" name="status">
                                                  <label class="form-check-label custom-radio-label" for="inactiveRadio">Inactive</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="table-top-right">
                                  <button type="submit" class="btn bg-gradient-info mb-0 mr-2">Submit</button>

                                    {{-- <a class="btn bg-gradient-info mb-0 mr-2" href="">Submit</a> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                  </form>
                  @else
                  <form action="{{ route('admin.roles.store') }}" method="POST">
                    @csrf
                    <div class="card pt-3 mb-4">
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="d-md-flex align-items-center justify-content-between px-3 mb-3">
                                <div class="table-top-left d-flex align-items-center justify-content-between">
                                    <div class="d-md-flex align-items-center justify-content-start">
                                        <div class="d-flex align-items-center justify-content-start"
                                            style="margin-right: 15px;">
                                            <label class="mb-0" style="margin-right: 10px; white-space: nowrap;">Role
                                                Title</label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" placeholder="Role" required>
                                            @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="check-wrap">
                                            <div class="d-flex align-items-center justify-content-start"
                                                style="margin-right: 15px;">
                                                <label class="mb-0"
                                                    style="margin-right: 10px; white-space: nowrap;">Type</label>
                                                <div class="form-check form-check-inline">
                                                  <input class="form-check-input" type="radio" id="activeRadio" value="1" name="status" checked>
                                                  <label class="form-check-label custom-radio-label" for="activeRadio">Active</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                  <input class="form-check-input" type="radio" id="inactiveRadio" value="0" name="status">
                                                  <label class="form-check-label custom-radio-label" for="inactiveRadio">Inactive</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="table-top-right">
                                  <button type="submit" class="btn bg-gradient-info mb-0 mr-2">Submit</button>

                                    {{-- <a class="btn bg-gradient-info mb-0 mr-2" href="">Submit</a> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                  </form>
                  @endif
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card pt-3 mb-4">
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="d-md-flex align-items-center justify-content-between px-3 mb-3">
                                <div class="table-top-left d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center justify-content-between"
                                        style="margin-right: 15px;">
                                        <label class="mb-0" style="margin-right: 10px;">Show</label>
                                        <select class="form-select" id="validationCustom04" style="width: 100px;">
                                            <option>01</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="table-top-right">
                                    <div class="input-group">
                                        <span class="input-group-text text-body"><i class="fas fa-search"
                                                aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" id="search_name" placeholder="Search">
                                    </div>
                                </div>
                            </div>
                            @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0" id="myTable">
                                    <thead>
                                        <tr>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                SL.No</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Role Title</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Status</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                definition</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                      @foreach ($roles as $role)
                                      <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <h6 class="mb-0 text-sm">{{ $loop->iteration }}</h6>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0">{{ $role->name }}</p>
                                        </td>
                                        <td>
                                            <h6 class="mb-0">
                                                @if ($role->status == 1)
                                                    <span class="badge bg-success">Active</span>
                                                @else
                                                    <span class="badge bg-danger">InActive</span>
                                                @endif
                                            </h6>
                                        </td>
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0">15 Privileges</p>
                                        </td>
                                        <td>
                                            <ul class="nav table-btn-group" style="flex-wrap: nowrap;">
                                                <li class="nav-item" style="display: flex;
                                                align-items: center;">
                                                    <a class="mb-0 mx-2 my-1" style="display: inline-block;"
                                                        href="{{ route('admin.roles.edit', $role->id) }}"><i class="fas fa-edit" aria-hidden="true"></i></a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" role="button"
                                                        data-bs-toggle="modal" data-bs-target="#exampleModal{{ $role->id }}"
                                                        href="#">Change Status</a>
                                                </li>
                                                {{-- <li class="nav-item">
                                                  <a class="btn bg-gradient-info mb-0 mr-2 btn-sm delete-record" data-record-id="{{ $role->id }}" href="#">Delete</a>
                                                </li> --}}
                                                <li class="nav-item">
                                                    <a class="btn bg-gradient-info mb-0 mr-2 btn-sm"
                                                        href="./set_privilege.html">Set
                                                        Privilege</a>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <div class="modal fade" id="exampleModal{{ $role->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $role->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <form action="{{ route('admin.role.update.status', ['id' => $role->id]) }}" method="POST">
                                                    @csrf
                                                    <div class="modal-body pb-0">
                                                        <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel{{ $role->id }}">Do you want to change the status ?</h1>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="inlineCheckboxYes{{ $role->id }}" name="status" value="1" @if($role->status == 1) checked @endif>
                                                            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxYes{{ $role->id }}">Active</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="inlineCheckboxNo{{ $role->id }}" name="status" value="0" @if($role->status == 0) checked @endif>
                                                            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxNo{{ $role->id }}">Inactive</label>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer border-0 pt-0">
                                                        <button type="submit" class="btn bg-gradient-info mb-0 mr-2 btn-sm">Confirm</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div> 
                                      @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body pb-0">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Do you want to change the status ?</h1>
                    <p><strong>Register :</strong> <span style="color: #198754;">Staff Data Saved Successfully.</span>
                    </p>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button> -->
                    <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_staff.html">Ok</a>
                </div>
            </div>
        </div>
    </div>

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

  <!-- Include SweetAlert CSS and JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

  
  
  <script src="{{ asset('js/app.js') }}"></script>
  <script>
  
  $(document).ready(function() {
    let table = new DataTable('#myTable', {
        responsive: true,
        pageLength: 20, // Set the number of records per page
        dom: 'Bfrtip', // Add buttons
        buttons: ['copy'], // You can add more buttons like 'excel', 'pdf', etc.
    });

    // Add an event listener for the search input
    $('#search_name').on('input', function() {
        table.search(this.value).draw(); // Apply the search and redraw the table
    });
  });

         // Add an event listener for the delete buttons
         $('.delete-record').on('click', function (e) {
    e.preventDefault();
    var recordId = $(this).data('record-id');
    var $this = $(this); // Store reference to $(this)

    // Show the SweetAlert confirmation dialog
    swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this record!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            // User confirmed, perform the delete action
            $.ajax({
                type: "POST",
                url: "{{ route('admin.roles.delete') }}", // Replace with your delete route
                data: {
                    "_token": "{{ csrf_token() }}",
                    "id": recordId
                },
                success: function (response) {
                    if (response.success) {
                        // Record deleted successfully, you can remove the table row
                        swal("The role has been deleted!", {
                            icon: "success",
                        });
                        // Remove the table row using $this
                        $this.closest('tr').remove();
                        location.reload();
                    } else {
                        swal("Oops! Something went wrong.", {
                            icon: "error",
                        });
                    }
                },
                error: function (xhr, status, error) {
                    swal("Oops! Something went wrong.", {
                        icon: "error",
                    });
                }
            });
        }
    });
});

</script>
  
  @endsection