@extends('layout.public')
@section('title','home')
@section('content')

    <div class="container-xxl col-md-12 d-flex align-items-center justify-content-center" style="min-height: 100vh; height: 100%;">
        <div class="authentication-inner" style="height: 100%; width: 100%;">
            <div class="col-md-12 mb-1 order-0">
                <div class="card">
                    <div class="d-flex align-items-end row">
                        <div class="col-sm-7">
                            <div class="row">
                                <div class="col-auto">
                                    <img src="{{ asset('assets/img/logo.png') }}" alt="BPDB logo" style="max-height: 100px;">
                                </div>
                                <div class="col-auto">
                                    <h3 class="card-title text-dark">Welcome to IVVR Help Desk</h3>
                                    <h5 class=" text-dark">Home</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5 text-center text-sm-left">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-8" style="text-align: right">
                                        <img src="{{ asset('assets/img/illustrations/man-with-laptop-light.png') }}" height="70" alt="View Badge User"
                                            data-app-dark-img="illustrations/man-with-laptop-dark.png" data-app-light-img="illustrations/man-with-laptop-light.png"/>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mt-2">
                                            <h6 class="text-dark mb-0">User: {{session('user_name')}} - {{session('unit_desc')}}</h6>
                                            <form id="logout-form" action="{{ route('logout') }}" method="POST">
                                                @csrf
                                                </br>
                                                <button type="submit" class="btn btn-sm btn-outline-warning">
                                                    Logout
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-body text-center position-relative">
                    <div class="row g-2 justify-content-center text-center">
                        <div class="col-lg-3 col-sm-6 text-center mt-3">
                            <a href="{{url('complain')}}" class="d-block" style="text-decoration: none;">
                                <div class="custom-card card border border-primary text-center" style="width: 14rem; height: 14rem; cursor: pointer;">
                                    <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                        <h4 class="text-uppercase">Ticket Info</h4>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-3 col-sm-6 text-center mt-3">
                            <a href="{{url('complain/create')}}" class="d-block" style="text-decoration: none;">
                                <div class="custom-card card border border-primary text-center" style="width: 14rem; height: 14rem; cursor: pointer;">
                                    <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                        <h4 class="text-uppercase">Create Ticket</h4>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <style>
                .custom-card:hover {
                    background-color: #f0fff0;
                    border-color: #109301;
                    cursor: pointer;
                }
            </style>
        </div>
    </div>
@endsection
@section('script')
    <script>
        var table1 = $('#complainTable').DataTable({
            processing: true,
            serverSide: true,
            autoWidth: false,
            searching: false,
            lengthChange: false,
            ajax: {
                url: "{{ url('getComplainTypes') }}",
                type: "GET",
                data: function (d) {
                    d.desc = $('input[name="ComplainTypeName"]').val();
                }
            },
            columns: [
                { data: 'ID', name: 'ID' },
                { data: 'NAME', name: 'NAME' },
                {
                    data: 'STATUS',
                    name: 'STATUS',
                    render: function (data, type, row) {
                        if (row.status === 'Pending') {
                            return `<span class="badge bg-label-warning">${row.status}</span>`;
                        } else if (row.status === 'processing') {
                            return `<span class="badge bg-label-info">${row.status}</span>`;
                        } else {
                            return `<span class="badge bg-label-success">${row.status}</span>`;
                        }
                    }
                },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            drawCallback: function(settings) {
                $('.badge.bg-primary').text(settings.json.recordsFiltered);
            }
        });
    </script>
@endsection