@extends('layouts.appv2')

@section('content')
<style>
    .color-preview {
        width: 50px;
        height: 30px;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: inline-block;
    }
    
    .status-badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .status-active {
        background-color: #d4edda;
        color: #155724;
    }
    
    .status-inactive {
        background-color: #f8d7da;
        color: #721c24;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .reset-section {
        background-color: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }
</style>

    <h1 class="mb-4 gradient-text">Report Colors</h1>
    @if(session('success'))
        <div class="alert alert-success" role="alert">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger" role="alert">
            {{ session('error') }}
        </div>
    @endif

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center mb-0">
                        <h5>Color Management</h5>
                    </div>
                </div>

                <div class="card-body">

                    <!-- Reset to Default Section -->
                    <div class="reset-section">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-1"><i class="fas fa-exclamation-triangle text-warning"></i> Reset Colors</h5>
                                <p class="mb-0 text-muted">Reset all colors to their default values</p>
                            </div>
                            <form action="{{ route('admins.reportcolors.reset') }}" method="POST" 
                                  onsubmit="return confirm('Are you sure you want to reset all colors to default? This cannot be undone.');">
                                @csrf
                                <button type="submit" class="btn btn-warning">
                                    <i class="fas fa-undo"></i> Reset to Default
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Colors Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th width="5%">#</th>
                                    <th width="15%">Color Type</th>
                                    <th width="15%">Preview</th>
                                    <th width="10%">Color Code</th>
                                    <th width="40%">Description</th>
                                    <th width="8%">Status</th>
                                    <th width="7%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($colors as $index => $color)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <strong>{{ ucwords(str_replace('_', ' ', $color->color_type)) }}</strong>
                                    </td>
                                    <td>
                                        <div class="color-preview" 
                                             style="background-color: #{{ substr($color->color_code, 2) }};"
                                             title="{{ $color->color_code }}">
                                        </div>
                                    </td>
                                    <td>
                                        <code>#{{ substr($color->color_code, 2) }}</code>
                                    </td>
                                    <td>
                                        <small>{{ $color->description }}</small>
                                    </td>
                                    <td>
                                        <span class="status-badge {{ $color->is_active ? 'status-active' : 'status-inactive' }}">
                                            {{ $color->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="{{ route('admins.reportcolors.edit', $color->id) }}" 
                                               class="btn btn-sm btn-primary" 
                                               title="Edit Color">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        <i class="fas fa-palette fa-3x mb-3"></i>
                                        <p>No color settings found. Please run the migration to create default colors.</p>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Info Box -->
                    <div class="alert alert-info mt-4" role="alert">
                        <h5 class="alert-heading"><i class="fas fa-info-circle"></i> How It Works</h5>
                        <ul class="mb-0">
                            <li>These colors are used in all attendance Excel exports</li>
                            <li>Weekend, Holiday, Leave, and Absent rows are highlighted with full row colors</li>
                            <li>Late/Early check-ins highlight specific time cells</li>
                            <li>Within/Outside Radius colors apply to the radius column</li>
                            <li>Changes take effect immediately on next export</li>
                            <li>Color codes use Excel ARGB format (Alpha + RGB in hexadecimal)</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection