@extends('layouts.main')
@section('content')
<style>
   /* ===============================
   BUTTON DESIGN SYSTEM
   ================================ */
   .btn-add{
   background:#0d6efd;
   color:#fff;
   border:none;
   border-radius:8px;
   padding:6px 14px;
   font-size:14px;
   transition:.25s;
   }
   .btn-add:hover{
   background:#0b5ed7;
   transform:translateY(-2px);
   }
   /* ACTION BUTTON BASE */
   .btn-action{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:36px;
   height:36px;
   border-radius:8px;
   border:none;
   font-size:14px;
   transition:.25s;
   }
   /* EDIT */
   .btn-edit{
   background:#ffc107;
   color:#000;
   }
   .btn-edit:hover{
   background:#e0a800;
   }
   /* DELETE */
   .btn-delete{
   background:#dc3545;
   color:#fff;
   }
   .btn-delete:hover{
   background:#bb2d3b;
   }
   /* SAVE */
   .btn-save{
   background:#198754;
   color:#fff;
   border:none;
   border-radius:8px;
   padding:5px 12px;
   margin-top:8px;
   }
   .btn-save:hover{
   background:#157347;
   }
   .modal-footer .btn-add{
   min-width:110px;
   }
   /* ACTION BUTTON GROUP */
   .action-buttons{
   display:flex;
   justify-content:flex-end;
   gap:8px;
   }
   /* ROLE BADGE */
   .role-badge{
   background:#eef2ff;
   padding:6px 10px;
   border-radius:6px;
   font-size:13px;
   }
   /* DROPDOWN */
   .dropdown-menu{
   border-radius:8px;
   font-size:14px;
   }
   /* TABLE */
    .permission-modern-table{
        border-collapse: separate;
        border-spacing: 0 14px;
    }

    /* HEAD */
    .permission-modern-table thead th{
        border: none;
        background: #f8fafc;
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        padding: 16px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* ROW */
    .permission-modern-table tbody tr{
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        border-radius: 18px;
        transition: 0.3s ease;
    }

    .permission-modern-table tbody tr:hover{
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    }

    .permission-modern-table tbody td{
        padding: 18px 16px;
        vertical-align: middle;
        border-top: none;
        border-bottom: none;
    }

    /* ID */
    .permission-id{
        font-weight: 700;
        color: #6366f1;
        font-size: 15px;
    }

    /* ICON */
    .permission-icon{
        width: 50px;
        height: 50px;
        border-radius: 16px;
        background: linear-gradient(135deg,#6366f1,#8b5cf6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        box-shadow: 0 5px 18px rgba(99,102,241,0.25);
    }

    /* DROPDOWN BUTTON */
    .btn-action-dropdown{
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 12px;
        background: #f8fafc;
        color: #475569;
        transition: 0.3s ease;
    }

    .btn-action-dropdown:hover{
        background: #6366f1;
        color: #fff;
        transform: scale(1.05);
    }

    /* DROPDOWN */
    .custom-dropdown{
        border-radius: 16px;
        padding: 10px;
        min-width: 220px;
    }

    .custom-dropdown-item{
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 500;
        transition: 0.3s ease;
    }

    .custom-dropdown-item:hover{
        background: #f1f5f9;
    }

    /* MODAL */
    .modern-modal{
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 18px 50px rgba(0,0,0,0.15);
    }

    .modal-header-custom{
        background: linear-gradient(135deg,#f8fafc,#eef2ff);
        padding: 22px 24px;
        border-bottom: 1px solid #e2e8f0;
    }

    /* INPUT */
    .modern-input-group{
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }

    .modern-input-group .input-group-text{
        background: #f8fafc;
        border: none;
        color: #6366f1;
    }

    .modern-input{
        border: none;
        padding: 14px;
        box-shadow: none !important;
    }

    /* BUTTONS */
    .btn-cancel{
        border: none;
        background: #f1f5f9;
        color: #475569;
        padding: 12px 20px;
        border-radius: 14px;
        font-weight: 600;
        transition: 0.3s ease;
    }

    .btn-cancel:hover{
        background: #e2e8f0;
    }

    .btn-update{
        border: none;
        background: linear-gradient(135deg,#6366f1,#8b5cf6);
        color: #fff;
        padding: 12px 22px;
        border-radius: 14px;
        font-weight: 600;
        transition: 0.3s ease;
    }

    .btn-update:hover{
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(99,102,241,0.25);
    }

    /* EMPTY */
    .empty-state{
        padding: 40px;
        text-align: center;
    }

    /* MOBILE */
    @media(max-width:768px){

        .permission-modern-table thead{
            display: none;
        }

        .permission-modern-table tbody tr{
            display: block;
            margin-bottom: 20px;
        }

        .permission-modern-table tbody td{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #f1f5f9;
        }

        .permission-modern-table tbody td:last-child{
            border-bottom: none;
        }

        .permission-icon{
            width: 44px;
            height: 44px;
        }

    }
</style>
<div class="container-fluid py-4">
   <div class="card shadow-sm">
      <!-- HEADER -->
      <div class="card-header d-flex justify-content-between align-items-center">
         <h5 class="mb-0 fw-semibold">Permissions</h5>
         <button
            class="btn-add btn-sm"
            data-bs-toggle="modal"
            data-bs-target="#addPermissionModal">
         <i class="bi bi-plus me-1"></i> Add Permission
         </button>
      </div>
      <!-- TABLE -->
      <div class="card-body p-0">
     <div class="table-responsive">

    <table class="table permission-modern-table align-middle mb-0">

        <thead>
            <tr>
                <th width="80">#ID</th>
                <th>Permission Name</th>
                <th width="140" class="text-center">Actions</th>
            </tr>
        </thead>

        <tbody>

            @forelse($permissions as $permission)

            <tr>

                <!-- ID -->
                <td>

                    <span class="permission-id">
                        #{{ $permission->id }}
                    </span>

                </td>


                <!-- PERMISSION -->
                <td>

                    <div class="d-flex align-items-center gap-3">

                        <!-- ICON -->
                        <div class="permission-icon">

                            <i class="bi bi-shield-lock-fill"></i>

                        </div>

                        <!-- NAME -->
                        <div>

                            <h6 class="mb-0 fw-semibold text-dark">

                                {{ ucfirst($permission->name) }}

                            </h6>

                            <small class="text-muted">
                                System Permission
                            </small>

                        </div>

                    </div>

                </td>


                <!-- ACTION -->
                <td class="text-center">

                    <div class="dropdown">

                        <button
                            class="btn-action-dropdown"
                            data-bs-toggle="dropdown">

                            <i class="bi bi-three-dots"></i>

                        </button>

                        <ul class="dropdown-menu dropdown-menu-end custom-dropdown shadow border-0">

                            <!-- EDIT -->
                            <li>

                                <button
                                    class="dropdown-item custom-dropdown-item"
                                    data-bs-toggle="modal"
                                    data-bs-target="#editPermissionModal{{ $permission->id }}">

                                    <i class="bi bi-pencil-square text-warning me-2"></i>

                                    Edit Permission

                                </button>

                            </li>


                            <!-- DELETE -->
                            <li>

                                <form
                                    action="{{ route('superadmin.permissions.delete',$permission->id) }}"
                                    method="POST"
                                    onsubmit="return confirm('Delete this permission?')">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                            class="dropdown-item custom-dropdown-item text-danger">

                                        <i class="bi bi-trash me-2"></i>

                                        Delete Permission

                                    </button>

                                </form>

                            </li>

                        </ul>

                    </div>

                </td>

            </tr>



            <!-- ================= EDIT MODAL ================= -->

            <div class="modal fade"
                 id="editPermissionModal{{ $permission->id }}"
                 tabindex="-1">

                <div class="modal-dialog modal-dialog-centered">

                    <div class="modal-content modern-modal border-0">

                        <!-- HEADER -->
                        <div class="modal-header modal-header-custom">

                            <div>

                                <h5 class="modal-title fw-bold mb-0">

                                    Edit Permission

                                </h5>

                                <small class="text-muted">

                                    Update permission details

                                </small>

                            </div>

                            <button class="btn-close"
                                    data-bs-dismiss="modal"></button>

                        </div>


                        <!-- FORM -->
                        <form method="POST"
                              action="{{ route('superadmin.permissions.update',$permission->id) }}">

                            @csrf
                            @method('PUT')

                            <div class="modal-body">

                                <div class="mb-3">

                                    <label class="form-label fw-semibold">

                                        Permission Name

                                    </label>

                                    <div class="input-group modern-input-group">

                                        <span class="input-group-text">

                                            <i class="bi bi-shield-lock"></i>

                                        </span>

                                        <input
                                            type="text"
                                            name="name"
                                            value="{{ $permission->name }}"
                                            class="form-control modern-input"
                                            placeholder="Enter permission name"
                                            required>

                                    </div>

                                </div>

                            </div>


                            <!-- FOOTER -->
                            <div class="modal-footer border-0 pt-0">

                                <button
                                    type="button"
                                    class="btn-cancel"
                                    data-bs-dismiss="modal">

                                    Cancel

                                </button>

                                <button class="btn-update">

                                    <i class="bi bi-save2 me-1"></i>

                                    Update Permission

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

            @empty

            <tr>

                <td colspan="3">

                    <div class="empty-state">

                        <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                             width="110"
                             class="mb-3">

                        <h5>No Permissions Found</h5>

                        <p class="text-muted mb-0">
                            Permission records are currently unavailable.
                        </p>

                    </div>

                </td>

            </tr>

            @endforelse

        </tbody>

    </table>

</div>
 
      </div>
   </div>
</div>
<!-- ADD PERMISSION MODAL -->
<div class="modal fade" id="addPermissionModal">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header bg-primary text-white">
            <h5 class="modal-title">Add Permission</h5>
            <button
               class="btn-close btn-close-white"
               data-bs-dismiss="modal">
            </button>
         </div>
         <form method="POST" action="{{ route('superadmin.permissions.store') }}">
            @csrf
            <div class="modal-body">
               <label class="form-label fw-semibold">
               Permission Name
               </label>
               <input
                  type="text"
                  name="name"
                  class="form-control"
                  placeholder="Enter Permission Name"
                  required>
            </div>
            <div class="modal-footer">
               <button
                  type="button"
                  class="btn btn-light btn-sm"
                  data-bs-dismiss="modal">
               Cancel
               </button>
               <button class="btn-add btn-sm">
               <i class="bi bi-save me-1"></i> Save Permission
               </button>
            </div>
         </form>
      </div>
   </div>
</div>


<!-- EDIT PERMISSION MODAL -->

<div class="modal fade" id="editPermissionModal{{ $permission->id }}">

<div class="modal-dialog modal-dialog-centered">

<div class="modal-content">

<div class="modal-header bg-primarytext-dark">

<h5 class="modal-title">Edit Permission</h5>

<button class="btn-close" data-bs-dismiss="modal"></button>

</div>

<form method="POST" action="{{ route('superadmin.permissions.update',$permission->id) }}">

@csrf
@method('PUT')

<div class="modal-body">

<label class="form-label fw-semibold">
Permission Name
</label>

<input
type="text"
name="name"
value="{{ $permission->name }}"
class="form-control"
required>

</div>

<div class="modal-footer">

<button
type="button"
class="btn btn-light btn-sm"
data-bs-dismiss="modal">

Cancel

</button>

<button class="btn-add btn-sm">

<i class="bi bi-save me-1"></i> Update Permission

</button>

</div>

</form>

</div>

</div>

</div>
@endsection