<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar sticky">
    <div class="form-inline mr-auto">
        <ul class="navbar-nav mr-3">
            <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg
                                collapse-btn"> <i data-feather="align-justify"></i></a></li>
            <li><a href="#" class="nav-link nav-link-lg fullscreen-btn">
                    <i data-feather="maximize"></i>
                </a></li>

        </ul>
        <div class="ml-5 pt-3">
            <h4>{{ !empty($pagename)?$pagename:'' }}</h4>
        </div>
        <div class="ml-5 pt-3 text-success">
            <h6>{{ date('F j, Y') }}</h6>
        </div>
    </div>
    @if (Request::segment(3)=='dashboard')

    <div class="mr-5">
        <button class="btn btn-outline-success px-3" data-toggle="modal"
                data-target="#filterModal">Filter Counts
        </button>
    </div>
    @endif
    <div class="mr-5">
        <button class="btn btn-dark" data-toggle="modal"
                data-target="#newTicketModal">Create Ticket
        </button>
    </div>

    <ul class="navbar-nav navbar-right">
        <li class="dropdown dropdown-list-toggle">
            {{-- <a href="#" data-toggle="dropdown"
              class="nav-link notification-toggle nav-link-lg"><i data-feather="bell" class="bell"></i>
            </a>
            <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
              <div class="dropdown-header">
                Notifications
                <div class="float-right">
                  <a href="#">Mark All As Read</a>
                </div>
              </div>
              <div class="dropdown-list-content dropdown-list-icons">
                <a href="#" class="dropdown-item dropdown-item-unread"> <span
                    class="dropdown-item-icon bg-primary text-white"> <i class="fas
                                                fa-code"></i>
                  </span> <span class="dropdown-item-desc"> Template update is
                    available now! <span class="time">2 Min
                      Ago</span>
                  </span>
                </a> <a href="#" class="dropdown-item"> <span class="dropdown-item-icon bg-info text-white"> <i class="far
                                                fa-user"></i>
                  </span> <span class="dropdown-item-desc"> <b>You</b> and <b>Dedik
                      Sugiharto</b> are now friends <span class="time">10 Hours
                      Ago</span>
                  </span>
                </a> <a href="#" class="dropdown-item"> <span class="dropdown-item-icon bg-success text-white"> <i
                      class="fas
                                                fa-check"></i>
                  </span> <span class="dropdown-item-desc"> <b>Kusnaedi</b> has
                    moved task <b>Fix bug header</b> to <b>Done</b> <span class="time">12
                      Hours
                      Ago</span>
                  </span>
                </a> <a href="#" class="dropdown-item"> <span class="dropdown-item-icon bg-danger text-white"> <i
                      class="fas fa-exclamation-triangle"></i>
                  </span> <span class="dropdown-item-desc"> Low disk space. Let's
                    clean it! <span class="time">17 Hours Ago</span>
                  </span>
                </a> <a href="#" class="dropdown-item"> <span class="dropdown-item-icon bg-info text-white"> <i class="fas
                                                fa-bell"></i>
                  </span> <span class="dropdown-item-desc"> Welcome to Otika
                    template! <span class="time">Yesterday</span>
                  </span>
                </a>
              </div>
              <div class="dropdown-footer text-center">
                <a href="#">View All <i class="fas fa-chevron-right"></i></a>
              </div>
            </div> --}}
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown"
                                class="nav-link dropdown-toggle nav-link-lg nav-link-user"> <img alt="image"
                                                                                                 src="{{ asset('app/img/user.png') }}"
                                                                                                 class="user-img-radious-style">
                <span class="d-sm-none d-lg-inline-block"></span></a>
            <div class="dropdown-menu dropdown-menu-right pullDown">
                <div class="dropdown-title">{{ auth()->user()->username }}</div>
                {{-- <a href="profile.html" class="dropdown-item has-icon"> <i class="far
                                          fa-user"></i> Profile
                </a> <a href="timeline.html" class="dropdown-item has-icon"> <i class="fas fa-bolt"></i>
                  Activities
                </a> <a href="#" class="dropdown-item has-icon"> <i class="fas fa-cog"></i>
                  Settings
                </a> --}}
                <div class="dropdown-divider"></div>
                <a href="{{ route('auth.logout') }}" class="dropdown-item has-icon text-danger"> <i
                        class="fas fa-sign-out-alt"></i>
                    Logout
                </a>
            </div>
        </li>
    </ul>
</nav>
<div class="main-sidebar sidebar-style-2">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
            <a href="{{ route('auth.index') }}"> <img alt="image" src="{{ asset('np.png') }}"
                                                      class="header-logo"/><br><span
                    class="logo-name">Ticketing Tool</span>
            </a>
        </div>
        <ul class="sidebar-menu">
            {{-- Routes for admin --}}
            <li class="menu-header">Main</li>
            <li class="dropdown @if (Request::segment(3)=='dashboard') active @endif">
                <a href="{{ route('admin.dashboard') }}" class="nav-link"><i
                        data-feather="monitor"></i><span>Dashboard</span></a>
            </li>
            <li class="dropdown @if (Request::segment(2)=='tickets') active @endif">
                <a href="#" class="menu-toggle nav-link has-dropdown"><i
                        data-feather="book-open"></i><span>Tickets</span></a>
                <ul class="dropdown-menu">
                    <li><a class="nav-link" href="{{ route('tickets.pending.view') }}">Pending Tickets</a></li>
                    <li><a class="nav-link" href="{{ route('tickets.opened.view') }}">Opened Tickets</a></li>
                    <li><a class="nav-link" href="{{ route('tickets.escalated.view') }}">Escalated Tickets</a></li>
                    <li><a class="nav-link" href="{{ route('tickets.closed.view') }}">Closed Tickets</a></li>
                    <li><a class="nav-link" href="{{ route('tickets.validated.view') }}">Validated Tickets</a></li>
                    <li><a class="nav-link" href="{{ route('tickets.occurrence.view') }}">Occurrences</a></li>
                </ul>
            </li>
            <li class="dropdown @if (Request::segment(2)=='alerts') active @endif">
                <a href="{{ route('alerts.all') }}" class="nav-link"><i data-feather="bell"></i><span>Alerts</span></a>
            </li>
            <li class="dropdown @if (Request::segment(3)=='users') active @endif">
                <a href="{{ route('admin.user.show') }}" class="nav-link"><i data-feather="user"></i><span>Users</span></a>
            </li>

        </ul>
    </aside>
</div>

{{-- New Ticket Modal --}}
<div class="modal fade " id="newTicketModal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header mb-5 bg-secondary">
                <h5 class="modal-title text-dark" id="exampleModalCenterTitle">Create New Ticket</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('tickets.create') }}" method="POST">
                @csrf
                <div class="form-group row mb-4">
                    <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3" for="title">Title</label>
                    <div class="col-sm-12 col-md-7">
                        <input type="text" name="title" class="form-control">
                        @error('title')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row mb-4">
                    <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Type</label>
                    <div class="col-sm-12 col-md-7">
                        <select name="type" class="form-control selectric">
                            <option value="" selected>--select type---</option>
                            <option value="ISSUE">Issue</option>
                            <option value="REQUEST">Request</option>
                        </select>
                        @error('type')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row mb-4">
                    <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Description</label>
                    <div class="col-sm-12 col-md-7">
                        <textarea name="description" class="form-control" cols="58" rows="5"
                                  placeholder="Describe the ticket"></textarea>
                        @error('description')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row mb-4">
                    <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Priority</label>
                    <div class="col-sm-12 col-md-7">
                        <select name="priority" class="form-control selectric">
                            <option value="" selected>--select priority--</option>
                            <option value="1"><span class="text-danger">CRITICAL</span></option>
                            <option value="2"><span class="text-warning">MAJOR</span></option>
                            <option value="3"><span class="text-black">MINOR</span></option>
                            <option value="4"><span class="text-black">WARNING</span></option>
                        </select>
                        @error('priority')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row mb-4">
                    <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Assign To</label>
                    <div class="col-sm-12 col-md-7">
                        <select name="assigned_to" class="form-control selectric">
                            <option value="" selected>--select someone---</option>
                            @foreach ($users as $user)
                                <option
                                    value="{{ $user->id }}">{{  $user->first_name.' - ('. $user->role->title .')' }}</option>
                            @endforeach
                        </select>
                        @error('assigned_to')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer bg-whitesmoke br">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
@if ($errors->has('title') || $errors->has('type') || $errors->has('description')|| $errors->has('priority')|| $errors->has('assigned_to'))
    <script>
        setTimeout(() => {
            $('#newTicketModal').modal('show');
        }, 500);
    </script>
@endif

<div class="modal fade " id="filterModal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header mb-3 bg-secondary">
                <h5 class="modal-title text-dark" id="exampleModalCenterTitle">Filter Ticket Counts</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.dashboard') }}" method="GET">
                @csrf
                <div class="modal-body">
                

                    <div class="form-group row mb-4 text-dark">
                        <div class="px-5 row w-100">
                            <div class="col-sm-2">
                                <label class="form-label" for="title">Duration:</label>
                            </div>
                            <div class="col-sm-10">
                                <select name="duration" id="duration" class="form-control">
                                <option value="">--Select--</option>
                                <option value="day">Today</option>
                                <option value="week">This Week</option>
                                <option value="month">This Month</option>
                                <option value="year">This Year</option>
                                <option value="custom">Custom</option>
                                </select>
                                @error('duration')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-4 text-dark" id="dates">
                        <div class="col-sm-1 text-center">
                            <label class="form-label" for="title">From:</label>
                        </div>
                        <div class="col-sm-5 text-center">
                            <input type="date" name="start_date" max="{{ date('Y-m-d') }}" class="form-control">
                            @error('start_date')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-sm-1 text-center">
                            <label class="form-label" for="title">To:</label>
                            {{-- <input type="date" name="end_date" max="{{ date('Y-m-d') }}" class="form-control"> --}}
                        </div>
                        <div class="col-sm-5 text-center">
                            {{-- <label class="form-label" for="title">To:</label> --}}
                            <input type="date" name="end_date" max="{{ date('Y-m-d') }}" class="form-control">
                            @error('end_date')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-whitesmoke br">
                    <button type="submit" class="btn btn-primary">OK</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if ($errors->has('duration') || $errors->has('start_date') || $errors->has('end_date'))
<script>
    setTimeout(() => {
        $('#filterModal').modal('show');
    }, 500);
</script>
@endif

<script>
    // $('#filterModal').on('show.bs.modal',function(){
    //     let modal = $(this)
    //     alert('Shown')
    //     modal.find('[name="start_date"]').val('');
    //     modal.find('[name="end_date"]').val('');

    // })

</script>
