@extends('layout.app')

@section('content')

<style>
 
.admin-wrapper {
    font-family: "Poppins", sans-serif;


    min-height: calc(100vh - 70px);
    padding: 35px;
    margin: 0;
}
/* Smooth auto-changing background */
/* Adds smooth 20s gradient morphing effect */
.animated-bg {
    background: linear-gradient(135deg, #082e50ff, #00f2fe);
    background-size: 300% 300%;
    animation: smoothGradient 20s ease infinite;
}

/* Smoothly morph between gradients (no flipping) */
@keyframes smoothGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin-bottom: 25px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
  margin-left: 15px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider { background-color: #ff5252; }
input:checked + .slider:before { transform: translateX(32px); }

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 22px;
}

.card {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(14px);
    padding: 25px;
    border-radius: 18px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.35);
}

.card i {
    font-size: 45px;
    margin-bottom: 15px;
}

/* English */
.lang-en {
    font-size: 16px;
}

/* Tamil – slightly smaller */
.lang-ta {
    font-size: 20.5px;
    letter-spacing: 0.2px; /* optional, improves Tamil readability */
}

/* Headings control */
.lang-ta h1,
.lang-ta h2,
.lang-ta h3 {
    font-size: 90%;
}

</style>

<!-- <div class="admin-wrapper animated-bg"> -->
    <div class="admin-wrapper animated-bg {{ session('locale') === 'ta' ? 'lang-ta' : 'lang-en' }}">



    <!-- TOP BAR -->
    <div class="topbar">
        @if (session('role_id') == 2)
            <h2 style="margin:0;">{{ lang_value('User Dashboard', 'பயனர் டாஷ்போர்ட்') }}</h2>
   
    @elseif (session('role_id') == 3)
            <h2 style="margin:0;">{{ lang_value('Staff Dashboard', 'பணியாளர் டாஷ்போர்ட்') }}</h2>
        @endif

        <div style="display:flex; align-items:center;">{{ lang_value('Language', 'மொழி') }}:

            <label class="switch">
                <input type="checkbox" id="langToggle" 
                       {{ session('locale') == 'ta' ? 'checked' : '' }} 
                       {{ App::getLocale() == 'ta' ? 'checked' : '' }}>
                <span class="slider"></span>
                <!-- {{ App::getLocale() == 'ta' ? 'English' : 'தமிழ்' }} -->
            </label>

        </div>
    </div>

    <!-- DASHBOARD CARDS -->
   <!-- DASHBOARD CARDS -->
<div class="card-container">

    <div class="card">
        <h3>{{ lang_value('Total Suppliers', 'மொத்த வழங்குநர்கள்') }}</h3>
        <p class="fs-4">{{ $supplierCount }} {{ lang_value('Suppliers', 'சப்ளையர்கள்') }}</p>
    </div>

    <div class="card">
        <h3>{{ lang_value('Total Customers', 'மொத்த வாட்பெயர்கள்') }}</h3>
        <p class="fs-4">{{ $customerCount }} {{ lang_value('Customers', 'கஸ்டமர்  ') }}</p>
    </div>

    @if(session('role_id') == 2)
        <div class="card">
            <h3>{{ lang_value('Today Sales', 'இன்றைய விற்பனை') }}</h3>
            <p class="fs-4">{{ $todaysales }}</p>
        </div>

        <div class="card">
            <h3>{{ lang_value('Today Purchase', 'இன்றைய வாங்குதல்') }}</h3>
            <p class="fs-4">{{ $todaypurchase }}</p>
        </div>
    @endif

</div>

    <br><br>

    <!-- NEW MENU CARD BUTTONS (ADDED HERE) -->
    <!-- <div class="card-container">

        <a href="{{ route('user.lines.create') }}" class="card text-decoration-none">
            <i class="fa fa-road"></i>
            <h3>{{ lang_value('Lines', 'லைன்ஸ் ') }}</h3>
        </a>

        <a href="{{ route('user.members.create') }}" class="card text-decoration-none">
            <i class="fa fa-users"></i>
            <h3>{{ lang_value('Members', 'உறுப்பினர்கள்') }}</h3>
        </a>

        <a href="{{ route('user.products.create') }}" class="card text-decoration-none">
            <i class="fa fa-box"></i>
            <h3>{{ lang_value('Products', 'பொருள் ') }}</h3>
        </a>

        <a href="{{ route('user.purchase.create') }}" class="card text-decoration-none">
            <i class="fa fa-shopping-cart"></i>
            <h3>{{ lang_value('Purchase', ' வாங்குதல் ') }}</h3>
        </a>

        <a href="{{ route('user.sales.create') }}" class="card text-decoration-none">
            <i class="fa fa-chart-line"></i>
            <h3>{{ lang_value('Sales', 'விற்பனை') }}</h3>
        </a>

        <a href="{{ route('user.reports.index') }}" class="card text-decoration-none">
            <i class="fa fa-file-alt"></i>
            <h3>{{ lang_value('Reports', 'அறிக்கைகள்') }}</h3>
        </a>
      <a href="{{ route('user.expenses.dashboard') }}" class="card text-decoration-none">
    <i class="fa fa-money-bill-wave"></i>
    <h3>{{ lang_value('Payments', 'பணம்') }}</h3>
</a>


    </div> -->
<!-- NEW MENU CARD BUTTONS (PERMISSION BASED) -->
<div class="card-container">

    @if(canAccess('lines.view'))
    <a href="{{ route('user.lines.create') }}" class="card text-decoration-none">
        <i class="fa fa-road"></i>
        <h3>{{ lang_value('Lines', 'லைன்ஸ்') }}</h3>
    </a>
    @endif

    @if(canAccess('members.view'))
    <a href="{{ route('user.members.create') }}" class="card text-decoration-none">
        <i class="fa fa-users"></i>
        <h3>{{ lang_value('Members', 'உறுப்பினர்கள்') }}</h3>
    </a>
    @endif

    @if(canAccess('products.view'))
    <a href="{{ route('user.products.create') }}" class="card text-decoration-none">
        <i class="fa fa-box"></i>
        <h3>{{ lang_value('Products', 'பொருள்') }}</h3>
    </a>
    @endif

    @if(canAccess('purchase.view'))
    <a href="{{ route('user.purchase.create') }}" class="card text-decoration-none">
        <i class="fa fa-shopping-cart"></i>
        <h3>{{ lang_value('Purchase', 'வாங்குதல்') }}</h3>
    </a>
    @endif

    @if(canAccess('sales.view'))
    <a href="{{ route('user.sales.create') }}" class="card text-decoration-none">
        <i class="fa fa-chart-line"></i>
        <h3>{{ lang_value('Sales', 'விற்பனை') }}</h3>
    </a>
    @endif

    @if(canAccess('reports.view'))
    <a href="{{ route('user.reports.index') }}" class="card text-decoration-none">
        <i class="fa fa-file-alt"></i>
        <h3>{{ lang_value('Reports', 'அறிக்கைகள்') }}</h3>
    </a>
    @endif

    @if(canAccess('expenses.view'))
    <a href="{{ route('user.expenses.dashboard') }}" class="card text-decoration-none">
        <i class="fa fa-money-bill-wave"></i>
        <h3>{{ lang_value('Payments', 'பணம்') }}</h3>
    </a>
    @endif

</div>

</div>

<!-- <script>
document.getElementById('langToggle').addEventListener('change', function() {
    let locale = this.checked ? 'ta' : 'en';
    window.location.href = '/lang/' + locale;
});
</script> -->

<script>
document.getElementById('langToggle').addEventListener('change', function () {
    let locale = this.checked ? 'ta' : 'en';
    window.location.href = '/public/lang/' + locale;
});
</script>



@endsection