@extends('adminlte::page')

@section('title', 'サポートパック検査ページ設定追加')

@section('content_header')
    <h5><label class="title-underbar">サポートパック検査ページ設定追加</label></h5>
@stop
@php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$isDesktop = strpos($userAgent, 'Windows') !== false || strpos($userAgent, 'Macintosh') !== false;
@endphp

@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.pageStore', ['id' => $survey->id]) }}" id="supportPackForm" class="form-group mt-3">
                    @csrf
                    <input type="hidden" name="survey_id" value="{{ $survey->id }}" />
                    <div class="form-group row">
                        <label for="page" 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="number" id="page" name="page" class="form-control main-text" placeholder="ページを入力してください" value="{{ old('page') ?? ''}}" style="width:90%" min="1" max="1000" required />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="title" 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="title" name="title" class="form-control main-text" placeholder="タイトルを入力してください" value="{{ old('title') ?? ''}}" style="width:90%" required />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="title" 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">
                            <button type="button" id="setDefaultTitle" class="btn button-go btn-lg round-pill">点検前チェックをタイトルに設定</button>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="caution" 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="caution" name="caution" class="form-control main-text" placeholder="注意事項を入力してください" value="{{ old('caution') ?? ''}}" style="width:90%" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <div for="caution" class="col-sm-2 col-form-label medium-heading"></div>
                        <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:0px">
                            <input type="checkbox" id="is_linked" name="is_linked" value="1" />
                            <label for="is_linked" class="main-text">続けて検証項目を追加する</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <div id="dropArea" class="" style="text-align:center">
                                    @if ($isDesktop)
                                        <div class="medium-heading" style="margin: -15px; background-color: #F5F5F5; border-radius: 10px;">
                                            <br>
                                            <span class="drag-upload"><b>{!! __("clinic-repair-request.create03.span_file_drag") !!}</b>
                                            <br><br>{!! __("clinic-repair-request.create03.text_or") !!}<br><br></span>
                                            <div>
                                                <label class="custom-file-upload" style="background-color: #fff;">
                                                    <input type="file" id="file" name="file" multiple style="display:none;">
                                                    {!! __("clinic-repair-request.create03.label_file_select_pc") !!}
                                                </label>
                                            </div>
                                            <br>
                                        </div>
                                    @else
                                        <div style="margin: -15px; background-color: #F5F5F5; border-radius: 10px;">
                                            <label class="custom-file-upload" style="margin: 15px; background-color: #fff;">
                                                <input type="file" id="file" name="file" multiple style="display:none;">
                                                {!! __("clinic-repair-request.create03.label_file_select_mobile") !!}
                                            </label>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div id="uploadFileList">
                                @if(!empty($files))
                                    @foreach($files as $id => $file)
                                        <p>
                                            <i class="fas fa-file"></i>
                                            <span>{{ \Arr::get($file, 'name') }}</span>
                                            <button type="button" class="delete-button text-danger" data-id={{$id}}>
                                                [{!! __("clinic-repair-request.create03.button_file_delete") !!}]
                                            </button>
                                        </p>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                    <a href="{{ route('smartsupport.admin.supportPackSurvey.pages', ['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">
<link href="/css/fileupload_drag&drop.css" rel="stylesheet">
<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>
const FOLDER_ID = {{$survey->id}};
const PATH = "maintenance";
const FORMNAME = "supportPackForm";
const DEFAULT_TITLE = "{{ $defaultTitle }}";
const EMPLOYEE_ID = {{ \Auth::guard('admin')->user()->id }};
const SURVEY_ID = {{ $survey->id }};
</script>
<script src="/js/upload/base.js" type="module"></script>
<script src="/js/upload/ajaxForMaintenance.js" type="module"></script>
<script type="module">
    import AjaxForMaintenance from '/js/upload/ajaxForMaintenance.js';
    const ajaxUpload = new AjaxForMaintenance('file', 'dropArea', 'uploadFileList','supportPackForm', 'confirmFileList', EMPLOYEE_ID);
</script>
<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');
    });
});
$('#setDefaultTitle').on('click', function() {
    $('input[name="title"]').val(DEFAULT_TITLE);
});
</script>
@stop