@extends('layouts/layoutMaster')

@section('title', 'Page 2')

@section('page-style')
  <style>
      th {
          width: max-content;
          cursor: pointer;
          white-space: nowrap;
          min-width: 80px;
          font-size: 0.85rem;
          color: #6b6a6a;
          padding: 12px 15px;
          background-color: #f4f4f4;
          border-bottom: 2px solid #ddd;
          transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
          border-radius: 5px;
          text-align: center;
          vertical-align: middle; /* Center content vertically */
          position: relative; /* For hover effect */
      }

      th div {
          display: flex;
          align-items: center; /* Center content vertically */
          justify-content: center; /* Center content horizontally */
          height: 100%; /* Ensure div takes full height of the th */
      }

      th:hover {
          background-color: #e6e6e6;
          color: #444;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      }

      th svg {
          transition: transform 0.3s ease, color 0.3s ease;
          margin-left: 8px;
          fill: #6b6a6a; /* Set initial color for the SVG icon */
      }

      th.sorted-asc svg {
          transform: rotate(180deg);
          fill: #333; /* Change icon color when sorted */
      }

      th.sorted-desc svg {
          transform: rotate(0deg);
          fill: #333; /* Change icon color when sorted */
      }

      /* Optional: Add a subtle box-shadow */
      th {
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      }

      /* Responsive adjustments for smaller screens */
      @media (max-width: 768px) {
          th {
              font-size: 0.75rem;
              padding: 10px;
          }

          th div {
              flex-direction: column;
          }

          th svg {
              margin-left: 0;
              margin-top: 5px;
          }
      }

      /* Style for sorting icons */
      .sorted-asc::after,
      .sorted-desc::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          width: 50%;
          height: 3px;
          background-color: #333;
          border-radius: 2px;
      }

      .sorted-asc::after {
          background-color: #28a745; /* Green for ascending sort */
      }

      .sorted-desc::after {
          background-color: #dc3545; /* Red for descending sort */
      }


  </style>
@endsection

@section('page-script')
  @livewireScriptConfig
  @vite(['resources/js/app.js']) <!-- Make sure this comes after @livewireScriptConfig -->
@endsection

@section('content')
  <!-- Content wrapper -->
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Admin Table</h5>
    </div>
    <div class="card-body">
      <livewire:admin-table />
    </div>
  </div>
@endsection