@extends('backend.layouts.app')
@section('content')
    <br /><br />
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-between">
                            <div class="col d-flex justify-content-start">
                                <h3 class="mb-0 p-3">Report An Issue</h3>                            
                                <!-- <button type="button" class="btn btn-lg d-flex align-self-end pl-5 pr-5" id="up-add-category" style="background-color:#a000c8; color:white"><i class="ni ni-fat-add"></i></button> -->
                            </div>
                        </div>


                        <!-- <div class="nav-wrapper">
                            <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link mb-sm-3 mb-md-0 active" id="all" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true">All</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mb-sm-3 mb-md-0" id="primary" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false">Primary</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mb-sm-3 mb-md-0" id="secondary" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false">Secondary</a>
                                </li>
                            </ul>
                        </div> -->

                        <!-- <div class="row align-items-start mt-3">
                            <div class="col">
                                <button type="button" class="btn btn-warning" id="show-primary" value="primary">Primary</button>
                                <button type="button" class="btn btn-secondary" id="show-secondary" value="secondary">Secondary</button>
                            </div>
                        </div> -->

                    </div>

                    <div class="container-fluid">

                        <form class="p-5 ">
                            <div class="form-group">
                                <label for="exampleFormControlInput1">Name</label>
                                <input type="text" class="form-control" id="reporter-name">
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlInput1">Email Address</label>
                                <input type="email" class="form-control" id="reporter-email">
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlInput1">Contact Number</label>
                                <input type="text" class="form-control" id="reporter-contact">
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Concern Type</label>
                                <select class="form-control" id="reporter-concern-type">
                                <option disabled selected>Select</option>
                                <option value="system-suggestion">System Suggestion</option>
                                <option value="bug">Bug</option>
                                <option value="others">Others</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Area of Concern</label>
                                <select class="form-control" id="reporter-concern-area">
                                <option disabled selected>Select</option>
                                <option value="account-management">Account Management</option>
                                <option value="restaurant-management">Restaurant Management</option>
                                <option value="general-inquiry">General Inquiry</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="exampleFormControlTextarea1">Description</label>
                                <textarea class="form-control" id="report-description" rows="3"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="exampleFormControlFile1">Attachements</label>
                                <input type="file" class="form-control-file" id="report-attach">
                            </div>

                            <div class="row p-5 justify-content-center">
                                <button class="btn btn-md btn-secondary" id="clear-report-form">Clear</button>
                                <button class="btn btn-lg" style="background-color: yellow; color:black;" id="submit-report">Submit</button>
                            </div>
                            
                        </form>

                    </div>


                    <!-- <div class="card">
                        <div class="card-body">
                            <div class="table-responsive table-hover">
                                <table class="table">
                                    <tbody id="div_user_ratings">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div> -->


                </div>
            </div>
        </div>
    </div>
@endsection
@section('after-scripts')
    <script src="{{ asset('js/help-report/help-report.js') }}" type="text/javascript"></script>
@endsection