@extends('admin/layouts/default')

@section('title')
    Maintenance Requests Dashboard
    @parent
@stop

@section('header_styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
    <style>
        /* ============================================
           Maintenance Requests Dashboard - Custom Styles
           ============================================ */

        /* Global & Layout Improvements */
        .panel {
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border: none;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .panel-primary {
            border-color: #e9ecef;
        }

        .panel-primary > .panel-heading {
            background: linear-gradient(135deg, #2c3e66 0%, #720c3e 100%);
            border-color: #2c3e66;
            border-radius: 12px 12px 0 0;
            padding: 18px 25px;
        }

        .panel-heading .panel-title {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 0.3px;
            color: #fff;
        }

        .panel-heading .panel-title i {
            margin-right: 10px;
        }

        .panel-body {
            padding: 25px;
            background: #f8f9fa;
            border-radius: 0 0 12px 12px;
        }

        /* Tabs Styling */
        .nav-tabs {
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 20px;
        }

        .nav-tabs > li {
            margin-bottom: -2px;
        }

        .nav-tabs > li > a {
            color: #555;
            font-weight: 600;
            padding: 12px 20px;
            border: none;
            border-radius: 8px 8px 0 0;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .nav-tabs > li > a:hover {
            background-color: #f0f0f0;
            color: #2c3e66;
            border: none;
        }

        .nav-tabs > li.active > a {
            background: linear-gradient(135deg, #2c3e66 0%, #1a2a4f 100%);
            color: white;
            border: none;
        }

        .nav-tabs > li.active > a:hover {
            background: linear-gradient(135deg, #2c3e66 0%, #1a2a4f 100%);
            color: white;
        }

        /* Tab Content */
        .tab-content {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        /* Table Styling - FIXED HEADER VISIBILITY */
        .table-responsive {
            border-radius: 8px;
            overflow-x: auto;
        }

        .table {
            margin-bottom: 0;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        /* Make table headers clearly visible */
        .table thead th {
            background: linear-gradient(135deg, #667eea 0%, #6032ff 100%);
            color: #ffffff !important;  /* Force white text */
            font-weight: 700 !important; /* Make font bold */
            padding: 15px;
            border: none;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        }

        .table thead th:first-child {
            border-radius: 8px 0 0 0;
        }

        .table thead th:last-child {
            border-radius: 0 8px 0 0;
        }

        /* Table body styling */
        .table tbody tr {
            transition: all 0.3s ease;
            background-color: #ffffff;
        }

        .table tbody tr:hover {
            background-color: #f8f9ff;
            transform: scale(1.01);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .table tbody td {
            padding: 12px 15px;
            vertical-align: middle;
            border-bottom: 1px solid #e9ecef;
            color: #333;
            background-color: #ffffff;
        }

        /* Date Status Colors */
        .date-expired {
            color: #dc3545;
            font-weight: bold;
            background: #ffeaea;
            padding: 5px 10px;
            border-radius: 6px;
            display: inline-block;
            font-size: 13px;
        }

        .date-future {
            color: #28a745;
            font-weight: bold;
            background: #e8f5e9;
            padding: 5px 10px;
            border-radius: 6px;
            display: inline-block;
            font-size: 13px;
        }

        .date-today {
            color: #007bff;
            font-weight: bold;
            background: #e3f2fd;
            padding: 5px 10px;
            border-radius: 6px;
            display: inline-block;
            font-size: 13px;
        }

        /* Alert Messages */
        .alert {
            border-radius: 10px;
            border: none;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }

        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }

        /* DataTables Customization */
        .dataTables_wrapper {
            padding: 10px 0;
        }

        .dataTables_length select,
        .dataTables_filter input {
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 6px 10px;
            margin: 0 5px;
        }

        .dataTables_filter input:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
        }

        .dataTables_paginate .paginate_button {
            border-radius: 6px !important;
            margin: 0 2px;
            transition: all 0.3s ease;
        }

        .dataTables_paginate .paginate_button.current {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            border: none !important;
        }

        .dataTables_paginate .paginate_button:hover {
            background: #667eea !important;
            color: white !important;
            border: none !important;
        }

        /* Breadcrumb Styling */
        .breadcrumb {
            background: transparent;
            padding: 8px 0;
            margin: 0;
        }

        .breadcrumb > li {
            font-size: 14px;
        }

        .breadcrumb > li + li:before {
            content: ">";
            padding: 0 8px;
            color: #888;
        }

        .breadcrumb > .active {
            color: #2c3e66;
            font-weight: 600;
        }

        /* Section Header */
        .content-header {
            padding: 20px 0;
            margin-bottom: 20px;
        }

        .content-header h1 {
            font-size: 28px;
            font-weight: 600;
            color: #2c3e66;
            margin: 0;
            display: inline-block;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .panel-body {
                padding: 15px;
            }

            .table thead th,
            .table tbody td {
                padding: 8px 10px;
                font-size: 12px;
            }

            .table thead th {
                font-size: 11px;
            }

            .content-header h1 {
                font-size: 22px;
                margin-bottom: 10px;
            }

            .breadcrumb {
                float: none !important;
                padding-left: 0;
            }

            .date-expired,
            .date-future,
            .date-today {
                font-size: 11px;
                padding: 3px 8px;
            }
        }

        /* Scrollbar Styling */
        .table-responsive::-webkit-scrollbar {
            height: 8px;
        }

        .table-responsive::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .table-responsive::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Loading Animation for DataTable */
        .dataTables_processing {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: bold;
        }

        /* Hover Effects */
        .table tbody tr td:first-child {
            font-weight: 600;
            color: #2c3e66;
        }

        /* Card-like appearance for the main content */
        .paddingleft_right15 {
            padding-left: 15px;
            padding-right: 15px;
        }

        /* Improve modal behavior */
        .modal-backdrop {
            backdrop-filter: blur(3px);
        }

        /* Ensure DataTable header text is always visible */
        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label,
        .dataTables_info,
        .dataTables_paginate {
            color: #333 !important;
        }

        /* Fix any potential contrast issues */
        .table thead th * {
            color: #ffffff !important;
        }
    </style>
@stop

@section('content')
    <section class="content-header">
        <h1>
            <i class="livicon" data-name="dashboard" data-size="28" data-color="#2c3e66"></i>
            Maintenance and Appointment Reports
        </h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('dashboard') }}">
                    <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                    Dashboard
                </a>
            </li>
            <li>Reports</li>
            <li class="active">Dashboard</li>
        </ol>
    </section>

    <section class="content paddingleft_right15">

        {{-- SUCCESS & ERROR --}}
        @if (session('success'))
            <div class="alert alert-success">
                <i class="livicon" data-name="check-circle" data-size="18" data-color="#155724"></i>
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                <i class="livicon" data-name="warning" data-size="18" data-color="#721c24"></i>
                {{ session('error') }}
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title pull-left">
                            <i class="livicon" data-name="list-ul" data-size="18" data-c="#fff"></i>
                            Dashboard Tasks
                        </h4>
                        <div class="pull-right">
                            <small class="text-white">
                                <i class="livicon" data-name="calendar" data-size="16" data-c="#fff"></i>
                                {{ date('F d, Y') }}
                            </small>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div class="bs-example">
                            {{-- VIEW APPOINTMENTS ONLY --}}
                            <ul class="nav nav-tabs" style="margin-bottom: 15px;">
                                <li class="active">
                                    <a href="#appointments" data-toggle="tab">
                                        <i class="livicon" data-name="calendar" data-size="16"></i>
                                        View Appointments
                                    </a>
                                </li>
                            </ul>

                            <div id="myTabContent" class="tab-content">
                                {{-- VIEW APPOINTMENTS TAB --}}
                                <div class="tab-pane fade active in" id="appointments">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-hover" id="table-appointments">
                                            <thead>
                                            <tr>
                                                <th style="color: #380d98 !important;">ID</th>
                                                <th style="color: #380d98 !important;">Ticket NO</th>
                                                <th style="color: #380d98 !important;">Expert Email</th>
                                                <th style="color: #380d98 !important;">Receiver Name</th>
                                                <th style="color: #380d98 !important;">Issue</th>
                                                <th style="color: #380d98 !important;">Appointment Date</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @php
                                                use Carbon\Carbon;
                                                $appointments = DB::table('appointments')->get();
                                            @endphp

                                            @foreach ($appointments as $appointment)
                                                @php
                                                    // FETCH RECEIVER FULL NAME
                                                    $receiver = DB::table('dmuemployee2s')
                                                        ->where('email', $appointment->reciever)
                                                        ->first();

                                                    // DATE LOGIC
                                                    $today = Carbon::today();
                                                    $appointmentDate = Carbon::parse($appointment->appointmentdate);

                                                    if ($appointmentDate->isPast() && !$appointmentDate->isToday()) {
                                                        $days = $appointmentDate->diffInDays($today);
                                                        $dateHtml = "<span class='date-expired'><i class='livicon' data-name='clock' data-size='12'></i> $appointment->appointmentdate (Expired $days days ago)</span>";
                                                    }
                                                    elseif ($appointmentDate->isFuture()) {
                                                        $days = $today->diffInDays($appointmentDate);
                                                        $dateHtml = "<span class='date-future'><i class='livicon' data-name='time' data-size='12'></i> $appointment->appointmentdate (In $days days)</span>";
                                                    }
                                                    else {
                                                        $dateHtml = "<span class='date-today'><i class='livicon' data-name='flag' data-size='12'></i> $appointment->appointmentdate (Today)</span>";
                                                    }
                                                @endphp

                                                <tr>
                                                    <td><strong>#{{ $appointment->id }}</strong></td>
                                                    <td>{{ $appointment->taskid }}</td>
                                                    <td>{{ $appointment->experemail }}</td>
                                                    <td>
                                                        @if($receiver)
                                                            <strong>{{ $receiver->firstname }} {{ $receiver->lastname }}</strong>
                                                        @else
                                                            {{ $appointment->reciever }}
                                                        @endif
                                                    </td>
                                                    <td>{{ $appointment->issue }}</td>
                                                    <td>{!! $dateHtml !!}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div> {{-- END TAB --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@section('footer_scripts')
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
            // Initialize DataTable with custom options
            $('#table-appointments').DataTable({
                pageLength: 10,
                lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                language: {
                    search: "<i class='livicon' data-name='search' data-size='14'></i> Search:",
                    lengthMenu: "Show _MENU_ entries",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "No entries found",
                    zeroRecords: "No matching records found",
                    paginate: {
                        previous: "Previous",
                        next: "Next"
                    }
                },
                order: [[5, 'asc']], // Sort by appointment date by default
                columnDefs: [
                    { orderable: true, targets: [0, 1, 2, 3, 4, 5] }
                ]
            });
        });

        $(function () {
            $('body').on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });
        });

        // Add tooltip for date status
        $(document).ready(function() {
            $('.date-expired, .date-future, .date-today').each(function() {
                $(this).css('cursor', 'help');
            });
        });
    </script>
@stop