@extends('layouts.master')


@section('title')
{{__('Tickets')}}
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-12 col-xl-12">
        <h3 class="mb-1 mt-0 text-left">{{__('Tickets list')}}
            <span style="float:right;"> <a href="{{route('user-add')}}" role="button" class="btn  custom-button"
                    data-toggle="modal" data-target="#createTicketsModal"><i class="uil-plus mr-1"></i>
                    {{__('Create ticket')}}</a></span>
        </h3>
        <nav aria-label="breadcrumb" class="float-left mt-1">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard')}}">{{__('Home')}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{__('Tickets list')}}</li>
            </ol>
        </nav>
    </div>
</div>

@endsection

@section('content')
<!-- filters --> 
<div class="card">
    <div class="card-body px-3">
        <div class="row">
            <div class="col-4 col-lg-4 mb-1"><input type="search" class="custom-search form-control "
                    placeholder="{{__('Search by ticket number')}}...">
            </div>
            <div class="col-4 col-lg-2 mb-1"><input type="search" class="custom-search form-control "
                    placeholder="{{__('Search by order number')}}...">
            </div>
            <div class="col-4 col-lg-2 mb-1">
                <select name="" id="" required class="form-control SlectBox">
                    <option value="" selected disabled>{{__('Select status')}}</option>
                    <option value="">All </option>
                    <option value="">Pending </option>
                    <option value="">Decline </option>
                    <option value="">Cmplete </option>
                </select>
            </div>
            <div class="col-6 col-lg-2 mb-1">
                <button class="btn custom-button-outline btn-block "><i class="fe fe-search"></i>
                    {{__('Filter')}}</button>
            </div>
            <div class="col-6 col-lg-2 mb-1">
                <button class="btn custom-button btn-block">
                    {{__('Reset')}}</button>
            </div>
        </div>
    </div>
</div>


<!-- tickets -->
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">

                <div class="table-responsive">
                    <table class="table table-hover table-nowrap mb-0">
                        <thead>
                            <tr>
                                <th scope="col"># {{__('Ticket')}}</th>
                                <th scope="col"># {{__('Order')}}</th>
                                <th scope="col">{{__('Status')}}</th>
                                <th scope="col">{{__('Action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>#98754</td>
                                <td>#01</td>
                                <td><span class="badge badge-soft-warning py-1">Pending</span></td>

                                <td>
                                    <a href="#" class="text-warning d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Edit ticket')}}">
                                        <i class="uil uil-edit " data-toggle="modal" data-target="#editTicketModal"></i>
                                    </a>
                                    <a href="#" class="text-danger d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Delete ticket')}}">
                                        <i class="uil uil-trash "></i>
                                    </a>

                                    <a href="{{ route('ticket-detail') }}" class="text-info d-inline-block"
                                        data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="{{__('View ticket')}}">
                                        <i class="uil uil-eye "></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>#98754</td>
                                <td>#02</td>
                                <td><span class="badge badge-soft-success py-1">Complete</span>

                                </td>
                                <td>
                                    <a href="#" class="text-warning d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Edit ticket')}}">
                                        <i class="uil uil-edit "></i>
                                    </a>
                                    <a href="#" class="text-danger d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Delete ticket')}}">
                                        <i class="uil uil-trash "></i>
                                    </a>
                                    <a href="{{ route('ticket-detail') }}" class="text-info d-inline-block"
                                        data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="{{__('View ticket')}}">
                                        <i class="uil uil-eye "></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>#98754</td>
                                <td>#03</td>
                                <td><span class="badge badge-soft-danger py-1">Declined</span></td>

                                <td>
                                    <a href="#" class="text-warning d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Edit ticket')}}">
                                        <i class="uil uil-edit "></i>
                                    </a>
                                    <a href="#" class="text-danger d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Delete ticket')}}">
                                        <i class="uil uil-trash "></i>
                                    </a>
                                    <a href="{{ route('ticket-detail') }}" class="text-info d-inline-block"
                                        data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="{{__('View ticket')}}">
                                        <i class="uil uil-eye "></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>#98754</td>
                                <td>#04</td>
                                <td><span class="badge badge-soft-success py-1">Complete</span></td>

                                <td>
                                    <a href="#" class="text-warning d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Edit ticket')}}">
                                        <i class="uil uil-edit "></i>
                                    </a>
                                    <a href="#" class="text-danger d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Delete ticket')}}">
                                        <i class="uil uil-trash "></i>
                                    </a>
                                    <a href="{{ route('ticket-detail') }}" class="text-info d-inline-block"
                                        data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="{{__('View ticket')}}">
                                        <i class="uil uil-eye "></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>#98754</td>
                                <td>#05</td>
                                <td><span class="badge badge-soft-danger py-1">Declined</span>
                                </td>
                                <td>
                                    <a href="#" class="text-warning d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Edit ticket')}}">
                                        <i class="uil uil-edit "></i>
                                    </a>
                                    <a href="#" class="text-danger d-inline-block" data-toggle="tooltip"
                                        data-placement="top" title="" data-original-title="{{__('Delete ticket')}}">
                                        <i class="uil uil-trash "></i>
                                    </a>
                                    <a href="{{ route('ticket-detail') }}" class="text-info d-inline-block"
                                        data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="{{__('View ticket')}}">
                                        <i class="uil uil-eye "></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> <!-- end table-responsive-->
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
</div>
<!-- end row -->

<!-- Ticket create modal content -->
<div id="createTicketsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createTicketsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createTicketsModalLabel">{{__('Create ticket')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label>{{__('Title')}}</label>
                    <input type="text" id="title" name="title" class="form-control" placeholder="{{__('Enter title')}}">
                </div>
                <label class="form-check-label">{{__('Ticket related to')}}: </label><br>
                <div class="form-check form-check-inline m-2">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                        value="option1">
                    <label class="form-check-label" for="inlineRadio1">{{__('Order')}}</label>
                </div>
                <div class="form-check form-check-inline m-2">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
                        value="option2">
                    <label class="form-check-label" for="inlineRadio2">{{__('General')}}</label>
                </div>
                <div class="form-group mb-3">
                    <label>{{__('Order')}}</label>
                    <select class="custom-select mb-2">
                        <option selected>{{__('Select order')}}</option>
                        <option value="1">Order 1</option>
                        <option value="2">Order 2</option>
                        <option value="2">Order 3</option>
                        <option value="2">Order 4</option>
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label class="col-form-label" for="">{{__('Description')}}</label>
                    <textarea class="form-control" required name="description" id="description" cols="30" rows="3"
                        placeholder="{{__('Enter description')}}"></textarea>
                </div>

                <!-- <div class="form-group mb-3">
                        <label>Status</label>
                        <select class="custom-select mb-2">
                            <option selected>Select Status</option>
                            <option value="1">Pending</option>
                            <option value="2">In progress</option>
                            <option value="3">Completed</option>
                            <option value="3">Decline</option>
                        </select>
                    </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Close')}}</button>
                <button type="button" class="btn btn-primary">{{__('Save changes')}}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Ticket edit modal content -->
<div id="editTicketModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editTicketsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTicketsModalLabel">{{__('Edit ticket')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label>{{__('Title')}}</label>
                    <input type="text" id="title" name="title" class="form-control" placeholder="{{__('Enter title')}}">
                </div>
                <label class="form-check-label">{{__('Ticket related to')}}: </label><br>
                <div class="form-check form-check-inline m-2 ">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                        value="option1">
                    <label class="form-check-label" for="inlineRadio1">{{__('Order')}}</label>
                </div>
                <div class="form-check form-check-inline m-2">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
                        value="option2">
                    <label class="form-check-label" for="inlineRadio2">{{__('General')}}</label>
                </div>
                <div class="form-group mb-3">
                    <label>{{__('Order')}}</label>
                    <select class="custom-select mb-2">
                        <option selected>{{__('Select order')}}</option>
                        <option value="1">Order 1</option>
                        <option value="2">Order 2</option>
                        <option value="2">Order 3</option>
                        <option value="2">Order 4</option>
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label class="col-form-label" for="">{{__('Description')}}</label>
                    <textarea class="form-control" required name="description" id="description" cols="30" rows="3"
                        placeholder="{{__('Enter description')}}"></textarea>
                </div>

                <!-- <div class="form-group mb-3">
                        <label>Status</label>
                        <select class="custom-select mb-2">
                            <option selected>Select Status</option>
                            <option value="1">Pending</option>
                            <option value="2">In progress</option>
                            <option value="3">Completed</option>
                            <option value="3">Decline</option>
                        </select>
                    </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Close')}}</button>
                <button type="button" class="btn btn-primary">{{__('Save changes')}}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- pagination -->
<div class="row">
    <div class="col-4"></div>
    <div class="col-4">
        <ul class="pagination  mb-3 flex-wrap">
            <li class="page-item page-prev disabled">
                <a class="page-link" href="#" tabindex="-1">{{__('Prev')}}</a>
            </li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item page-next">
                <a class="page-link" href="#">{{__('Next')}}</a>
            </li>
        </ul>
    </div>
    <div class="col-4"></div>
</div>
<!-- end row -->

@endsection
