templates/ticket_details/index.html.twig line 1

  1. {% extends 'base.html.twig' %} 
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Tickets</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Apps</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Tickets</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!--ROW OPENED-->
  20.                             <div class="row">
  21.                                 <div class="col-12">
  22.                                     <div class="card p-0">
  23.                                         <div class="card-header border-bottom d-block">
  24.                                             <div class="row align-items-center">
  25.                                                 <div class="col-xl-8">
  26.                                                     <h4 class="mb-0 p-1">
  27.                                                         #TCKT1116 - Aliquyam sit ea vero et elitr.
  28.                                                         <span class="badge badge-sm bg-primary text-white">open</span>
  29.                                                     </h4>
  30.                                                 </div>
  31.                                                 <div class="col-xl">
  32.                                                     <div class="btn-list float-end p-1">
  33.                                                         <a href="javascript:void(0)" class="btn btn-info" data-bs-target="#editTicketModal" data-bs-toggle="modal">
  34.                                                             <i class="fe fe-edit"></i>
  35.                                                             Edit
  36.                                                         </a>
  37.                                                         <a href="javascript:void(0)" class="btn btn-primary">
  38.                                                             <i class="fe fe-check-circle"></i>
  39.                                                             Mark As Resolved
  40.                                                         </a>
  41.                                                     </div>
  42.                                                 </div>
  43.                                             </div>
  44.                                         </div>
  45.                                         <div class="card-body">
  46.                                             <div class="row">
  47.                                                 <div class="col-xl-auto col-lg-6 col-md-6 col-sm-12">
  48.                                                     <span class="text-dark me-1">Created Date:</span>
  49.                                                     <span class="text-info">11 Jan 21</span>
  50.                                                 </div>
  51.                                                 <div class="col-xl-auto col-lg-6 col-md-6 col-sm-12">
  52.                                                     <span class="text-dark me-1">Status:</span>
  53.                                                     <span class="text-primary">Open</span>
  54.                                                 </div>
  55.                                                 <div class="col-xl-auto col-lg-6 col-md-6 col-sm-12">
  56.                                                     <span class="text-dark me-1">Client:</span>
  57.                                                     <span class="text-muted">Steve Morgan</span>
  58.                                                 </div>
  59.                                                 <div class="col-xl-auto col-lg-6 col-md-6 col-sm-12">
  60.                                                     <span class="text-dark me-1">Ticket Type:</span>
  61.                                                     <span class="text-muted">General Support</span>
  62.                                                 </div>
  63.                                                 <div class="col-xl-auto col-lg-6 col-md-6 col-sm-12">
  64.                                                     <span class="text-dark me-1">Assigned To:</span>
  65.                                                     <span class="text-muted">Daniel Obrien</span>
  66.                                                 </div>
  67.                                                 <div class="col-xl-auto col-lg-6 col-md-6 col-sm-12">
  68.                                                     <span class="text-dark me-1">Requested By:</span>
  69.                                                     <span class="text-muted">Robert Gendry</span>
  70.                                                 </div>
  71.                                             </div>
  72.                                         </div>
  73.                                         <div class="card-footer ticket-details-footer p-0">
  74.                                             <div class="media ticket-reply">
  75.                                                 <div class="me-3">
  76.                                                     <a href="{{ absolute_url(path('app_profile')) }}"> <img class="media-object rounded-circle thumb-sm" alt="64x64" src="{{absolute_url(asset('build/images/users/5.jpg'))}}"> </a>
  77.                                                 </div>
  78.                                                 <div class="media-body">
  79.                                                     <nav class="nav float-end">
  80.                                                         <div class="dropdown">
  81.                                                             <a class="nav-link text-muted fs-16 p-0 ps-4" href="javascript:;" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
  82.                                                             <div class="dropdown-menu dropdown-menu-start">
  83.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-corner-up-left me-1"></i> Reply</a>
  84.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-flag me-1"></i> Report</a>
  85.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-trash-2 me-1"></i> Delete</a>
  86.                                                             </div>
  87.                                                         </div>
  88.                                                     </nav>
  89.                                                     <h5 class="mt-0 text-dark">Gavin Murray <span class="text-muted fs-12 ms-1">02-10-2021  09:45am</span></h5>
  90.                                                     <span><i class="fe fe-thumb-up text-danger"></i></span>
  91.                                                     <p class="font-13 reply-text-main">
  92.                                                         Lorem ipsum dolor sit amet, quis Neque porro quisquam est, nostrud exercitation ullamco laboris commodo consequat?
  93.                                                     </p>
  94.                                                     <p class="font-13 reply-text-main">
  95.                                                         Dolores erat et elitr ipsum duo diam accusam et. Kasd diam erat sanctus elitr et. Vero rebum justo diam sadipscing,
  96.                                                         Sanctus nonumy nonumy diam lorem dolor stet.
  97.                                                     </p>
  98.                                                 </div>
  99.                                             </div>
  100.                                             <div class="media ticket-reply">
  101.                                                 <div class="me-3">
  102.                                                     <a href="{{ absolute_url(path('app_profile')) }}"> <img class="media-object rounded-circle thumb-sm" alt="64x64" src="{{absolute_url(asset('build/images/users/13.jpg'))}}"> </a>
  103.                                                 </div>
  104.                                                 <div class="media-body">
  105.                                                     <nav class="nav float-end">
  106.                                                         <div class="dropdown">
  107.                                                             <a class="nav-link text-muted fs-16 p-0 ps-4" href="javascript:;" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
  108.                                                             <div class="dropdown-menu dropdown-menu-start">
  109.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-edit me-1"></i> Edit</a>
  110.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-corner-up-left me-1"></i> Reply</a>
  111.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-trash-2 me-1"></i> Delete</a>
  112.                                                             </div>
  114.                                                         </div>
  115.                                                     </nav>
  116.                                                     <h5 class="mt-0 text-dark">Daniel Obrien<span class="text-muted fs-12 ms-1">02-10-2021  10:15am</span></h5>
  117.                                                     <span><i class="fe fe-thumb-up text-danger"></i></span>
  118.                                                     <p class="font-13 reply-text-main">
  119.                                                         Nostrud exercitation ullamco laboris commodo consequat.
  120.                                                     </p>
  121.                                                 </div>
  122.                                             </div>
  123.                                             <div class="media ticket-reply">
  124.                                                 <div class="me-3">
  125.                                                     <a href="{{ absolute_url(path('app_profile')) }}"> <img class="media-object rounded-circle thumb-sm" alt="64x64" src="{{absolute_url(asset('build/images/users/5.jpg'))}}"> </a>
  126.                                                 </div>
  127.                                                 <div class="media-body">
  128.                                                     <nav class="nav float-end">
  129.                                                         <div class="dropdown">
  130.                                                             <a class="nav-link text-muted fs-16 p-0 ps-4" href="javascript:;" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
  131.                                                             <div class="dropdown-menu dropdown-menu-start">
  132.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-corner-up-left me-1"></i> Reply</a>
  133.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-flag me-1"></i> Report</a>
  134.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-trash-2 me-1"></i> Delete</a>
  135.                                                             </div>
  136.                                                         </div>
  137.                                                     </nav>
  138.                                                     <h5 class="mt-0 text-dark">Gavin Murray <span class="text-muted fs-12 ms-1">02-10-2021  7:45pm</span></h5>
  139.                                                     <span><i class="fe fe-thumb-up text-danger"></i></span>
  140.                                                     <p class="font-13 reply-text-main">
  141.                                                         Eos ipsum voluptua nonumy elitr amet est. Diam kasd tempor labore dolores kasd duo gubergren, ipsum sadipscing ut accusam nonumy.
  142.                                                     </p>
  143.                                                 </div>
  144.                                             </div>
  145.                                             <div class="media ticket-reply">
  146.                                                 <div class="me-3">
  147.                                                     <a href="{{ absolute_url(path('app_profile')) }}"> <img class="media-object rounded-circle thumb-sm" alt="64x64" src="{{absolute_url(asset('build/images/users/13.jpg'))}}"> </a>
  148.                                                 </div>
  149.                                                 <div class="media-body">
  150.                                                     <div>
  151.                                                         <textarea name="reply-to-ticket" class="form-control" id="replyInput" cols="30" rows="10" placeholder="Write Your Reply Here..."></textarea>
  152.                                                         <div class="btn-list mt-3 text-end">
  153.                                                             <a href="javascript:void(0)" class="btn btn-info float-start">
  154.                                                                 <i class="fe fe-upload"></i>
  155.                                                                 Upload Files
  156.                                                             </a>
  157.                                                             <a href="javascript:void(0)" class="btn btn-outline-warning">
  158.                                                                 <i class="fe fe-file-minus"></i>
  159.                                                                 Save As Note
  160.                                                             </a>
  161.                                                             <a href="javascript:void(0)" class="btn btn-primary">
  162.                                                                 <i class="fe fe-send"></i>
  163.                                                                 Post
  164.                                                             </a>
  165.                                                         </div>
  166.                                                     </div>
  167.                                                 </div>
  168.                                             </div>
  169.                                         </div>
  170.                                     </div>
  171.                                 </div>
  172.                             </div>
  173.                             <!--ROW CLOSED-->
  175.                             <!--EDIT TICKET MODAL-->
  176.                             <div class="modal fade" id="editTicketModal">
  177.                                 <div class="modal-dialog edit-ticket-modal" role="document">
  178.                                     <div class="modal-content modal-content-demo">
  180.                                         <div class="modal-header p-5">
  181.                                             <h4 class="modal-title text-dark">Edit Ticket</h4><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
  182.                                         </div>
  184.                                         <div class="modal-body">
  185.                                             <div class="row">
  186.                                                 <form class="form-horizontal">
  187.                                                     <div class="form-group ">
  188.                                                         <div class="row">
  189.                                                             <div class="col-md-3">
  190.                                                                 <label class="form-label">Title</label>
  191.                                                             </div>
  192.                                                             <div class="col-md-9">
  193.                                                                 <input type="text" class="form-control"  placeholder="User Name" value="Aliquyam sit ea vero et elitr.">
  194.                                                             </div>
  195.                                                         </div>
  196.                                                     </div>
  197.                                                     <div class="form-group ">
  198.                                                         <div class="row">
  199.                                                             <div class="col-md-3">
  200.                                                                 <label class="form-label">Created Date</label>
  201.                                                             </div>
  202.                                                             <div class="col-md-9">
  203.                                                                 <div class="input-group date" data-date-format="mm-dd-yyyy">
  204.                                                                     <input class="form-control" id="bootstrapDatePicker3" type="text"/>
  205.                                                                 </div>
  206.                                                             </div>
  207.                                                         </div>
  208.                                                     </div>
  209.                                                     <div class="form-group ">
  210.                                                         <div class="row">
  211.                                                             <div class="col-md-3">
  212.                                                                 <label class="form-label">Status</label>
  213.                                                             </div>
  214.                                                             <div class="col-md-9">
  215.                                                                 <select class="form-control ticket-status-search" data-placeholder="Select Status">
  216.                                                                     <option value="open" selected>Open</option>
  217.                                                                     <option value="closed">Closed</option>
  218.                                                                     <option value="pending">Pending</option>
  219.                                                                     <option value="resolved">Resolved</option>
  220.                                                                 </select>
  221.                                                             </div>
  222.                                                         </div>
  223.                                                     </div>
  224.                                                     <div class="form-group ">
  225.                                                         <div class="row">
  226.                                                             <div class="col-md-3">
  227.                                                                 <label class="form-label">Client</label>
  228.                                                             </div>
  229.                                                             <div class="col-md-9">
  230.                                                                 <div class="form-group m-0">
  231.                                                                     <select class="form-control select2-client-search" data-placeholder="Choose Type...">
  232.                                                                         <option value="14" selected>Steve Morgon</option>
  233.                                                                         <option value="13">Matt Donnowan</option>
  234.                                                                         <option value="15">Mark Henry</option>
  235.                                                                         <option value="6">Anna Marie</option>
  236.                                                                     </select>
  237.                                                                 </div>
  238.                                                             </div>
  239.                                                         </div>
  240.                                                     </div>
  241.                                                     <div class="form-group ">
  242.                                                         <div class="row">
  243.                                                             <div class="col-md-3">
  244.                                                                 <label class="form-label">Ticket Type</label>
  245.                                                             </div>
  246.                                                             <div class="col-md-9">
  247.                                                                 <div class="form-group m-0">
  248.                                                                     <select class="form-control select2-show-search" data-placeholder="Choose Type...">
  249.                                                                         <option label="Choose one"></option>
  250.                                                                         <option value="empty">---</option>
  251.                                                                         <option value="general support" selected>General Support</option>
  252.                                                                     </select>
  253.                                                                 </div>
  254.                                                             </div>
  255.                                                         </div>
  256.                                                     </div>
  257.                                                     <div class="form-group ">
  258.                                                         <div class="row">
  259.                                                             <div class="col-md-3">
  260.                                                                 <label class="form-label">Assign To</label>
  261.                                                             </div>
  262.                                                             <div class="col-md-9">
  263.                                                                 <div class="form-group m-0">
  264.                                                                     <select class="form-control select2-client-search" data-placeholder="Choose Type...">
  265.                                                                         <option value="18" selected>Daniel Obrien</option>
  266.                                                                         <option value="15">Tyler Durden</option>
  267.                                                                         <option value="3">Kristen Stewart</option>
  268.                                                                         <option value="16">Jon Doe</option>
  269.                                                                     </select>
  270.                                                                 </div>
  271.                                                             </div>
  272.                                                         </div>
  273.                                                     </div>
  274.                                                     <div class="form-group ">
  275.                                                         <div class="row">
  276.                                                             <div class="col-md-3">
  277.                                                                 <label class="form-label">Requested By</label>
  278.                                                             </div>
  279.                                                             <div class="col-md-9">
  280.                                                                 <div class="form-group m-0">
  281.                                                                     <select class="form-control select2-client-search" data-placeholder="Choose Type...">
  282.                                                                         <option value="17" selected>Robert Gendry</option>
  283.                                                                         <option value="13">Jorah Mormont</option>
  284.                                                                         <option value="12">Damon Salvatore</option>
  285.                                                                     </select>
  286.                                                                 </div>
  287.                                                             </div>
  288.                                                         </div>
  289.                                                     </div>
  290.                                                 </form>
  291.                                             </div>
  292.                                         </div>
  294.                                         <div class="modal-footer text-end">
  295.                                             <div class="btn-list">
  296.                                                 <button class="btn btn-outline-danger" data-bs-dismiss="modal">
  297.                                                     <i class="fe fe-x-circle"></i>
  298.                                                     Cancel
  299.                                                 </button>
  300.                                                 <button class="btn btn-primary">
  301.                                                     <i class="fe fe-check-circle"></i>
  302.                                                     Save Changes
  303.                                                 </button>
  304.                                             </div>
  305.                                         </div>
  306.                                     </div>
  307.                                 </div>
  308.                             </div><!--EDIT TICKET MODAL ENDS-->
  310. {% endblock %}
  311. {% block javascripts %}
  312.    {{parent()}} 
  313.         <!-- SELECT2 JS -->
  314.         <script src="{{absolute_url(asset('build/plugins/select2/select2.full.min.js'))}}"></script>
  316.         <!-- BOOTSTRAP-DATEPICKER JS -->
  317.         <script src="{{absolute_url(asset('build/plugins/bootstrap-datepicker/js/datepicker.js'))}}"></script>
  319.         <!-- TICKET DETAILS JS -->
  320.          {{ encore_entry_script_tags('js/ticket-details') }}
  321. {% endblock %}