@extends('admin.layouts.layouts')

@section('title', 'Work Form Home Request')

@section('content')
    <style>
        #wfh-request-table th
        {
            white-space: nowrap;
        }

        #wfh-request-table td:nth-child(2) {
            white-space: normal;
            word-break: break-word;
            min-width: 150px;
        }

        #wfh-request-table td:nth-child(3) {
            white-space: normal;
            word-break: break-word;
            min-width: 300px;
        }

        #wfh-request-table td:nth-child(6) {
            white-space: normal;
            word-break: break-word;
            min-width: 160px;
        }

        #wfh-request-table td:nth-child(7) {
            white-space: normal;
            word-break: break-word;
            min-width: 160px;
        }
    </style>

    <div class="page-header">
        <h3 class="page-title">Work Form Home Request</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item" aria-current="page">Work Form Home</li>
                <li class="breadcrumb-item active" aria-current="page">Work Form Home Request</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive" style="overflow-x:auto;">
                <table class="table table-nowrap" id="wfh-request-table">
                    <thead>
                        <tr>
                            <th>Employee Name</th>
                            <th>Date</th>
                            <th>Reason</th>
                            <th>Reporting Manager</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th>Updated At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('page-js')
    <script type="text/javascript">
        var wfhRequestId = "";
        var wfhRequestAjaxList = "{{ route('work-from-home.ajax-list') }}";
        var wfhRequestStatus = "{{ route('work-from-home-status') }}";
    </script>
    <script src="{{ asset('assets/js/admin/wfh-request.js') }}?time={{ time() }}"></script>
@endsection