<!DOCTYPE html>
<html lang="{{ str_replace('_','-',app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name','Donations') }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs" defer></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
      axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    </script>
    <style>
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"],
      input[type="date"],
      input[type="number"],
      textarea,
      select {
        background-color: #ffffff;
        color: #111; /* text-gray-900 */
        font-size: 1rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
      }

      ::placeholder {
        color: #6b7280; /* text-gray-500 */
      }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
  <div id="preloader" class="fixed inset-0 flex items-center justify-center bg-white bg-opacity-75 z-50">
    <svg class="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
    </svg>
  </div>
  <nav class="bg-white shadow" x-data="{ open: false }">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between py-4">
      <div class="flex items-center">
        <button @click="open = !open" class="sm:hidden text-gray-600 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path :class="{'hidden': open, 'inline-flex': !open }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            <path :class="{'hidden': !open, 'inline-flex': open }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <div class="ml-2 text-lg font-semibold text-gray-700">
          {{ config('app.name','Donations') }}
        </div>
      </div>
      <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:flex sm:items-center sm:space-x-6">
        @auth
          {{--<a href="{{ route('admin.dashboard') }}" class="block px-2 py-1 text-gray-600 hover:text-gray-800">Dashboard</a>--}}
          <a href="{{ route('donateurs.index') }}" class="block px-2 py-1 text-gray-600 hover:text-gray-800">Donateurs</a>
          <a href="{{ route('groups.index') }}" class="block px-2 py-1 text-gray-600 hover:text-gray-800">Groupes</a>
          <a href="{{ route('campaigns.index') }}" class="block px-2 py-1 text-gray-600 hover:text-gray-800">Campagnes</a>
          <a href="{{ route('reports.index') }}" class="block px-2 py-1 text-gray-600 hover:text-gray-800">Reporting</a>
          <div class="relative" x-data="{ profileOpen: false }">
            <button @click="profileOpen = !profileOpen" class="flex items-center px-2 py-1 text-gray-600 hover:text-gray-800 focus:outline-none">
              <span class="mr-1">{{ Auth::user()->name }}</span>
              <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div x-show="profileOpen" @click.away="profileOpen = false" class="absolute right-0 mt-2 w-48 bg-white border rounded shadow py-1">
              <a href="{{ route('users.create') }}" class="block px-4 py-2 text-gray-600 hover:text-gray-800">Nouvel utilisateur</a>
              <a href="{{ route('account.edit') }}" class="block px-4 py-2 text-gray-600 hover:text-gray-800">Mon compte</a>
              <form action="{{ route('logout') }}" method="POST" class="block">
                @csrf
                <button type="submit" class="w-full text-left px-4 py-2 text-red-600 hover:text-red-800">Déconnexion</button>
              </form>
            </div>
          </div>
        @else
          <a href="{{ route('login') }}" class="block px-2 py-1 text-gray-600 hover:text-gray-800">Connexion</a>
        @endauth
      </div>
    </div>
  </nav>
  <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1">
    {{-- Flash messages --}}
    @if(session('success'))
      <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
           class="mb-4 p-4 bg-green-100 border border-green-200 text-green-800 rounded transition-opacity">
        {{ session('success') }}
      </div>
    @endif

    @if(session('error'))
      <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
           class="mb-4 p-4 bg-red-100 border border-red-200 text-red-800 rounded transition-opacity">
        {{ session('error') }}
      </div>
    @endif

    @if($errors->any())
      <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
           class="mb-4 p-4 bg-red-100 border border-red-200 text-red-800 rounded transition-opacity">
        <ul class="list-disc pl-5">
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    @yield('content')
  </main>
  <footer class="bg-white shadow-inner py-4">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center text-sm text-gray-500">&copy; {{ date('Y') }} {{ config('app.name','Donations') }}</div>
  </footer>

  <script>
    window.showPreloader = function() {
      document.getElementById('preloader').classList.remove('hidden');
    }

    window.hidePreloader = function() {
      document.getElementById('preloader').classList.add('hidden');
    }

    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('table.datatable').forEach(function (table) {
        if (! $.fn.dataTable.isDataTable(table)) {
          $(table).DataTable({
            responsive: true,
            order: [],
            language: {
              url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json'
            }
          });
        }
      });

      hidePreloader();
    });

    window.openModal = function(id) {
      window.dispatchEvent(new CustomEvent('open-modal', { detail: id }));
    }

    window.closeModal = function() {
      window.dispatchEvent(new Event('close-modal'));
    }

    window.submitForm = function(id) {
      var form = document.getElementById(id);
      if (form) form.submit();
    }

    window.loadDonateurDetails = function(id) {
      showPreloader();
      axios.get('/admin/donateurs/' + id + '/details-ajax')
        .then(function (response) {
          document.getElementById('donateur-details-content').innerHTML = response.data;
          openModal('donateur-details-modal');
        })
        .finally(hidePreloader);
    }

    window.loadCampaignDetails = function(id) {
      showPreloader();
      axios.get('/admin/campaigns/' + id + '/details-ajax')
        .then(function (response) {
          document.getElementById('campaign-details-content').innerHTML = response.data;
          openModal('campaign-details-modal');
        })
        .finally(hidePreloader);
    }

    window.togglePasswordVisibility = function(id, button) {
      var input = document.getElementById(id);
      if (! input) return;
      var openIcon = button.querySelector('.eye-open');
      var closedIcon = button.querySelector('.eye-closed');
      if (input.type === 'password') {
        input.type = 'text';
        if (openIcon) openIcon.classList.add('hidden');
        if (closedIcon) closedIcon.classList.remove('hidden');
      } else {
        input.type = 'password';
        if (closedIcon) closedIcon.classList.add('hidden');
        if (openIcon) openIcon.classList.remove('hidden');
      }
    }
  </script>
</body>
</html>
