@extends('layouts.app')
@section('title', 'Manufacturing Settings')

@section('content')
<style>
    .settings-card {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: none;
        margin-top: 20px;
        transition: all 0.3s ease;
    }
    .settings-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .settings-card .card-header {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        padding: 18px 28px;
        border-radius: 10px 10px 0 0;
    }
    .settings-card .card-body {
        padding: 28px;
    }
    
    .settings-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .settings-grid .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        border-radius: 12px;
        background: #ffffff;
        text-decoration: none;
        color: #212529;
        transition: all 0.3s ease;
        border: 2px solid #e9ecef;
        text-align: center;
        min-height: 180px;
        position: relative;
        overflow: hidden;
    }
    .settings-grid .menu-item::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 14px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    /* Location Card - Blue Glow */
    .settings-grid .menu-item.location-card {
        border-color: #007bff;
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.1);
    }
    .settings-grid .menu-item.location-card:hover {
        border-color: #007bff;
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.3), inset 0 0 30px rgba(0, 123, 255, 0.05);
        transform: translateY(-5px);
    }
    .settings-grid .menu-item.location-card .icon {
        background: #007bff;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }
    
    /* Machine Card - Green Glow */
    .settings-grid .menu-item.machine-card {
        border-color: #28a745;
        box-shadow: 0 0 20px rgba(40, 167, 69, 0.1);
    }
    .settings-grid .menu-item.machine-card:hover {
        border-color: #28a745;
        box-shadow: 0 0 30px rgba(40, 167, 69, 0.3), inset 0 0 30px rgba(40, 167, 69, 0.05);
        transform: translateY(-5px);
    }
    .settings-grid .menu-item.machine-card .icon {
        background: #28a745;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }
    
    /* Parameter Card - Gold/Amber Glow */
    .settings-grid .menu-item.parameter-card {
        border-color: #ffc107;
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.1);
    }
    .settings-grid .menu-item.parameter-card:hover {
        border-color: #ffc107;
        box-shadow: 0 0 30px rgba(255, 193, 7, 0.3), inset 0 0 30px rgba(255, 193, 7, 0.05);
        transform: translateY(-5px);
    }
    .settings-grid .menu-item.parameter-card .icon {
        background: #ffc107;
        color: #212529;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }
    
    .settings-grid .menu-item:hover {
        text-decoration: none;
        color: #212529;
    }
    .settings-grid .menu-item .icon {
        width: 64px;
        height: 64px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #fff;
        margin-bottom: 12px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }
    .settings-grid .menu-item:hover .icon {
        transform: scale(1.05);
    }
    .settings-grid .menu-item .icon-location { background: #007bff; }
    .settings-grid .menu-item .icon-machine { background: #28a745; }
    .settings-grid .menu-item .icon-parameter { background: #ffc107; color: #212529; }
    
    .settings-grid .menu-item .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .settings-grid .menu-item .content .title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 4px;
        color: #212529;
    }
    .settings-grid .menu-item .content .description {
        font-size: 13px;
        color: #6c757d;
        margin-bottom: 10px;
    }
    .settings-grid .menu-item .badge-count {
        color: #fff;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        display: inline-block;
        transition: all 0.3s ease;
    }
    /* Badge colors matching card themes */
    .location-card .badge-count {
        background: #007bff;
    }
    .machine-card .badge-count {
        background: #28a745;
    }
    .parameter-card .badge-count {
        background: #ffc107;
        color: #212529;
    }
    
    .settings-grid .menu-item .arrow {
        display: none;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
    }
    .stats-grid .stat-item {
        background: #f8f9fa;
        padding: 18px 20px;
        border-radius: 10px;
        text-align: center;
    }
    .stats-grid .stat-item .number {
        font-size: 28px;
        font-weight: 700;
        color: #007bff;
    }
    .stats-grid .stat-item .label {
        font-size: 13px;
        color: #6c757d;
        margin-top: 4px;
    }
    
    /* Pulse animation for glow effect */
    @keyframes pulseGlow {
        0% { box-shadow: 0 0 20px rgba(0, 123, 255, 0.1); }
        50% { box-shadow: 0 0 30px rgba(0, 123, 255, 0.2); }
        100% { box-shadow: 0 0 20px rgba(0, 123, 255, 0.1); }
    }
    @keyframes pulseGlowGreen {
        0% { box-shadow: 0 0 20px rgba(40, 167, 69, 0.1); }
        50% { box-shadow: 0 0 30px rgba(40, 167, 69, 0.2); }
        100% { box-shadow: 0 0 20px rgba(40, 167, 69, 0.1); }
    }
    @keyframes pulseGlowGold {
        0% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.1); }
        50% { box-shadow: 0 0 30px rgba(255, 193, 7, 0.2); }
        100% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.1); }
    }
    .settings-grid .menu-item.location-card {
        animation: pulseGlow 3s ease-in-out infinite;
    }
    .settings-grid .menu-item.machine-card {
        animation: pulseGlowGreen 3s ease-in-out infinite 0.5s;
    }
    .settings-grid .menu-item.parameter-card {
        animation: pulseGlowGold 3s ease-in-out infinite 1s;
    }
    
    @media (max-width: 992px) {
        .settings-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 576px) {
        .settings-grid {
            grid-template-columns: 1fr;
        }
        .settings-grid .menu-item {
            min-height: 140px;
            padding: 20px 16px;
        }
        .settings-grid .menu-item .icon {
            width: 48px;
            height: 48px;
            font-size: 22px;
        }
        .settings-grid .menu-item .content .title {
            font-size: 14px;
        }
        .settings-grid .menu-item .content .description {
            font-size: 12px;
        }
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .stats-grid .stat-item {
            padding: 14px 16px;
        }
        .stats-grid .stat-item .number {
            font-size: 22px;
        }
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 10px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
        </svg>
        Manufacturing Settings
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    <!-- Settings Grid - Horizontal Cards -->
    <div class="settings-card">
        <div class="card-header">
            <h5 class="mb-0" style="font-weight: 600; font-size: 18px; color: #212529;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 8px; color: #6c757d;">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
                </svg>
                Settings Configuration
            </h5>
        </div>
        <div class="card-body">
            <div class="settings-grid">
                <!-- Locations / Areas - Blue Glow Card -->
                <a href="{{ route('manufacturing.manuset.locations') }}" class="menu-item location-card">
                    <div class="icon icon-location">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M3 12l2 -2m0 0l7 -7l7 7l2 2" />
                            <path d="M5 10v10a1 1 0 0 0 1 1h3m4 0h3a1 1 0 0 0 1 -1v-10" />
                            <path d="M10 16v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2" />
                        </svg>
                    </div>
                    <div class="content">
                        <div class="title">Locations / Areas</div>
                        <div class="description">Manage manufacturing locations and production areas</div>
                        <span class="badge-count">{{ $stats['locations'] }}</span>
                    </div>
                </a>
                
                <!-- Machine Area Allocation - Green Glow Card -->
                <a href="{{ route('manufacturing.manuset.allocations') }}" class="menu-item machine-card">
                    <div class="icon icon-machine">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
                            <path d="M9 9h6v6h-6z" />
                            <path d="M9 15v-6" />
                            <path d="M15 9v6" />
                        </svg>
                    </div>
                    <div class="content">
                        <div class="title">Machine Area Allocation</div>
                        <div class="description">Assign machines to specific production areas</div>
                        <span class="badge-count">{{ $stats['allocations'] }}</span>
                    </div>
                </a>
                
                <!-- Control Parameters - Gold Glow Card -->
                <a href="{{ route('manufacturing.manuset.parameters') }}" class="menu-item parameter-card">
                    <div class="icon icon-parameter">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M9 4v3" />
                            <path d="M15 4v3" />
                            <path d="M9 17v3" />
                            <path d="M15 17v3" />
                            <path d="M5 10h14" />
                            <path d="M5 14h14" />
                            <path d="M12 4v16" />
                        </svg>
                    </div>
                    <div class="content">
                        <div class="title">Control Parameters</div>
                        <div class="description">Define quality control parameters for finished goods inspection</div>
                        <span class="badge-count">{{ $stats['parameters'] }}</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
@endsection