@extends('adminlte::page')

@section('title', 'サポートパック検査内容編集')

@section('content_header')
    <h5><label class="title-underbar">サポートパック検査内容編集</label></h5>
@stop

@section('content')
<x-admin.error-flush-message />
<x-admin.validation-message />
<div class="row">
    <div class="col-md-12">
        <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
            <div class="card-body" style="margin-left: 30px;">
                <form method="POST" action="{{ route('smartsupport.admin.supportPackSurvey.questionUpdate', ['id' => $survey->id, 'question_id' => $question->id]) }}" class="form-group mt-3">
                    @csrf
                    <div class="form-group row">
                        <label for="question" class="col-sm-2 col-form-label medium-heading">質問</label>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:0px">
                            <input type="text" id="question" name="question" class="form-control main-text" placeholder="設問を入力してください" value="{{ old('question') ?? $question->question}}" style="width:90%" required />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="detail" class="col-sm-2 col-form-label medium-heading">説明</label>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:0px">
                            <input type="text" id="detail" name="detail" class="form-control main-text" placeholder="補足説明を入力してください" value="{{ old('detail') ?? $question->detail}}" style="width:90%" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="type" class="col-sm-2 col-form-label medium-heading">回答タイプ</label>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:10px">
                            @foreach($type_list as $type)
                                <input class="form-check-input" type="radio" name="type" id="type_{{$type}}" value="{{$type}}" 
                                @if (old('type') && old('type') == $type) checked="checked" 
                                @elseif ($question->type == $type) checked="checked" 
                                @endif/>{{$type}}　　
                            @endforeach
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="required" class="col-sm-2 col-form-label medium-heading">項目必須</label>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:10px">
                            <input type="checkbox" name="required" class="form-check-input" id="required" value="1"
                                {{ old('required') ? 'checked': ($question->required ? 'checked': '') }}>
                        </div>
                    </div>
                    <div class="form-group row" id="selection" 
                        @if (old('type') && old('type') != 'radio' && old('type') != 'checkbox') style="display:none;"
                        @elseif ($question->type != 'radio' && $question->type != 'checkbox') style="display:none;"
                        @endif>
                        <label for="choices" class="col-sm-2 col-form-label medium-heading">選択肢</label>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:0px">
                            <input type="text" id="choices" name="choices" class="form-control main-text" placeholder="選択肢を入力してください（カンマ区切り）" value="{{ old('choices') ?? $question->choices}}" style="width:90%" />
                        </div>
                    </div>
                    @if ($pages->count() > 0)
                        <div class="form-group row">
                            <label for="page" class="col-sm-2 col-form-label medium-heading">表示</label>
                            <div class="col-sm-2 col-md-2 col-lg-2">
                                <label for="page" class="medium-heading col-form-lable">ページ</label>
                            </div>
                            @php
                                $pageNum = old('page') ? old('page') : $question->page;
                            @endphp
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <select id="page" name="page" class="form-control">
                                    @foreach ($pages as $page)
                                        <option
                                            value="{{ $page->page }}"
                                            @if ($pageNum == $page->page)
                                            selected
                                            @endif
                                        >
                                        {{ $page->title ? $page->title : '（無名のページ）' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-2 col-form-label medium-heading"></div>
                            <div class="col-sm-2 col-md-2 col-lg-2">
                                <label for="orders" class="medium-heading col-form-lable">順番</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <input type="number" id="orders" name="orders" class="form-control main-text" value="{{ old('orders') ?? $question->orders }}" min="1" max="1000">
                            </div>
                        </div>
                    @else
                        <div class="form-group row">
                            <label for="page" class="col-sm-2 col-form-label medium-heading">表示</label>
                            <div class="row">
                                <div class="col-sm-6 col-md-6 col-lg-6">
                                    ページ
                                    <input type="number" name="page" class="form-control main-text" value="{{ old('page') ?? $question->page }}" min="1" max="20">
                                </div>
                                <div class="col-sm-6 col-md-6 col-lg-6">
                                    順番
                                    <input type="number" name="orders" class="form-control main-text" value="{{ old('orders') ?? $question->orders }}" min="1" max="1000">
                                </div>
                            </div>
                        </div>
                    @endif
                    <a href="{{ route('smartsupport.admin.supportPackSurvey.questions', ['id' => $survey->id]) }}" class="btn btn-secondary btn-lg rounded-pill">キャンセル</a>
                    @if(Gate::forUser(\Auth::user())->allows('employeeOperation', 'maintenance|2'))
                    <button type="submit" class="btn button-go btn-lg rounded-pill">保存する</button>
                    @endif
                </form>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<style>
#search {
    width:90%;
}
.items-collection{
    margin:20px 0 0 0;
}
.items-collection label.btn-default.active{
    background-color:#007ba7;
    color:#FFF;
}
.items-collection label.btn-default{
    width:90%;
    border:1px solid #305891;
    margin:5px; 
    border-radius: 17px;
    color: #305891;
}
.items-collection label .itemcontent{
    width:100%;
}
.items-collection .btn-group{
    width:90%
}
</style>
@stop

@section('js')
<script>
$(function () {
    $('#type_radio').on('change', function () {
        $('#selection').css('display', 'flex');
    });
    $('#type_checkbox').on('change', function () {
        $('#selection').css('display', 'flex');
    });
    $('#type_text').on('change', function () {
        $('#selection').css('display', 'none');
    });
    $('#type_number').on('change', function () {
        $('#selection').css('display', 'none');
    });
});
</script>
@stop