@extends('admin.layouts.member_layout')


@section('style')
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />

@endsection

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-8">
            <div class="row">
                <!-- detail pengajuan konsultasi -->
                @if($consultation->consultation_response_id)
                @include('admin.consultation.pengajuan_konsultasi')
                @else
                @include('admin.consultation.pengajuan_konsultasi_editable')
                @endif

                <!-- proses terakhir -->
                @if ($consultation->ConsultationResponse)
                    <div class="col-xl-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Proses terakhir</h4>
                            </div>
                            <div class="card-body">
                                <div class="basic-form">
                                    <form>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Proses</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value="{{ $consultation->ConsultationResponse->Action[count($consultation->ConsultationResponse->Action)-1]->ActionStep->name ?? '-' }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Oleh</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value="{{ $consultation->ConsultationResponse->Action[count($consultation->ConsultationResponse->Action)-1]->dataBy->name ?? "-" }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Kepada</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value="{{ $consultation->ConsultationResponse->Action[count($consultation->ConsultationResponse->Action)-1]->dataTo->name  ?? "-"}}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Untuk Melakukan</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value="{{ $consultation->ConsultationResponse->ActionStep->name  ?? "-"}}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Keterangan</label>
                                            <div class="col-sm-9">
                                                <textarea class="form-control" readonly rows="4" id="comment"> {{ $consultation->ConsultationResponse->Action[count($consultation->ConsultationResponse->Action)-1]->note ?? "Tidak Ada Catatan" }} </textarea>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Lampiran</label>
                                            <div class="col-sm-9">
                                                @forelse ($documents as $document)
                                                    <a href="{{ asset('/uploads/'.$document->name) }}" target="_blank">{{ $document->name }}</a> <br>
                                                @empty
                                                    Tidak ada lampiran
                                                @endforelse
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <!-- meetings info -->
                @if(count($consultation->ConsultationResponse->Meeting ?? []) > 0)
                    <div class="col-xl-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Jadwal Konsultasi</h4>
                            </div>
                            <div class="card-body">
                                <div class="basic-form">
                                    <form>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Konsultan</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value="{{ $consultation->ConsultationResponse->Meeting[0]->user->name ?? "-"}}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Jadwal</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value="{{ $consultation->ConsultationResponse->Meeting[0]->schedule  ?? "-"}}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Tipe</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value={{ $consultation->ConsultationResponse->Meeting[0]->type ?? "-"}}>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Alamat</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" value={{ $consultation->ConsultationResponse->Meeting[0]->address ?? "-"}}>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Hasil Konsultasi</label>
                                            <div class="col-sm-9">
                                                <textarea class="form-control" rows="8" id="comment" name="hasil" readonly> {{ $consultation->ConsultationResponse->Meeting[0]->report_overview ?? "-" }} </textarea>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-3 col-form-label">Lampiran</label>
                                            <div class="col-sm-9">

                                                @foreach ($documents as $document)
                                                    <a href="{{ asset('/uploads/'.$document->path) }}">{{ $document->name }}</a>
                                                @endforeach
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <!-- form action -->
                @if( ( ($consultation->ConsultationResponse->Action ?? null) ? ($consultation->ConsultationResponse->Action[count($consultation->ConsultationResponse->Action)-1]->to) : null) == Auth::user()->id || (Auth::user()->role == 'operator' && !$consultation->ConsultationResponse) )
                    <div class="col-xl-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ ($consultation->ConsultationResponse->ActionStep ?? $currentStep)->name }} </h4>
                            </div>
                            <div class="card-body">
                                <div class="basic-form">
                                    <form action="{{ url('/member/consultation/action') }}" method="post">
                                        @csrf
                                        @if ($step_before)
                                            <input type="hidden" name="step_before" value="{{ $step_before->type }}">
                                        @endif
                                        <input type="hidden" name="next" id="next_input">
                                        <input type="hidden" name="role" id="role_input">
                                        <input type="hidden" name="current" id="current_input">
                                        <input type="hidden" name="current_step" value="{{ ($consultation->ConsultationResponse->ActionStep ?? $currentStep)->id }}">
                                        <input type="hidden" name="response_id" value="{{ $consultation->ConsultationResponse->id ?? null }}">
                                        <input type="hidden" name="request_id" value="{{ $consultation->id }}">
                                        @if (($consultation->ConsultationResponse->ActionStep->type[0] ?? null) === 'scheduling')
                                            <div class="form-group">
                                                <label class="col-sm-3 col-form-label">Jadwal</label>
                                                <div class="row">
                                                    <div class="col row justify-content-around">
                                                        <input type="date" class="form-control col-sm-5" name="tanggal">
                                                        <input type="time" class="form-control col-sm-5" name="jam">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 col-form-label">Type</label>
                                                <div class="col-sm-12">
                                                    <select class="form-control" name="type_meeting">
                                                        <option value="online">Online</option>
                                                        <option value="offline">Offline</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 col-form-label">Alamat</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" name="alamat">
                                                </div>
                                            </div>
                                        @endif
                                        @if(count($next_step) != 0)
                                        <div class="form-group">
                                            <label class="col-sm-12 col-form-label">Lanjutkan Untuk</label>
                                            <div class="col-sm-12">
                                                <select class="form-control" name="aksi" id="aksi_option">
                                                    @foreach($next_step ?? [] as $next)
                                                        <option value="{{ $next->id }}">{{ $next->name_before }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-12 col-form-label" id="string-kepada">Kepada</label>
                                            <div class="col-sm-12">
                                                <select class="form-control" name="ke" id="select_kepada">
                                                    @foreach(($next_user ?? []) as $user)
                                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        @endif

                                        <div class="form-group">
                                            <label class="col-sm-3 col-form-label">Keterangan</label>
                                            <div class="col-sm-12">
                                                <textarea class="form-control" rows="8" id="comment" name="note"></textarea>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 col-form-label">Lampiran</label>
                                            <div class="col-sm-12">
                                                <div class="needsclick dropzone" id="document-dropzone">

                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Kirim</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <div class="col-xl-4 col-lg-12" style="height: max-content;">
            <div class="card">
                <div class="card-header border-0 pb-0">
                    <h4 class="card-title">Riwayat Proses</h4>
                </div>
                <div class="card-body ">
                    <div id="DZ_W_TimeLine" class="widget-timeline dz-scroll">
                        <ul class="timeline">
                            @if($consultation->ConsultationResponse)
                            @forelse($consultation->ConsultationResponse->Action->reverse() ?? [] as $histor)
                            <li data-toggle="modal" data-target=".modal-history{{$histor->id}}">
                                <div class="timeline-badge primary"></div>
                                <a class="timeline-panel text-muted" href="#">
                                    <span>{{  date('d-M-Y h:i', strtotime($histor->created_at)) }}</span>
                                    <h6>{{ $histor->ActionStep->name }} </h6>
                                    <span class="mb-0">oleh</span>
                                    <strong class="text-primary">{{ $histor['dataBy']->name}}</strong>
                                </a>
                            </li>
                            @empty
                                Belum ada data
                            @endforelse
                            @else
                            Belum ada data
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- modal riwayat proses -->
@if($consultation->ConsultationResponse)
@forelse($consultation->ConsultationResponse->Action->reverse() ?? [] as $index => $histor)
<div class="modal fade bd-example-modal-lg modal-history{{$histor->id}}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">History </h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="card">
                    <div class="card-body">
                        <div class="basic-form">
                            <form>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Proses</label>
                                    <div class="col-sm-9">
                                        <input type="text" readonly class="form-control" value="{{ $histor->ActionStep->name ?? '-' }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Oleh</label>
                                    <div class="col-sm-9">
                                        <input type="text" readonly class="form-control" value="{{ $histor['dataBy']->name ?? "-" }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Kepada</label>
                                    <div class="col-sm-9">
                                        <input type="text" readonly class="form-control" value="{{ $histor['dataTo']->name  ?? "-"}}">
                                    </div>
                                </div>
                                <!-- <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Untuk Melakukan</label>
                                    <div class="col-sm-9">
                                        <input type="text" readonly class="form-control" value="{{ $histor->ActionStep->name  ?? "-"}}">
                                    </div>
                                </div> -->

                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Keterangan</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" readonly rows="4" id="comment"> {{ $histor->note ?? "Tidak Ada Catatan" }} </textarea>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Lampiran</label>
                                    <div class="col-sm-9">
                                        @forelse ($all_documents[$index] as $document)
                                            <a href="{{ asset('/uploads/'.$document->name) }}" target="_blank">{{ $document->name }}</a> <br>
                                        @empty
                                            Tidak ada lampiran
                                        @endforelse
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@empty
    Belum ada data
@endforelse
@else
Belum ada data
@endif

@endsection

@section('js')
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
<script src="{{asset('vendor/jqueryui/js/jquery-ui.min.js')}}"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ajax-bootstrap-select/1.4.5/js/ajax-bootstrap-select.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
<script>
    Dropzone.options.documentDropzone = {
        url: '{{ route('projects.storeMedia') }}',
        maxFilesize: 2, // MB
        addRemoveLinks: true,
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}",
            'response_id' : "{{ $consultation->ConsultationResponse->id ?? null }}",
            'request_id' : "{{ $consultation->id }}",
        },

        success: function (file, response) {
            $('form').append('<input type="hidden" name="document[]" value="' + response.document.id + '">')
            uploadedDocumentMap[file.name] = response.document.id
            uploadedDocumentName[file.name] = response.name
            documentId.push(response.document.id);
        },
        removedfile: function (file) {
            file.previewElement.remove()
            var name = ''
            var id = ''
            if (typeof file.file_name !== 'undefined') {
                name = file.file_name
            } else {
                id = uploadedDocumentMap[file.name];
                name = uploadedDocumentName[file.name];
            }
            
            $('form').find('input[name="document[]"][value="' + id + '"]').remove();

            $.ajax({
                url: '{{ route('projects.removeMedia') }}',
                type: "POST",
                data: { 'name': file.name},
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}",
                    'id' : id,
                    'name' : name,
                },
            });

        },
        init: function () {
            @if(isset($project) && $project->document)
                var files = {!! json_encode($project->document) !!}
                for (var i in files) {
                    var file = files[i]
                    this.options.addedfile.call(this, file)
                    file.previewElement.classList.add('dz-complete')
                    $('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
                    console.log("file name init for " + file);
                }
            @endif
        }
    }
</script>
<script>
    $(document).ready(function(){
        var uploadedDocumentMap = {}
        var uploadedDocumentName = {}
        var documentId = [];

        const user = @json(Auth::user());
        var $kepada = $('#select_kepada');
        var $string_kepada = $('#string-kepada');
        var next_step = {!! json_encode($next_step ? $next_step->toArray() : []) !!};
        var next_user = {!! json_encode($next_user ? $next_user->toArray() : []) !!};
        var current_step = {!! json_encode($consultation->ConsultationResponse->ActionStep ?? $currentStep) !!};

        $('#next_input').val(next_step[0]['id']);
        $('#role_input').val(next_step[0]['role']);
        $('#current_input').val(current_step.type[0])

        $kepada.empty();
        if(next_step[0]['role'] == user.role){
            $kepada.append($("<option></option>")
            .attr("value", user.id ).text(user.name));
        } else{
            next_user.forEach((user) => {
                if(next_step[0]['role'] == user.role){
                    $kepada.append($("<option></option>")
                    .attr("value", user.id ).text(user.name));
                }
            })
        }
        $('#select_kepada').selectpicker('refresh');
        // $('.ui-selectmenu-text').css('display', 'none');

        $('#aksi_option').on('change', function() {
            $kepada.empty();
            var index =  $('#aksi_option').prop('selectedIndex');
            $('#next_input').val(next_step[index]['id']);
            $('#role_input').val(next_step[index]['role']);
            $('#current_input').val(current_step.type[index])

            if(next_step[index]['role'] == user.role){
                $kepada.append($("<option></option>")
                .attr("value", user.id ).text(user.name));
            } else {
                next_user.forEach((user) => {
                    if(next_step[index]['role'] == user.role){
                        $kepada.append($("<option></option>")
                        .attr("value", user.id ).text(user.name));
                        $kepada.css('display', 'inline');
                        $string_kepada.css('display', 'inline');
                    }
                })
            }

            $('#select_kepada').selectpicker('refresh');
        });
    })
</script>
@endsection