@extends ('layouts/template')
@section('content')

<div class="mcp-theme-1 body-height d-flex flex-column" id="stat-tree-line-report-edit-{{$statTreeLine->uid}}">
    <div class="d-flex align-items-baseline p-3 border-bottom">
        <h5 class="m-0 font-size-16">{{$statTreeLine->title}}</h5>
        <div moe wide class="ml-3">
            <a href="#" start show class="">Edit Title</a>
            <form url="{{ route("practice-management.api.statTreeLineReport.updateTitle") }}">
                @csrf
                <input type="hidden" name="uid" value="{{$statTreeLine->uid}}">
                <div class="mb-2">
                    <label class="mb-1 text-secondary text-sm">Report Title *</label>
                    <input type="text" name="title" class="form-control form-control-sm" required value="{{$statTreeLine->title}}">
                </div>
                <div class="d-flex align-items-center">
                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                </div>
            </form>
        </div>
        <a native class="ml-3 btn btn-sm btn-info text-white font-weight-bold" href="{{route('practice-management.statTreeLineReports.view', ['statTreeLine' => $statTreeLine])}}"
           open-in-stag-popup
           popup-style="medium"
           title="View Data"
        >View Data</a>
    </div>
    <div class="row mx-0 flex-grow-1">
        <div class="col-6 px-0 border-right">
            <div class="p-3 border-bottom">
                <div class="d-flex align-items-baseline">
                    <span class="font-weight-bold text-secondary">Model</span>
                    <div moe wide class="ml-3">
                        <a href="#" start show class="">Edit</a>
                        <form url="{{ route("practice-management.api.statTreeLineReport.updateModel") }}">
                            @csrf
                            <input type="hidden" name="uid" value="{{$statTreeLine->uid}}">
                            <div class="mb-2">
                                <label class="mb-1 text-secondary text-sm">Report Model *</label>
                                <input type="text" name="model" class="form-control form-control-sm" required value="{{$statTreeLine->model}}">
                            </div>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                                <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="mt-2 text-info font-weight-bold border p-2">{{$statTreeLine->model}}</div>
            </div>
            <div class="p-3">
                <div class="d-flex align-items-baseline">
                    <span class="font-weight-bold text-secondary mr-3">Clauses</span>
                    <div moe>
                        <a start show href="#">Add Existing</a>
                        <form url="{{ route("practice-management.api.statTreeLineReport.addExistingClause") }}">
                            @csrf
                            <input type="hidden" name="uid" value="{{$statTreeLine->uid}}">
                            <div class="mb-2">
                                <label class="mb-1 text-secondary text-sm">Clause *</label>
                                <select name="clauseUid" class="form-control form-control-sm" required>
                                    <option value="">-- select --</option>
                                    @foreach($allClauses as $clause)
                                        <option value="{{$clause->uid}}">{{$clause->label}} ({{$clause->model}})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                                <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                            </div>
                        </form>
                    </div>
                    <span class="mx-2 text-sm text-secondary">|</span>
                    <div moe wide>
                        <a href="#" start show>Add New</a>
                        <form url="{{ route("practice-management.api.statTreeLineReport.addNewClause") }}" class="frm-clause-add-edit">
                            @csrf
                            <input type="hidden" name="uid" value="{{$statTreeLine->uid}}">
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Model</label>
                                <input type="text" class="form-control form-control-sm" name="model" readonly value="{{$statTreeLine->model}}">
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Question</label>
                                <input type="text" class="form-control form-control-sm" name="question" autofocus>
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Answer</label>
                                <input type="text" class="form-control form-control-sm" name="answer">
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Label</label>
                                <input type="text" class="form-control form-control-sm" name="label" readonly>
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Clause Text *</label>
                                <textarea type="text" class="form-control form-control-sm" required name="clauseText"></textarea>
                            </div>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
                                <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                @if(count($statTreeLine->lineClauses))
                    <table class="table table-sm table-bordered mt-2">
                    @foreach($statTreeLine->lineClauses as $lineClause)
                        <tr>
                            <td class="text-nowrap text-info font-weight-bold">{{$lineClause->clause_label}}</td>
                            <td class="text-monospace">{{$lineClause->clause->clause_text}}</td>
                            <td class="width-100px">
                                <div moe>
                                    <a start show href="#" class="text-danger">Remove</a>
                                    <form url="{{ route("practice-management.api.statTreeLineReport.removeClause") }}">
                                        @csrf
                                        <input type="hidden" name="uid" value="{{$lineClause->uid}}">
                                        <p class="mb-2 text-nowrap">Are you sure?</p>
                                        <div class="d-flex align-items-center">
                                            <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </table>
                @endif
            </div>
        </div>
        <div class="col-6 px-0">
            <div class="p-3">
                <div class="d-flex align-items-baseline">
                    <span class="font-weight-bold text-secondary mr-3">Report columns</span>
                    <div moe wide>
                        <a href="#" start show>Add New</a>
                        <form url="{{ route("practice-management.api.statTreeLineReport.addReportColumn") }}">
                            @csrf
                            <input type="hidden" name="uid" value="{{$statTreeLine->uid}}">
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Label *</label>
                                <input type="text" class="form-control form-control-sm" name="label" required>
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Column *</label>
                                <input type="text" class="form-control form-control-sm" name="column" required>
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary text-sm mb-1">Field Type *</label>
                                <select class="form-control form-control-sm" name="fieldType" required>
                                    <option value="">-- select --</option>
                                    <option value="numeric">Number</option>
                                    <option value="date">Date</option>
                                    <option value="text">String</option>
                                    <option value="bool">Boolean</option>
                                </select>
                            </div>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
                                <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                @if(count($statTreeLine->reportColumns))
                    <table class="table table-sm table-bordered mt-2 table-columns">
                        @foreach($statTreeLine->reportColumns as $reportColumn)
                            <tr data-uid="{{$reportColumn->uid}}">
                                <td class="width-30px text-right">{{$reportColumn->position_index}}</td>
                                <td class="text-nowrap text-info font-weight-bold">
                                    {{$reportColumn->label}}
                                    @if($reportColumn->record_route_name)
                                        <i class="fa fa-external-link-alt text-secondary text-sm ml-1" title="{{$reportColumn->record_route_name}}"></i>
                                    @endif
                                </td>
                                <td class="text-monospace">{{$reportColumn->display_key}}</td>
                                <td class="text-monospace">{{$reportColumn->field_type}}</td>
                                <td class="width-100px text-nowrap">
                                    <div class="d-flex align-items-baseline">
                                        <div moe wide relative>
                                            <a start show href="#">Edit</a>
                                            <form url="{{ route("practice-management.api.statTreeLineReport.updateReportColumn") }}" right>
                                                @csrf
                                                <input type="hidden" name="uid" value="{{$reportColumn->uid}}">
                                                <div class="mb-2">
                                                    <label class="text-secondary text-sm mb-1">Label *</label>
                                                    <input type="text" class="form-control form-control-sm" name="label" value="{{$reportColumn->label}}" required>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="text-secondary text-sm mb-1">Column *</label>
                                                    <input type="text" class="form-control form-control-sm" name="column" value="{{$reportColumn->display_key}}" required>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="text-secondary text-sm mb-1">Field Type *</label>
                                                    <select class="form-control form-control-sm" name="fieldType" required>
                                                        <option value="">-- select --</option>
                                                        <option {{$reportColumn->field_type === 'numeric' ? 'selected' : ''}} value="numeric">Number</option>
                                                        <option {{$reportColumn->field_type === 'date' ? 'selected' : ''}} value="date">Date</option>
                                                        <option {{$reportColumn->field_type === 'text' ? 'selected' : ''}} value="text">String</option>
                                                        <option {{$reportColumn->field_type === 'bool' ? 'selected' : ''}} value="bool">Boolean</option>
                                                    </select>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="text-secondary text-sm mb-1">URL</label>
                                                    <input type="text" class="form-control form-control-sm" name="route" value="{{$reportColumn->record_route_name}}" required>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                        <div moe relative class="ml-2 mr-2">
                                            <a start show href="#" class="text-danger">Remove</a>
                                            <form url="{{ route("practice-management.api.statTreeLineReport.removeReportColumn") }}" right>
                                                @csrf
                                                <input type="hidden" name="uid" value="{{$reportColumn->uid}}">
                                                <p class="mb-2 text-nowrap">Are you sure?</p>
                                                <div class="d-flex align-items-center">
                                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                        <a href="#" class="move-up mr-2"><i class="fa fa-arrow-up"></i></a>
                                        <a href="#" class="move-down mr-2"><i class="fa fa-arrow-down"></i></a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                @endif
            </div>
        </div>
    </div>
</div>
<script>
    (function() {
        function saveColumnOrder() {
            let uids = [];
            $('.table-columns tr').each(function() {
                uids.push($(this).attr('data-uid'));
            });
            if(uids.length > 1) {
                showMask();
                $.post('{{route("practice-management.api.statTreeLineReport.reorderReportColumns")}}', {
                    _token: '{{csrf_token()}}',
                    uids: JSON.stringify(uids)
                }, _data => {
                    if(!hasResponseError(_data)) {
                        fastReload();
                    }
                }, 'json').then(hideMask());
            }
        }
        function init() {
            $(document)
                .off('input change paste', '.frm-clause-add-edit input[name="question"], .frm-clause-add-edit input[name="answer"]')
                .on('input change paste', '.frm-clause-add-edit input[name="question"], .frm-clause-add-edit input[name="answer"]', function() {
                    let form = $(this).closest('.frm-clause-add-edit');
                    let label = $.trim(form.find('input[name="question"]').val()) + ' ' +
                        $.trim(form.find('input[name="answer"]').val());
                    form.find('input[name="label"]').val(label);
                });
            $(document)
                .off('click.move-up', '.table-columns .move-up')
                .on('click.move-up', '.table-columns .move-up', function() {
                    let tr = $(this).closest('tr');
                    tr.insertBefore(tr.prev());
                    saveColumnOrder();
                    return false;
                });
            $(document)
                .off('click.move-down', '.table-columns .move-down')
                .on('click.move-down', '.table-columns .move-down', function() {
                    let uids = [];
                    let tr = $(this).closest('tr');
                    tr.insertAfter(tr.next());
                    saveColumnOrder();
                    return false;
                });
        }
        addMCInitializer('stat-tree-line-report-edit-{{$statTreeLine->uid}}', init, '#stat-tree-line-report-edit-{{$statTreeLine->uid}}');
    }).call(window);
</script>
@endsection