@extends('layouts.main')
@section('content')
<style>
   /* ===============================
   BUTTON DESIGN SYSTEM
   ================================ */
   .btn-add{
   background: #6366f1 !important;
   color: #ffffff !important;
   border: 1px solid #818cf8 !important;
   border-radius: 8px;
   padding: 6px 14px;
   font-size: 14px;
   transition: .25s;
   font-weight: 600;
   }
   .btn-add:hover{
   background: #818cf8 !important;
   transform: translateY(-2px);
   box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
   }
   /* 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 !important;
   color: #000000 !important;
   }
   .btn-edit:hover{
   background: #e0a800 !important;
   }
   /* DELETE */
   .btn-delete{
   background: #dc3545 !important;
   color: #ffffff !important;
   }
   .btn-delete:hover{
   background: #bb2d3b !important;
   }
   /* SAVE */
   .btn-save{
   background: #198754 !important;
   color: #ffffff !important;
   border: none;
   border-radius: 8px;
   padding: 5px 12px;
   margin-top: 8px;
   }
   .btn-save:hover{
   background: #157347 !important;
   }
   .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: rgba(255, 255, 255, 0.05) !important;
   padding: 6px 10px;
   border-radius: 6px;
   font-size: 13px;
   color: #ffffff !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   }
   /* DROPDOWN */
   .dropdown-menu{
   border-radius: 8px;
   font-size: 14px;
   }
    /* TABLE */
     .permission-modern-table{
         border-collapse: separate !important;
         border-spacing: 0 14px !important;
         background: #0b0f19 !important;
         border: none !important;
     }

     /* HEAD */
     .permission-modern-table thead th{
         border: none !important;
         background: #0b0f19 !important;
         color: #ffffff !important;
         font-size: 13px;
         font-weight: 700;
         padding: 16px;
         text-transform: uppercase;
         white-space: nowrap;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
     }

     /* ROW */
     .permission-modern-table tbody tr{
         background: transparent !important;
         box-shadow: none !important;
         transition: 0.3s ease;
     }

     .permission-modern-table tbody td{
         padding: 18px 16px;
         vertical-align: middle;
         background-color: #0b0f19 !important;
         border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
         border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
         border-left: none !important;
         border-right: none !important;
         color: #ffffff !important;
     }

     /* Row corners rounding and outer border */
     .permission-modern-table tbody td:first-child{
         border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
         border-top-left-radius: 14px !important;
         border-bottom-left-radius: 14px !important;
     }

     .permission-modern-table tbody td:last-child{
         border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
         border-top-right-radius: 14px !important;
         border-bottom-right-radius: 14px !important;
     }

     /* Row hover transitions */
     .permission-modern-table tbody tr:hover td{
         background-color: rgba(255, 255, 255, 0.02) !important;
         border-top-color: rgba(99, 102, 241, 0.4) !important;
         border-bottom-color: rgba(99, 102, 241, 0.4) !important;
     }

     .permission-modern-table tbody tr:hover td:first-child{
         border-left-color: rgba(99, 102, 241, 0.4) !important;
     }

     .permission-modern-table tbody tr:hover td:last-child{
         border-right-color: rgba(99, 102, 241, 0.4) !important;
     }

    /* ID */
    .permission-id{
        font-weight: 700;
        color: #ffffff !important;
        font-size: 15px;
    }

    /* ICON */
    .permission-icon{
        width: 50px;
        height: 50px;
        border-radius: 16px;
        background: linear-gradient(135deg, #6366f1, #818cf8) !important;
        color: #ffffff !important;
        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: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px;
        background: #0b0f19 !important;
        color: #ffffff !important;
        transition: 0.3s ease;
    }

    .btn-action-dropdown:hover{
        background: #6366f1 !important;
        color: #ffffff !important;
        border-color: #818cf8 !important;
        transform: scale(1.05);
    }

    /* DROPDOWN */
    .custom-dropdown{
        border-radius: 16px;
        padding: 10px;
        min-width: 220px;
        background: #0b0f19 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .custom-dropdown-item{
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 500;
        transition: 0.3s ease;
        color: #ffffff !important;
        background: transparent !important;
    }

    .custom-dropdown-item:hover{
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
    }

    /* MODAL */
    .modern-modal{
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 18px 50px rgba(0,0,0,0.6);
        background: #0b0f19 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .modal-header-custom{
        background: rgba(255, 255, 255, 0.01) !important;
        padding: 22px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* INPUT */
    .modern-input-group{
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: #0b0f19 !important;
    }

    .modern-input-group .input-group-text{
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
    }

    .modern-input{
        background: transparent !important;
        border: none !important;
        padding: 14px;
        color: #ffffff !important;
        box-shadow: none !important;
    }
    .modern-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    /* BUTTONS */
    .btn-cancel{
        border: none !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
        padding: 12px 20px;
        border-radius: 14px;
        font-weight: 600;
        transition: 0.3s ease;
    }

    .btn-cancel:hover{
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    .btn-update{
        border: none !important;
        background: linear-gradient(135deg, #6366f1, #818cf8) !important;
        color: #ffffff !important;
        padding: 12px 22px;
        border-radius: 14px;
        font-weight: 600;
        transition: 0.3s ease;
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
    }

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

    /* EMPTY */
    .empty-state{
        padding: 40px;
        text-align: center;
        background: #0b0f19 !important;
    }
</style>

<div class="container-fluid py-4" style="background: #0b0f19 !important;">
   <div class="card shadow-sm border-0" style="background: #0b0f19 !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px;">
      <!-- HEADER -->
      <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom" style="border-color: rgba(255,255,255,0.08) !important; padding: 1.5rem 2rem;">
         <h5 class="mb-0 fw-semibold text-white" style="font-size: 1.25rem;">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-4" style="background: #0b0f19 !important; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;">
     <div class="table-responsive">

    <table class="table permission-modern-table align-middle mb-0" style="background: #0b0f19 !important;">

        <thead>
            <tr>
                <th width="80" style="color: #ffffff !important;">#ID</th>
                <th style="color: #ffffff !important;">Permission Name</th>
                <th width="140" class="text-center" style="color: #ffffff !important;">Actions</th>
            </tr>
        </thead>

        <tbody>

            @forelse($permissions as $permission)

            <tr style="background: #0b0f19 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;">

                <!-- ID -->
                <td>
                    <span class="permission-id" style="color: #ffffff !important;">
                        #{{ $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-white">
                                {{ ucfirst($permission->name) }}
                            </h6>

                            <small style="color: #818cf8 !important; font-weight: 600;">
                                @if(($permission->required_plan ?? '') === 'basic')
                                    Plan A (Basic)
                                @elseif(($permission->required_plan ?? '') === 'premium')
                                    Plan B (Premium)
                                @elseif(($permission->required_plan ?? '') === 'seo')
                                    Plan C (Gold SEO)
                                @else
                                    {{ ucfirst($permission->required_plan ?? 'Basic') }}
                                @endif
                            </small>

                        </div>

                    </div>

                </td>


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

                    <div class="dropdown">

                        <button
                            class="btn-action-dropdown"
                            data-bs-toggle="dropdown"
                            style="background: #0b0f19 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.1) !important;">

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

                        </button>

                        <ul class="dropdown-menu dropdown-menu-end custom-dropdown shadow border-0" style="background: #0b0f19 !important; border: 1px solid rgba(255,255,255,0.1) !important;">

                            <!-- EDIT -->
                            <li>

                                <button
                                    class="dropdown-item custom-dropdown-item text-white"
                                    style="background: transparent !important; color: #ffffff !important;"
                                    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('super-admin.permissions.delete', ['id' => $permission->id, 'simulate_host' => $tenant?->custom_domain ?? '']) }}"
                                    method="POST"
                                    onsubmit="return confirm('Delete this permission?')">

                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="simulate_host" value="{{ $tenant?->custom_domain ?? '' }}">

                                    <button type="submit"
                                            class="dropdown-item custom-dropdown-item text-danger"
                                            style="background: transparent !important;">

                                        <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" style="background: #0b0f19 !important; border: 1px solid rgba(255,255,255,0.1) !important;">

                        <!-- HEADER -->
                        <div class="modal-header modal-header-custom border-bottom" style="background: rgba(255,255,255,0.01) !important; border-color: rgba(255,255,255,0.1) !important; padding: 1.5rem 2rem;">

                            <div>

                                <h5 class="modal-title fw-bold mb-0 text-white">
                                    Edit Permission
                                </h5>

                                <small style="color: rgba(255, 255, 255, 0.6) !important;">
                                    Update permission details
                                </small>

                            </div>

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

                        </div>


                        <!-- FORM -->
                        <form method="POST"
                              action="{{ route('super-admin.permissions.update', ['id' => $permission->id, 'simulate_host' => $tenant?->custom_domain ?? '']) }}">

                            @csrf
                            @method('PUT')
                            <input type="hidden" name="simulate_host" value="{{ $tenant->custom_domain ?? '' }}">

                            <div class="modal-body p-4">
                                <!-- Permission Name -->
                                <div class="mb-4">
                                    <label class="form-label fw-semibold text-white" style="margin-bottom: 0.5rem;">
                                        Permission Name
                                    </label>
                                    <div class="input-group modern-input-group" style="border-color: rgba(255,255,255,0.1) !important; background: #0b0f19 !important;">
                                        <span class="input-group-text" style="background: transparent !important; border: none !important;">
                                            <i class="bi bi-shield-lock" style="color: #ffffff !important;"></i>
                                        </span>
                                        <input
                                            type="text"
                                            name="name"
                                            value="{{ $permission->name }}"
                                            class="form-control modern-input text-white"
                                            style="background: transparent !important; outline: none !important; border: none !important; color: #ffffff !important;"
                                            placeholder="Enter permission name"
                                            required>
                                    </div>
                                </div>

                                <!-- Plan selection -->
                                <div>
                                   <label class="form-label fw-semibold text-white" style="margin-bottom: 0.5rem;">
                                   Assigned Plan Tier
                                   </label>
                                   <div class="input-group modern-input-group" style="border-color: rgba(255,255,255,0.1) !important; background: #0b0f19 !important;">
                                       <span class="input-group-text" style="background: transparent !important; border: none !important;">
                                           <i class="bi bi-credit-card" style="color: #ffffff !important;"></i>
                                       </span>
                                       <select name="required_plan" class="form-select modern-input text-white" style="background: #0b0f19 !important; outline: none !important; border: none !important; color: #ffffff !important; cursor: pointer;" required>
                                           @foreach($roles as $role)
                                               <option value="{{ $role->name }}" {{ ($permission->required_plan ?? '') === $role->name ? 'selected' : '' }} style="background: #0b0f19; color: white;">{{ $role->display_name ?? ucfirst($role->name) }}</option>
                                           @endforeach
                                       </select>
                                   </div>
                                </div>
                            </div>


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

                                <button
                                    type="button"
                                    class="btn-cancel"
                                    style="background: rgba(255,255,255,0.05) !important; color: #ffffff !important;"
                                    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" style="background: #0b0f19 !important;">

                        <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                             width="110"
                             class="mb-3"
                             style="filter: invert(1);">

                        <h5 class="text-white">No Permissions Found</h5>

                        <p class="text-white mb-0" style="opacity: 0.7;">
                            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" tabindex="-1">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content modern-modal border-0" style="background: #0b0f19 !important; border: 1px solid rgba(255,255,255,0.1) !important;">
         <div class="modal-header modal-header-custom border-bottom" style="background: rgba(255,255,255,0.01) !important; border-color: rgba(255,255,255,0.1) !important; padding: 1.5rem 2rem;">
            <h5 class="modal-title text-white fw-bold mb-0">Add Permission</h5>
            <button
               class="btn-close btn-close-white"
               data-bs-dismiss="modal">
            </button>
         </div>
         <form method="POST" action="{{ route('super-admin.permissions.store', ['simulate_host' => $tenant?->custom_domain ?? '']) }}">
            @csrf
             <input type="hidden" name="simulate_host" value="{{ $tenant?->custom_domain ?? '' }}">

             <div class="modal-body p-4">
                <!-- Permission Name -->
                <div class="mb-4">
                   <label class="form-label fw-semibold text-white" style="margin-bottom: 0.5rem;">
                   Permission Name
                   </label>
                   <div class="input-group modern-input-group" style="border-color: rgba(255,255,255,0.1) !important; background: #0b0f19 !important;">
                       <span class="input-group-text" style="background: transparent !important; border: none !important;">
                           <i class="bi bi-shield-lock" style="color: #ffffff !important;"></i>
                       </span>
                       <input
                          type="text"
                          name="name"
                          class="form-control modern-input text-white"
                          style="background: transparent !important; outline: none !important; border: none !important; color: #ffffff !important;"
                          placeholder="Enter Permission Name"
                          required>
                   </div>
                </div>

                <!-- Plan selection -->
                <div>
                   <label class="form-label fw-semibold text-white" style="margin-bottom: 0.5rem;">
                   Assigned Plan Tier
                   </label>
                   <div class="input-group modern-input-group" style="border-color: rgba(255,255,255,0.1) !important; background: #0b0f19 !important;">
                       <span class="input-group-text" style="background: transparent !important; border: none !important;">
                           <i class="bi bi-credit-card" style="color: #ffffff !important;"></i>
                       </span>
                       <select name="required_plan" class="form-select modern-input text-white" style="background: #0b0f19 !important; outline: none !important; border: none !important; color: #ffffff !important; cursor: pointer;" required>
                           @foreach($roles as $role)
                               <option value="{{ $role->name }}" style="background: #0b0f19; color: white;">{{ $role->display_name ?? ucfirst($role->name) }}</option>
                           @endforeach
                       </select>
                   </div>
                </div>
             </div>
            <div class="modal-footer border-0 pt-0 px-4 pb-4">
               <button
                  type="button"
                  class="btn-cancel"
                  style="background: rgba(255,255,255,0.05) !important; color: #ffffff !important;"
                  data-bs-dismiss="modal">
               Cancel
               </button>
               <button class="btn-update">
               <i class="bi bi-save me-1"></i> Save Permission
               </button>
            </div>
         </form>
      </div>
   </div>
</div>
@endsection