@extends('layouts.master')

@section('page_title', 'Salary Templates')

@section('content')
<div class="content-wrapper">
    <!-- Content area -->
    <div class="content">
        <!-- Page header -->
        <div class="page-header page-header-light">
            <div class="page-header-content header-elements-md-inline">
                <div class="page-title d-flex">
                    <h4>
                        <i class="icon-cash3 mr-2"></i>
                        <span class="font-weight-semibold">Salary Templates</span>
                    </h4>
                    <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
                </div>

                <div class="header-elements d-none">
                    <div class="d-flex justify-content-center">
                        <a href="{{ route('payroll.index') }}" class="btn btn-link">
                            <i class="icon-arrow-left7 mr-1"></i>
                            Back to Payroll
                        </a>
                    </div>
                </div>
            </div>

            <div class="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
                <div class="d-flex">
                    <div class="breadcrumb">
                        <a href="{{ route('home') }}" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
                        <a href="{{ route('payroll.index') }}" class="breadcrumb-item">Payroll</a>
                        <span class="breadcrumb-item active">Salary Templates</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- /page header -->

        <!-- Content area -->
        <div class="content-wrapper">
            <div class="content">
                <!-- Main content -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- Salary Templates Management -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <i class="icon-newspaper2 mr-2"></i>
                                    Salary Templates Management
                                </h5>
                                <div class="header-elements">
                                    <div class="list-icons">
                                        <a class="list-icons-item" data-action="collapse"></a>
                                        <a class="list-icons-item" data-action="reload"></a>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="mb-3">
                                    <p class="text-muted">
                                        Create and manage salary templates to standardize employee compensation structures. 
                                        Templates can include basic salary, allowances, deductions, and other components.
                                    </p>
                                </div>

                                <!-- Include the Livewire component for managing salary templates -->
                                @livewire('manage-salary-templates')
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Stats -->
                <div class="row mt-4">
                    <div class="col-md-3">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div>
                                        <h3 class="font-weight-semibold mb-0">{{ $templates->where('is_active', true)->count() }}</h3>
                                        <span class="font-size-sm">Active Templates</span>
                                    </div>
                                    <div class="ml-auto">
                                        <i class="icon-checkmark3 icon-3x opacity-75"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card bg-warning text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div>
                                        <h3 class="font-weight-semibold mb-0">{{ $templates->where('is_active', false)->count() }}</h3>
                                        <span class="font-size-sm">Inactive Templates</span>
                                    </div>
                                    <div class="ml-auto">
                                        <i class="icon-file-text2 icon-3x opacity-75"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div>
                                        <h3 class="font-weight-semibold mb-0">{{ $templates->count() }}</h3>
                                        <span class="font-size-sm">Total Templates</span>
                                    </div>
                                    <div class="ml-auto">
                                        <i class="icon-stack2 icon-3x opacity-75"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div>
                                        <h3 class="font-weight-semibold mb-0">{{ \App\Models\EmployeeSalaryStructure::whereNotNull('template_id')->distinct('employee_id')->count('employee_id') }}</h3>
                                        <span class="font-size-sm">Employees Using Templates</span>
                                    </div>
                                    <div class="ml-auto">
                                        <i class="icon-users4 icon-3x opacity-75"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Activity -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-title">
                                    <i class="icon-history mr-2"></i>
                                    Recent Templates
                                </h6>
                            </div>

                            <div class="card-body">
                                @if($templates->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Template Name</th>
                                                    <th>Status</th>
                                                    <th>Components</th>
                                                    <th>Employees Using</th>
                                                    <th>Created</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($templates->take(5) as $template)
                                                    <tr>
                                                        <td>
                                                            <div class="font-weight-semibold">{{ $template->name }}</div>
                                                            @if($template->description)
                                                                <small class="text-muted">{{ str($template->description)->limit(50) }}</small>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <span class="badge badge-{{ $template->is_active ? 'success' : 'secondary' }}">
                                                                {{ $template->is_active ? 'Active' : 'Inactive' }}
                                                            </span>
                                                            @if($template->is_default)
                                                                <span class="badge badge-primary ml-1">Default</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <span class="badge badge-light">
                                                                {{ is_array($template->components) ? count($template->components) : 0 }} Components
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span class="text-muted">
                                                                {{ $template->employeeSalaryStructures->where('is_active', true)->unique('employee_id')->count() }} employees
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span class="text-muted">{{ $template->created_at->format('M d, Y') }}</span>
                                                        </td>
                                                        <td>
                                                            <div class="list-icons">
                                                                <a href="#" class="list-icons-item text-primary" title="Edit">
                                                                    <i class="icon-pencil7"></i>
                                                                </a>
                                                                <a href="#" class="list-icons-item text-danger" title="Delete">
                                                                    <i class="icon-trash"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="icon-info22 icon-2x mb-3 d-block"></i>
                                            No salary templates found. Create your first template to get started.
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.card-header {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stats-card {
    transition: transform 0.2s;
}

.stats-card:hover {
    transform: translateY(-2px);
}
</style>
@endsection