@extends('layouts.app')
@section('content')
<div class="" role="document">
    <div class="modal-content" id="print_form_data">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
                {{ucFirst($form_data->form->name)}} 
                @if(!empty($form_data->submittedBy))
                    <small>
                        (
                            <b>@lang('messages.submitted_by'): </b> 
                            {{$form_data->submittedBy->name}}
                        )
                    </small>
                @endif
            </h5>
            <button type="button" class="ml-auto btn btn-info no-print btn-sm formDataPrintBtn">
                <i class="fas fa-print"></i>
                @lang('messages.print')
            </button>
            <button type="button" class="close ml-0 no-print" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="row mb-2">
                <div class="col-md-6">
                    @if(isset($form_data->form->schema['settings']['form_submision_ref']['is_enabled']) && $form_data->form->schema['settings']['form_submision_ref']['is_enabled'] && !empty($form_data->submission_ref))
                      <b>@lang('messages.submission_numbering'):</b> 
                      {{$form_data->submission_ref}}
                    @endif
                </div>
            </div>
            <table class="table table-striped">
                <thead class="thead-dark">
                    <tr>
                        <th>@lang('messages.field')</th>
                        <th>@lang('messages.value')</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($form_data->form->schema['form'] as $element)
                        @isset($form_data->data[$element['name']])
                        <tr>
                            <td>
                                <strong>{{$element['label']}}</strong>
                            </td>
                            <td>
                                @if($element['type'] == 'file_upload')

                                    @include('form_data.file_view', ['form_upload' => $form_data->data[$element['name']]])
                                @elseif($element['type'] == 'signature')
                                    @if(!empty($form_data->data[$element['name']]))
                                        <a target="_blank" href="{{$form_data->data[$element['name']]}}"
                                            download="Signature">
                                            <img src="{{$form_data->data[$element['name']]}}" class="signature">
                                        </a>
                                    @endif
                                @elseif($element['type'] == 'table')
                                    <table>
                                        <tr>
                                            <td></td>
                                            @foreach(explode("\n",$element['columns']) as $col_name)
                                                <td>{{$col_name}}</td>
                                            @endforeach
                                        </tr>
                                        @php
                                            $table_rows = explode("\n",$element['rows']);
                                        @endphp
                                        @foreach($form_data->data[$element['name']] as $key1 => $table_row)
                                        <tr>
                                            <td>{{$table_rows[$key1]}}</td>
                                            @foreach($table_row as $table_row_column)
                                                <td>{{$table_row_column}}</td>
                                            @endforeach
                                        </tr>
                                        @endforeach
                                    </table>
                                @elseif(is_array($form_data->data[$element['name']]) && $element['type'] != 'file_upload')

                                    {{implode(', ', $form_data->data[$element['name']])}}
                                @elseif(in_array($element['type'], array('dropdown','checkbox','radio') ))
                                    {!! nl2br(str_replace('_',' ',$form_data->data[$element['name']])) !!}
                                @else
                                    {!! nl2br($form_data->data[$element['name']]) !!}
                                @endif
                            </td>
                        </tr>
                        @endisset
                    @endforeach
                </tbody>
            </table>
            <div class="no-print mt-4">
                <hr>
                <form id="add_comment_form" action="{{action('FormDataCommentController@store')}}" method="POST">
                    {{ csrf_field() }}
                    <!-- hiden fields -->
                    <input type="hidden" name="form_data_id" id="form_data_id" value="{{$form_data->id}}">
                    <div class="form-group">
                        <label for="comment">
                            @lang('messages.comment'):
                        </label>
                        <textarea class="form-control" name="comment" id="comment" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="score">
                            @lang('messages.score'):
                        </label>
                        <input type="number" class="form-control" name="score" id="score" >
                    </div>
                    <button type="submit" class="btn btn-success add_comment_btn">
                        @lang('messages.add_comment')
                    </button>
                </form>
                <div class="row mt-5">
                    <div class="col-md-12">
                        <h5>
                            <i class="fas fa-comments"></i>
                            @lang('messages.comments')
                        </h5>
                        <div class="direct-chat-messages" style="max-height: 500px;height: auto;">
                            @includeIf('form_data.partials.comment', ['comments' => $form_data->comments])
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer no-print">
            <button type="button" class="float-right m-1 btn btn-secondary btn-sm" data-dismiss="modal">
                @lang('messages.close')
            </button>
            <button type="button" class="float-right m-1 btn btn-info btn-sm formDataPrintBtn">
                <i class="fas fa-print"></i>
                @lang('messages.print')
            </button>
            <a class="btn float-right btn-primary btn-sm m-1" target="_blank" href="{{action('FormDataController@downloadPdf', [$form_data->id])}}">
                <i class="far fa-file-pdf" aria-hidden="true"></i>
                @lang('messages.download_pdf')
            </a>
        </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
    $(document).ready(function(){
        $('#submitted_data_table').DataTable({
        scrollY:        "600px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        fixedColumns:   {
            leftColumns: 2
        }
    });
        // view form data
        $(document).on('click', '.view_form_data', function(){
            var url = $(this).data("href");
            $.ajax({
                method: "GET",
                dataType: "html",
                url: url,
                success: function(result){
                    $("#modal_div").html(result).modal("show");
                }
            });
        });

        //delete form data
        $(document).on('click', '.delete_form_data', function(){
            var url = $(this).data("href");
            var result = confirm('Are You Sure?');
            if (result == true) {
                $.ajax({
                    method: "DELETE",
                    url: url,
                    dataType: "json",
                    success: function(result){
                        if(result.success == true){
                            toastr.success(result.msg);
                            setTimeout(function(){
                                location.reload();
                            }, 1000);
                        } else {    
                            toastr.error(result.msg);
                        }
                    }
                });
            }
        });

        //print form data on btn click
        $(document).on('click', '.formDataPrintBtn', function() {
            printElement(document.getElementById("print_form_data"));    
        });

        $("#modal_div").on('shown.bs.modal', function () {
            if ($("form#add_comment_form").length) {
                $("form#add_comment_form").validate();
            }
        });

        $(document).on('submit', 'form#add_comment_form', function (e) {
            e.preventDefault();
            var data = $("form#add_comment_form").serialize();
            var url = $("form#add_comment_form").attr('action');
            var ladda = Ladda.create(document.querySelector('.add_comment_btn'));
            ladda.start();
            $.ajax({
                method: "POST",
                url: url,
                dataType: "json",
                data: data,
                success: function (response) {
                    ladda.stop();
                    if (response.success) {
                        $("#comment").val('');
                        $('.direct-chat-messages').prepend(response.comment);
                        toastr.success(response.msg);
                    } else {
                        toastr.error(response.msg);
                    }
                }
            });
        });

        $(document).on('click', '.delete-comment', function(e) {
            e.preventDefault();
            var element = $(this);
            var comment_id = $(this).data('comment_id');
            var form_data_id = $(this).data('form_data_id');
            if (confirm('Are you sure.?')) {
                $.ajax({
                    method:'DELETE',
                    dataType: 'json',
                    url: '/form-data-comment/'+comment_id+'?form_data_id='+form_data_id,
                    success: function(response){
                        if (response.success) {
                            toastr.success(response.msg);
                            element.closest('.direct-chat-msg').remove();
                        } else {
                            toastr.error(response.msg);
                        }
                    }
                });
            }
        });
    });
</script>
@endsection