@extends('layout.app')
@section('content')
    <div class="col-md-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $title }}</h3></br>
                <div class="col">
                    <a class="right btn btn-primary btn-flat" href="{{ route('zns-templates.create') }}">
                        <i class="fa fa-plus-circle"></i> Tạo mới
                    </a>
                    <a class="right btn btn-success btn-flat" href="{{ route('zns-templates.test') }}">
                        <i class="fa fa-paper-plane"></i> Gửi thử
                    </a>
                    <a class="right btn btn-default btn-flat" href="{{ route('settings.indexAdmin') }}">
                        <i class="fa fa-cog"></i> Cài đặt nhà cung cấp ZNS
                    </a>
                </div>
            </div>
            @if(session('success'))
                <div class="alert alert-success mx-3">{{ session('success') }}</div>
            @endif
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="bg-info text-white">
                    <tr>
                        <th style="width: 50px">#</th>
                        <th>Tên mẫu tin</th>
                        <th>Sự kiện</th>
                        <th>Template ID</th>
                        <th>Tham số (param → nguồn dữ liệu)</th>
                        <th style="width: 90px">Trạng thái</th>
                        <th style="width: 110px">Thao tác</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($templates as $key => $template)
                        <tr data-id="{{ $template->id }}">
                            <td>{{ $key + 1 }}</td>
                            <td>
                                <a href="{{ route('zns-templates.edit', $template->id) }}">{{ $template->name }}</a>
                                @if($template->note)
                                    <div class="text-muted small">{{ $template->note }}</div>
                                @endif
                            </td>
                            <td>{{ $template->event_label }}</td>
                            <td>{{ $template->template_id }}</td>
                            <td>
                                @forelse($template->params as $param)
                                    <div>
                                        <code>{{ $param->param }}</code>
                                        @if($param->source)
                                            → {{ $param->source }}
                                        @else
                                            <span class="text-muted">→ (để trống)</span>
                                        @endif
                                        @if($param->max_length)
                                            <span class="text-muted small">· tối đa {{ $param->max_length }} ký tự</span>
                                        @endif
                                        @if($param->is_required)
                                            <span class="text-danger">*</span>
                                        @endif
                                    </div>
                                @empty
                                    <span class="text-muted">Chưa định nghĩa tham số</span>
                                @endforelse
                            </td>
                            <td>
                                <input type="checkbox" class="toggle-status" data-id="{{ $template->id }}"
                                       {{ $template->status == \App\Constants\StatusCode::ON ? 'checked' : '' }}>
                            </td>
                            <td>
                                <a class="btn btn-sm btn-info" href="{{ route('zns-templates.edit', $template->id) }}">
                                    <i class="fa fa-edit"></i>
                                </a>
                                <a class="btn btn-sm btn-danger delete-zns" href="javascript:void(0)"
                                   data-id="{{ $template->id }}"><i class="fa fa-trash"></i></a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">Chưa có mẫu tin ZNS nào</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('_script')
    <script>
        $(document).on('change', '.toggle-status', function () {
            $.ajax({
                url: '{{ url('zns-templates') }}/' + $(this).data('id') + '/status',
                method: 'post',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: $(this).is(':checked') ? 1 : 0
                }
            });
        });
        $(document).on('click', '.delete-zns', function () {
            if (!confirm('Bạn có chắc muốn xóa mẫu tin này?')) {
                return;
            }
            var id = $(this).data('id');
            $.ajax({
                url: '{{ url('zns-templates') }}/' + id,
                method: 'post',
                data: {_token: '{{ csrf_token() }}', _method: 'DELETE'}
            }).done(function () {
                location.reload();
            });
        });
    </script>
@endsection