@extends('layout.app')
@section('content')
    @php
        $isEdit = (bool)$template->id;
        $params = old('params') ?: ($isEdit ? $template->params->map(function ($p) {
            return [
                'param'       => $p->param,
                'source'      => $p->source,
                'max_length'  => $p->max_length,
                'is_required' => $p->is_required,
            ];
        })->toArray() : []);
    @endphp
    <div class="col-md-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $title }}</h3>
            </div>
            {!! Form::open([
                'url'    => $isEdit ? route('zns-templates.update', $template->id) : route('zns-templates.store'),
                'method' => $isEdit ? 'put' : 'post',
                'id'     => 'zns-form',
            ]) !!}
            <div class="card-body">
                @if($errors->any())
                    <div class="alert alert-danger">
                        @foreach($errors->all() as $error)
                            <div>{{ $error }}</div>
                        @endforeach
                    </div>
                @endif
                <div class="row">
                    <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                            {!! Form::label('name', 'Tên mẫu tin', ['class' => 'control-label required']) !!}
                            {!! Form::text('name', old('name', $template->name), ['class' => 'form-control', 'placeholder' => 'VD: Nhắc lịch hẹn']) !!}
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                            {!! Form::label('event', 'Sự kiện bắn tin', ['class' => 'control-label required']) !!}
                            {!! Form::select('event', $events, old('event', $template->event), ['class' => 'form-control', 'id' => 'zns-event']) !!}
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12">
                        <div class="form-group">
                            {!! Form::label('template_id', 'Template ID (ZNS)', ['class' => 'control-label required']) !!}
                            {!! Form::text('template_id', old('template_id', $template->template_id), ['class' => 'form-control']) !!}
                        </div>
                    </div>
                    <div class="col-md-1 col-xs-12">
                        <div class="form-group">
                            {!! Form::label('status', 'Bật', ['class' => 'control-label']) !!}
                            <br>
                            <input type="checkbox" name="status" value="1"
                                   {{ old('status', $template->status) == \App\Constants\StatusCode::ON ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="form-group">
                            {!! Form::label('note', 'Ghi chú', ['class' => 'control-label']) !!}
                            {!! Form::text('note', old('note', $template->note), ['class' => 'form-control']) !!}
                        </div>
                    </div>
                </div>

                <hr>
                <h4>Cấu trúc tham số (TempData)</h4>
                <p class="text-muted">
                    Khai báo đúng tên params đã đăng ký với Zalo OA, rồi chọn nguồn dữ liệu tương ứng trong hệ thống.
                    Khi gửi tin, hệ thống tự lấy giá trị theo nguồn đã chọn. Để trống nguồn nếu chưa cần dùng param đó.
                </p>
                <div class="table-responsive">
                    <table class="table table-bordered" id="zns-params">
                        <thead class="bg-info text-white">
                        <tr>
                            <th style="width: 25%">Tên params <span class="text-danger">*</span></th>
                            <th style="width: 35%">Nguồn dữ liệu</th>
                            <th style="width: 15%">Độ dài tối đa</th>
                            <th style="width: 10%">Bắt buộc</th>
                            <th style="width: 60px"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($params as $i => $param)
                            <tr>
                                <td>
                                    <input type="text" class="form-control" name="params[{{ $i }}][param]"
                                           value="{{ $param['param'] ?? '' }}" placeholder="VD: ten_KH">
                                </td>
                                <td>
                                    <select class="form-control zns-source" name="params[{{ $i }}][source]">
                                        <option value="">-- Không gán (để trống) --</option>
                                        @foreach($variables as $group => $items)
                                            <optgroup label="{{ $group }}">
                                                @foreach($items as $key => $label)
                                                    <option value="{{ $key }}" {{ ($param['source'] ?? '') == $key ? 'selected' : '' }}>
                                                        {{ $label }}
                                                    </option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="number" min="1" class="form-control" name="params[{{ $i }}][max_length]"
                                           value="{{ $param['max_length'] ?? '' }}" placeholder="VD: 30">
                                </td>
                                <td class="text-center">
                                    <input type="checkbox" name="params[{{ $i }}][is_required]" value="1"
                                           {{ !empty($param['is_required']) ? 'checked' : '' }}>
                                </td>
                                <td class="text-center">
                                    <a href="javascript:void(0)" class="btn btn-sm btn-danger remove-param">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <button type="button" class="btn btn-default" id="add-param">
                    <i class="fa fa-plus"></i> Thêm tham số
                </button>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Lưu lại</button>
                <a href="{{ route('zns-templates.index') }}" class="btn btn-default">Quay lại</a>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
@endsection
@section('_script')
    <script>
        var znsVariables = {!! json_encode($allVariables) !!};
        var znsParamIndex = {{ count($params) }};

        function buildSourceSelect(event, name, selected) {
            var groups = znsVariables[event] || {};
            var html = '<select class="form-control zns-source" name="' + name + '">';
            html += '<option value="">-- Không gán (để trống) --</option>';
            $.each(groups, function (group, items) {
                html += '<optgroup label="' + group + '">';
                $.each(items, function (key, label) {
                    html += '<option value="' + key + '"' + (key === selected ? ' selected' : '') + '>' + label + '</option>';
                });
                html += '</optgroup>';
            });
            return html + '</select>';
        }

        $('#add-param').on('click', function () {
            var i = znsParamIndex++;
            var event = $('#zns-event').val();
            var row = '<tr>' +
                '<td><input type="text" class="form-control" name="params[' + i + '][param]" placeholder="VD: ten_KH"></td>' +
                '<td>' + buildSourceSelect(event, 'params[' + i + '][source]', '') + '</td>' +
                '<td><input type="number" min="1" class="form-control" name="params[' + i + '][max_length]" placeholder="VD: 30"></td>' +
                '<td class="text-center"><input type="checkbox" name="params[' + i + '][is_required]" value="1"></td>' +
                '<td class="text-center"><a href="javascript:void(0)" class="btn btn-sm btn-danger remove-param"><i class="fa fa-trash"></i></a></td>' +
                '</tr>';
            $('#zns-params tbody').append(row);
        });

        $(document).on('click', '.remove-param', function () {
            $(this).closest('tr').remove();
        });

        // Đổi sự kiện thì dựng lại dropdown nguồn dữ liệu, cố gắng giữ lựa chọn cũ nếu biến vẫn tồn tại
        $('#zns-event').on('change', function () {
            var event = $(this).val();
            $('#zns-params tbody .zns-source').each(function () {
                var name = $(this).attr('name');
                var selected = $(this).val();
                $(this).replaceWith(buildSourceSelect(event, name, selected));
            });
        });
    </script>
@endsection