@extends('admin.layouts.app')

@section('title', 'Brand')
@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">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                            <li class="breadcrumb-item active">Add Issues</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <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> 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> 524 </b>
                                </li>
                                <li> <small> Old Tickets </small> <br>
                                    <b> 02 </b>
                                </li>
                            </ul>
                        </div>

                        <div class="div2 pt-4 text-center d-none d-sm-block">
                            <figure class="figure">
                                <img src="{{url('/')}}/assets/images/model-thumb/model1.png" class="figure-img img-fluid rounded"
                                    alt="Model1">
                                <figcaption class="font-size-16 fw-bold">Chetak 2413</figcaption>
                            </figure>
                        </div>

                        <div class="div3">
                            <ul class="list-unstyled">
                                <li> <small> Customer Name </small> <br>
                                    <b>{{ $customerdetail->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>
                <div class="card">
                    <div class="card-body">
                        <div class="mb-4">
                            <h5 class="text-primary"> <small class="font-size-11 text-secondary"> Ticket ID </small>
                                <br> {{$current_ticket->ticket_no}} <br>
                                <small class="text-secondary fst-italic"> {{ date("Y-m-d",strtotime($current_ticket->created_at)) }}</small>
                            </h5>
                            <div class="ms-auto mb-4">

                                <div class="d-flex justify-content-end">
                                    <a href="{{ route('custIssue.addIssue', ['vehicle' => $vehicle->id, 'customer' => $customer->id,"ticket"=>$current_ticket->id]) }}"
                                        class="btn btn-outline-primary mb-3">+ Add Issue </a>
                                </div>

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

                                            <thead class="table-light">
                                                <tr>
                                                    <th>#</th>
                                                    <th>Issue Category</th>
                                                    <th>Issue</th>
                                                    <th>DTC</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>

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

                                {{-- <div class="my-3">

                                    <form method="POST" action="{{ route('custIssue.updateStatus') }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        @method('POST')
                                        <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                                        <input type="hidden" name="vehicle_id" value="{{ $vehicle->id }}">
                                        <input type="hidden" name="executive_id" value="{{ Auth::user()->id }}">
                                        <div class="mb-3">

                                            <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>
                                                <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" checked                         >
                                                <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 class="form-check-input" type="radio" name="priority"
                                                    id="high" value="high">
                                                <label class="form-check-label" for="high">High</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="priority"
                                                    id="medium" value="medium">
                                                <label class="form-check-label" for="medium">Medium</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="priority"
                                                    id="low" value="low" checked>
                                                <label class="form-check-label" for="low">Low</label>
                                            </div>

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

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

                                    </form>

                                </div> --}}

                            </div>
                        </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="{{ 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 setupVoiceRecognition(inputId, buttonId) {
        const voiceInput = document.getElementById(inputId);
        const startStopBtn = document.getElementById(buttonId);
        const recognizer = new annyang();

        const commands = {
            '(*text)': (text) => {
                voiceInput.value = text;
            }
        };

        startStopBtn.addEventListener('click', () => {
            if (recognizer.isListening()) {
                recognizer.abort();
                startStopBtn.textContent = 'Start';
            } else {
                recognizer.start({
                    autoRestart: false,
                    continuous: true
                });
                startStopBtn.textContent = 'Stop';
            }
        });

        recognizer.addCommands(commands);
    }

    // Setup voice recognition for each input
    //  setupVoiceRecognition('voiceInput1', 'startStopBtn1');
    // setupVoiceRecognition('voiceInput2', 'startStopBtn2');
</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)
                })


            }



        })



    }
    record('#startStopBtn1');
    record('#startStopBtn2');
</script>
@endsection