@extends('admin.layouts.app')
@section('title', 'dashboard')
@section('content')
     <div class="container-fluid">
         <div class="row">
             <div class="col-12">
                 <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                     <h4 class="mb-sm-0 font-size-18">Add Tickets</h4>

                     <div class="page-title-right">

                     </div>

                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xl-6">

                 </div>
                 <div class="card">
                     <!-- card body -->
                     <div class="card-body">
                         <div class="mb-4">
                             <form id="issueform" method="POST" action="{{ route('custIssue.updateTicket') }}"
                                 enctype="multipart/form-data">
                                 @csrf
                                 @method('POST')
                                 @if(isset($ticket))
                                  <input type="hidden" name="ticket_id" value="{{ $ticket->tid }}">
                                 @endif

                                 @if(isset($customerId))
                                 <input type="hidden" name="customerId" value="{{ $customerId }}">
                                 @endif

                                 @if(isset($vehicleId))
                                   <input type="hidden" name="vehicleId" value="{{$vehicleId }}">
                                 @endif



                                      <div class="mb-3">
                                        @if(isset($ticket))
                                         <h3>{{$ticket->ticket_no}}</h3>
                                         @endif
                                      </div>
                                      {{-- <div class="mb-3">
                                        <label class="form-label" for="formrow-firstname-input">
                                            Status
                                            </label>
                                       <select class="form-select" name="status">
                                            <option value="0" @if($ticket->tstatus==0)selected @endif>Pending</option>
                                            <option value="1"  @if($ticket->tstatus==1) selected @endif >Under Process</option>
                                            <option value="2"  @if($ticket->tstatus==2) selected @endif >On Hold</option>
                                            <option value="3"  @if($ticket->tstatus==3) selected @endif >Resolved</option>
                                            <option value="4"  @if($ticket->tstatus==4) selected @endif >Closed</option>
                                        </select>

                                      </div> --}}
                                      <div class="mb-3">
                                    <label class="form-label" for="formrow-firstname-input">Vehicle
                                         Condition   </label><br>

                                     <div class="form-check form-check-inline me-3">
                                         <input class="form-check-input" type="radio" name="vehicle_condition"
                                             id="vehicle_condition1" value="on_road" required
                                            @if(isset($ticket) && $ticket->vehicle_condition=='on_road')checked @endif

                                             >
                                         <label class="form-check-label" for="vehicle_condition1">On Road</label>
                                     </div>
                                     <div class="form-check form-check-inline">
                                         <input class="form-check-input" type="radio" name="vehicle_condition"
                                             id="vehicle_condition2" value="off_road" required
                                             @if(isset($ticket) && $ticket->vehicle_condition=='off_road')checked @endif
                                             >
                                         <label class="form-check-label" for="vehicle_condition2">Off Road</label>
                                     </div>

                                     @include('admin.partials.form-errors', [
                                         'field' => 'vehicle_condition',
                                     ])
                                 </div>

                                <div class="mb-3">
                                     <label class="form-label" for="formrow-firstname-input">Set
                                         Priority</label><br>
                                     <div class="form-check form-check-inline me-3">
                                         <input required class="form-check-input" type="radio" name="priority" id="high"
                                             value="high" @if(isset($ticket) && $ticket->priority=='high' ) checked @endif>
                                         <label class="form-check-label" for="high">High</label>
                                     </div>
                                     <div class="form-check form-check-inline">
                                         <input required class="form-check-input" type="radio" name="priority" id="medium"
                                             value="medium"   @if(isset($ticket) &&  $ticket->priority=='medium' )  checked @endif >
                                         <label class="form-check-label" for="medium">Medium</label>
                                     </div>
                                     <div class="form-check form-check-inline">
                                         <input  required class="form-check-input" type="radio" name="priority" id="low"
                                             value="low" @if(isset($ticket) && $ticket->priority=='low' )  checked @endif >
                                         <label class="form-check-label" for="low">Low</label>
                                     </div>

                                     @include('admin.partials.form-errors', [
                                         'field' => 'priority',
                                     ])
                                </div>
                                <div class="mb-3">
                                     <label class="form-label" for="formrow-firstname-input">
                                         KM till Date</label><br>
                                     <div>
                                         <input   required class="form-control" type="text" name="kmeters"
                                             value="{{isset($ticket) ? $ticket->km_till_date:''}}">
                                     </div>
                                     @include('admin.partials.form-errors', [
                                         'field' => 'kmeters',
                                     ])
                                </div>

                                <div class="mb-3">
                                     <label class="form-label" for="formrow-firstname-input">
                                         Software Version</label><br>

                                       <div class="col-sm-6" style="border:1px solid;padding:15px">

                                       @foreach ($eculist as  $key=>$e)

                                        <div class="ecu_hexa_files form-group ">
                                             <label>{{ $e['ecu']['name'] }}</label>
                                            <select name="ecu[]" class="form-control">
                                             <option value="" disabled selected >Select version</option>
                                            @foreach ( $e['hexafiles'] as $f )
                                               <option value="{{$e['ecu']['id']}}_{{$f['id']}}">{{$f['name']}}</option>
                                             @endforeach
                                            </select>
                                        </div>
                                       @endforeach




                                     </div>

                                </div>
                                  </div>
                                 <div class="mt-4">
                                     <button type="submit" id="submitBtn" class="btn btn-primary w-md">Save</button>
                                 </div>
                             </form>
                         </div>


                     </div>
                     <!-- end card -->
                 </div>
             </div>
         </div>
     </div>

 <!-- Add your JavaScript libraries and scripts here -->
 <script src="{{ url('/') }}/assets/libs/jquery/jquery.min.js"></script>
 <script src="{{ url('/') }}/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 <script src="{{ url('/') }}/assets/js/app.js"></script>
 <script>
     function handleIssueTypeChange() {
         // alert('hi');
         const issueTypeSelect = document.getElementById('issueType_id');
         const issueSelect = document.getElementById('issue_id');
         const otherInput = document.getElementById('other');

         if (issueTypeSelect.value === 'other') {
             if (issueSelect.value === 'other') {
                 otherInput.setAttribute('required', 'required');
             }
         } else {
             otherInput.removeAttribute('required');
             issueSelect.setAttribute('required', 'required');
         }

         if (issueSelect.value === 'other') {
             otherInput.setAttribute('required', 'required');
         } else {
             otherInput.removeAttribute('required');
         }
     }
 </script>

 <script type="text/javascript">
     function getIssueByType() {

         var issueType_id = document.getElementById('issueType_id').value;

         var url = '{{ route('custIssue.getIssueByType', [':issueType_id']) }}';
         url = url.replace(':issueType_id', issueType_id);

         if (issueType_id) {
             $.ajax({
                 url: url,
                 type: "GET",
                 dataType: "json",

                 success: function(data) {
                     $('select[name="issue_id"]').empty();
                     $('select[name="issue_id"]').prepend('<option value="">--Select issue--</option>');
                     $.each(data, function(key, value) {
                         $('select[name="issue_id"]').append('<option value="' + key + '">' + value +
                             '</option>');
                     });
                     $('select[name="issue_id"]').append('<option value="other">Other</option>');
                 }
             });
         } else {
             $('select[name="issue_id"]').empty();
         }


     }
 </script>

 <!-- Include annyang script and your voice recognition code -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
 <script src="{{ url('/') }}/assets/js/recordingModule.js"></script>


 <script>
     let chunkmapping = {}

     function record(inputId) {

         var btn = $(inputId)
         btn.on("click", () => {
             if (btn.hasClass('Recording')) {
                 stopRecording().then(() => {
                     btn.addClass('notRec').removeClass('Rec')
                     $(inputId + "audio").css({
                         display: 'block'
                     })
                 });
                 btn.removeClass('Recording')

             } else {
                 btn.addClass('Recording')
                 btn.addClass('Rec').removeClass('notRec')
                 $(inputId + "audio").css({
                     display: 'none'
                 })
                 startRecording().then((blob) => {
                     chunkmapping["audio"] = blob;
                     console.log(blob)
                     let file = new File([blob], 'testing.mp3');
                     let container = new DataTransfer();
                     container.items.add(file);
                     document.querySelector(inputId + "file").files = container.files;
                     $(inputId + "audio").attr("src", URL.createObjectURL(blob))
                 }).catch((error) => {

                     btn.addClass('notRec').removeClass('Rec')
                     $(inputId + "audio").css({
                         display: 'none'
                     })
                     $(inputId + "audio").css({
                         display: 'none'
                     })
                     alert(error)
                 })


             }



         })



     }
     $(document).ready(()=>{
      record('#startStopBtn1');
      record('#startStopBtn2');
     })


      $('#dtccode').select2({
            placeholder: 'Search for a DTC  code',
            minimumInputLength: 1,
            templateResult:function(data){
                  return $(`<div class="dtc-template">
                     <div>${data.text}</div>
                     <div>${data.description}</div>
                   </div>`)
                   },
            ajax: {
                 url: '{{url('/')}}'+'/dtccode/search',
                 dataType:'json',
                'headers': {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                 processResults: function (data) {
                    return {
                        results: data
                    };
                },
                data: function (params) {
                var query = {
                    search: params.term
                }


                return query;
                }

            }
      });

        $('#dtccode').on("select2:select", function(e) {
           console.log(e.params.data);
           $("#dtccode-container")
           .append(
            `<div class="dtccode-row" id="dtc-${e.params.data.id}">
                <div style="flex:1">
                  <span>${e.params.data.code}: </span>
                  <span>${e.params.data.description}</span>
                </div>
                <div class="dtcrow-check">
                  <label>
                    Is History
                  </label>
                  <input type="checkbox"  value="true" name="dtccode-${e.params.data.id}">
                </div>

            </div>`
           )
        });
        $('#dtccode').on("select2:unselect", function(e) {

          $("#dtc-"+e.params.data.id)
          .remove();


        });





 </script>
@endsection