<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="rtl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
<!--
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script src="QR_JS/adapter.min.js"></script>
            <script src="QR_JS/vue.min.js"></script>
            <script src="QR_JS/instascan.min.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
-->
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">


        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

          <link href="{{ asset('css/bootstrap-rtl.min.cs') }}s" rel="stylesheet">

 
    <link href="{{ asset('css/agency.min.css') }}" rel="stylesheet">


       <style>
    body {
      font-family: "Tahoma", sans-serif;
      background: #023238;
      margin: 0;
      padding: 0;
      text-align: rtl;
    }

    /* Button */
    .btn-register {
      margin: 30px;
      padding: 12px 20px;
      background: #007bff;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    }
    .btn-register:hover {
      background: #0056b3;
    }

    /* Modal background */
    .modal {
      display: none; /* hidden by default */
      position: fixed;
      z-index: 999;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      overflow: auto;
    }

    /* Modal content */
    .modal-content {
      background: #fff;
      margin: 5% auto;
      padding: 20px;
      border-radius: 10px;
      max-width: 600px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      text-align: right;
    }

    /* Close button */
    .close {
      color: #aaa;
      float: left;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }
    .close:hover {
      color: #000;
    }

    /* Form styling */
    .form-group {
      margin-bottom: 15px;
    }
    input, select, button {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
    }
    button[type="submit"] {
      background: #007bff;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
    }
    button[type="submit"]:hover {
      background: #0056b3;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .modal-content {
        width: 90%;
      }
    }
  </style>
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @isset($header)
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endisset

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>
