@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 Issues</h4>

                     <div class="page-title-right">
                        <button class="btn btn-primary" type="button" id="addissue">Add Issue</button>
                            @if(isset($draftIssues) && count($draftIssues)>0 && $ticket->status==6)
                                        <a class="btn btn-primary" href="{{url('/')}}/ticket/raise/{{$ticket->tid}}">
                                          Raise Ticket
                                        </a>
                            @endif
                     </div>

                 </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xl-6">
                 <div class="card">
                     <div class="card-body d-sm-flex  justify-content-between">
                         <div class="div1">
                             <ul class="list-unstyled">

                                 <li> <small> Model Name </small> <br>
                                     <b> {{$customerdetail->mname}} </b>
                                 </li>
                                 <li> <small>Vin</small> <br>
                                     <b> {{$customerdetail->vin}} </b>
                                 </li>
                                 <li> <small> Vehicle Registration No. </small> <br>
                                     <b> {{$customerdetail->vehicle_no}} </b>
                                 </li>

                                 <li> <small> Purchase Date </small> <br>
                                     <b> {{$customerdetail->purchase_date}} </b>
                                 </li>
                                 <li> <small> KMS till Date </small> <br>
                                     <b> @if(isset($ticket) && isset($ticket->km_till_date)) {{$ticket->km_till_date}} @else -  @endif </b>
                                 </li>

                             </ul>
                         </div>

                         <div class="div2 pt-4 text-center d-none d-sm-block">
                             <figure class="figure" style="width: 150px;">
                                 @if (isset($customerdetail))
                                 <img  class="img-fluid" src="{{url('/')}}/uploads/model_covers/{{$customerdetail->model_cover}}" class="figure-img img-fluid rounded"
                                     alt="Model1">
                                @endif
                                 <figcaption class="text-primary font-size-16 fw-bold">{{$customerdetail->mname}}</figcaption>
                             </figure>
                         </div>

                         <div class="div3">
                             <ul class="list-unstyled">
                                 <li> <small> Customer Name </small> <br>
                                     <b> {{$customerdetail->cust_name}} </b>
                                 </li>
                                 <li> <small> Mobile No.</small> <br>
                                     <b> {{$customerdetail->mobile}}</b>
                                 </li>
                                 <li> <small> Email </small> <br>
                                     <b>  {{$customerdetail->email}} </b>
                                 </li>
                             </ul>
                         </div>
                     </div>



                 </div>

                           @if(isset($ticket) && !empty($ticket))

               <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 }}">
                                  <input type="hidden" name="vehicle_id" value="{{ $ticket->vid }}">
                                  <input type="hidden" name="customer_id" value="{{ $ticket->cid }}">
                                 @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-12" 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  @if(isset($selectecu_hexa) && in_array($e['ecu']['id'].'_'.$f['id'],$selectecu_hexa)) selected @endif 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">Update Ticket</button>


                                 </div>
                             </form>
                         </div>


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

             @endif

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


              @if (isset($draftIssues) && count($draftIssues)>0)
                    <div class="card">
                        <div class="card-body">

                            <div class="mb-4">
                                <h5 class="text-primary">
                                 Issue List

                                </h5>
                                <div class="ms-auto mb-4">

                                    <div class="table-responsive">
                                        @if (isset($draftIssues))
                                            <table class="table mb-0 draftissues">

                                                <thead class="table-light">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Issue Category</th>
                                                        <th>Issue</th>
                                                        <th>DTC</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($draftIssues as $key => $c)
                                                        <tr>
                                                            <td>{{ $key + 1 }}</td>
                                                            <td>{{ $c->iname }}</td>
                                                            <td>{{ $c->itname }}</td>
                                                            <td>{{ $c->dtc_code }}</td>
                                                            <td>
                                                              <a class="edit-issue" href="{{url('/')}}/custIssue/edit/{{$ticket->vid}}/{{$ticket->cid}}/{{$c->id}}">
                                                                    <svg style="width:15px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                                                              </a>

                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        @endif
                                    </div>

                                </div>
                            </div>

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

               @endif



             </div>

         </div>
     </div>
 <!-- Add your JavaScript libraries and scripts here -->
 <script>
    var url = '{!! url('/') !!}';
</script>
 <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>

     function openIssueForm(url='')
    {

      if(url.length==0)
      {
        url="{{url('/')}}/custIssue/add/{{$ticket->vid}}/{{$ticket->cid}}/{{$ticket->tid}}";
      }
         $.ajax({url: url,
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: 'GET',
            cache: false,
            datatype: 'html',
            success: function(data) {
              $('body').append(data.html);
              $('#addIssuemodel').modal('toggle');
                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();


                });

                $('#addIssuemodel').on('click', 'button.close', function (eventObject) {

                    $('#addIssuemodel').modal('hide');
                     $('#addIssuemodel').closest(".modal-backdrop").remove();
                     $('#addIssuemodel').remove();

                });

            },

            error: function(xhr,textStatus,thrownError) {
                 alert(xhr + "\n" + textStatus + "\n" + thrownError);
            }

            });
    }
     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)
                 })


             }



         })



    }


    $('#addissue').on("click",(event)=>{

         openIssueForm('');
    })

      $('.edit-issue').on("click",(event)=>{
          event.preventDefault();
         openIssueForm($(event.currentTarget).attr('href'));
    })






 </script>
@endsection