@extends('layouts.app')

@section('content')
<div class="page-container-bg-solid">
    <div class="page-wrapper">
        <div class="page-wrapper-row">
            <div class="page-wrapper-top">
                <div class="page-header">
                    <div class="page-header-top">
                        <div class="container">
                            <div class="page-logo">
                                <!-- Logo content -->
                            </div>
                            <div class="top-menu">
                                <ul class="nav navbar-nav pull-right">
                                    <li class="dropdown dropdown-user dropdown-dark">
                                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"
                                            data-hover="dropdown" data-close-others="true">
                                            <img alt="" class="img-circle" src="{{ asset('assets/layouts/layout3/img/avatar3_small.png') }}">
                                            <span>{{ Auth::user()->user_name ?? 'User' }}</span>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-default">
                                            <li>
                                                <a href="{{ route('logout') }}">
                                                    <i class="icon-key"></i> Log Out
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @include('navigation')
                </div>
            </div>
        </div>
        
        <div class="page-wrapper-row full-height">
            <div class="page-wrapper-middle">
                <div class="page-container">
                    <div class="page-content-wrapper">
                        <div class="page-head">
                            <div class="container">
                                <div class="page-title">
                                    <h1>Employee Dashboard
                                        <small>Non-IT Employee Portal</small>
                                    </h1>
                                </div>
                            </div>
                        </div>
                        
                        <div class="page-content">
                            <div class="container">
                                <div class="page-content-inner">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="portlet box blue">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <i class="fa fa-user"></i>Welcome, {{ Auth::user()->user_name }}
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <div class="portlet light">
                                                                <div class="portlet-title">
                                                                    <div class="caption">
                                                                        <span class="caption-subject font-green bold uppercase">Create Ticket</span>
                                                                    </div>
                                                                </div>
                                                                <div class="portlet-body">
                                                                    <p>Submit a new support ticket for IT assistance.</p>
                                                                    <a href="{{ route('tickets.create') }}" class="btn btn-primary">
                                                                        <i class="fa fa-plus"></i> Create Ticket
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-3">
                                                            <div class="portlet light">
                                                                <div class="portlet-title">
                                                                    <div class="caption">
                                                                        <span class="caption-subject font-blue bold uppercase">My Tickets</span>
                                                                    </div>
                                                                </div>
                                                                <div class="portlet-body">
                                                                    <p>View and manage your submitted tickets.</p>
                                                                    <a href="{{ route('mytickets') }}" class="btn btn-info">
                                                                        <i class="fa fa-list"></i> My Tickets
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-3">
                                                            <div class="portlet light">
                                                                <div class="portlet-title">
                                                                    <div class="caption">
                                                                        <span class="caption-subject font-purple bold uppercase">Reports</span>
                                                                    </div>
                                                                </div>
                                                                <div class="portlet-body">
                                                                    <p>View ticket reports and statistics.</p>
                                                                    <a href="{{ route('ticketreport') }}" class="btn btn-purple">
                                                                        <i class="fa fa-chart-bar"></i> Reports
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-3">
                                                            <div class="portlet light">
                                                                <div class="portlet-title">
                                                                    <div class="caption">
                                                                        <span class="caption-subject font-red bold uppercase">Profile</span>
                                                                    </div>
                                                                </div>
                                                                <div class="portlet-body">
                                                                    <p>Manage your profile information.</p>
                                                                    <button class="btn btn-warning">
                                                                        <i class="fa fa-user"></i> Profile
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row" style="margin-top: 30px;">
                                                        <div class="col-md-12">
                                                            <div class="portlet light">
                                                                <div class="portlet-title">
                                                                    <div class="caption">
                                                                        <span class="caption-subject font-dark bold uppercase">Recent Activity</span>
                                                                    </div>
                                                                </div>
                                                                <div class="portlet-body">
                                                                    <div class="table-scrollable">
                                                                        <table class="table table-striped table-hover">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Ticket ID</th>
                                                                                    <th>Subject</th>
                                                                                    <th>Status</th>
                                                                                    <th>Created Date</th>
                                                                                    <th>Actions</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td colspan="5" class="text-center">
                                                                                        <em>No recent tickets found</em>
                                                                                    </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection