@extends('admin.layouts.base')
@section('contents')

    <form method="POST" action="{{ route('leaseImage', ['id' => $lease->id]) }}" enctype="multipart/form-data">
        {{ csrf_field() }}

        @include('admin.objects.components.hidden', ['name' => 'lease_id', 'value' => $lease->id])
        <input type="hidden" name="del_photo_id" value="" class="">
        <?php
        $photos = [];
        foreach($lease->listImages as $photo){
            $photos[] = $photo->id;
        }
        $photos = implode(',', $photos);
        ?>
        @include('admin.objects.components.hidden', ['name' => 'saved_photo_id', 'value' => $photos])
        <div class="mb-3" id="lease_regist" >
            <div class="p-regist">
                    <div id="tab-one" class="row c-tab">
                        <p class="col-6 l-header__span-j c-tab__title">賃貸物件</p>
                        <ul class="col-6 d-flex justify-content-between c-tab__list">
                            <li class="c-tab__link"><a href="{{ route('lease') }}">賃貸物件 一覧</a></li>
                            <li class="c-tab__link active"><a href="javascript:void(0)">賃貸物件 登録</a></li>
                        </ul>
                    </div>
                    <div class="c-band d-flex justify-content-between">
                        <p class="c-band__title">賃貸物件</p>
                    </div>

                    <table class="p-regist__table">
                        <tbody>
                        <tr>
                            <th colspan="2">間取り</th>
                            <td>
                                <div class="d-flex">
                                    <div class="w200 mr20">
                                        <label id="imageArea" class="p-imgupload__area" for="fileSingleInput">
                                            @if(isset($lease->madori_url))
                                                <img src="{{$lease->madori_url}}" width="200" />
                                            @endif
                                            <canvas name="canvas_floor" width="0" height="0"></canvas>
                                            <p class="p-imgupload__text">クリックまたは<br>ドラッグ&amp;ドロップ</p>
                                            <input id="fileSingleInput" type="file" name="file_single_input" style="display:none;">
                                            <input type="hidden" name="file_path" value="{{$lease->madori_url ??''}}">

                                            <input type="hidden" name="floor_file_delete_flg" id="floor_file_delete_flg" value="">
                                        </label>

                                        <div class="mt10">
                                            @include('admin.objects.components.btn', ['name' => 'del_article_floor_photo', 'class' => 'w-100', 'title' => '削除', 'type' => 'button'])
                                        </div>
                                    </div>

                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                物件写真
                            </th>
                            <td class="p-regist__table-notp">
                                <div class="house_img">
                                    <label class="p-imgupload-large" for="fileInputLease">
                                        <div id="iamgeAreaMulti" class="p-imgupload-lease__area p-imgupload-bukken">
                                            <p class="p-imgupload-large__text">画像をまとめてアップロード</p>
                                            <p class="p-imgupload-large__text-sub">ここに写真画像をドラッグ&amp;ドロップ</p>
                                            <input id="fileInputLease" type="file" value="" name="photo_images[]" style="display:none;" multiple>
                                        </div>
                                    </label>
                                    <div id="sortable_article_image" class="p-regist__sorttable">
                                        <div id="image_list" class="row sortable_group ml-2 mr-2">
                                            <div id="add-photo-template" class="d-none ui-sortable-handle mt10 mb10 sortable_item">

                                                <div class="p-add-photo p-imgupload-single w-100 h100" data-id="">
                                                    <canvas name="canvas" width="0" height="0"></canvas>
                                                    <input class="fileSingleInputSingle" type="file" name="photo_images[]" style="display:none;">
                                                </div>

                                                <div class="mt10 w-100">
                                                    @include('admin.objects.components.hidden', ['name' => 'article_photo_id'])
                                                    @include('admin.objects.components.btn', ['name' => 'del_photo_tmp', 'class' => 'btn_imagedel w-100', 'title' => '削除', 'type' => 'button'])
                                                </div>
                                            </div>

                                            @foreach($lease->listImages as $photo)
                                                <div class="col-2 mt10 mb10 sortable_item">
                                                    <div class="p-add-photo p-imgupload-single w-100 h100" data-id="{{ $photo->id }}">
                                                        <img src="{{$photo->storageLink}}">
                                                        <canvas name="canvas" width="0" height="0"></canvas>
                                                        <input class="fileSingleInputSingle" type="file" name="photo_images[]" style="display:none;">
                                                    </div>
                                                    <div class="mt10 w-100">
                                                        @include('admin.objects.components.hidden', ['name' => 'article_photo_id'.$loop->index, 'value' => $photo->id])
                                                        @include('admin.objects.components.btn', ['name' => 'del_photo_portal', 'class' => 'btn_imagedel w-100', 'title' => '削除', 'type' => 'button'])
                                                    </div>

                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            <div class="search_vendor__btn mt-3">
                <a href="{{ route('lease-edit', ['id' => $lease->id]) }}" class="c-tab__backbtn ml-0">戻る</a>
                @include('admin.objects.components.regist-btn', ['class' => '', 'title' => '登録・保存'])
            </div>
        </div>
    </form>
    @include('admin.objects.projects.modal-message')

    @if(isset($saved) && $saved == 1)
        @include('admin.objects.projects.modal-message')
        <script type="text/javascript">
            window.onload = function(){
                var message = '登録・保存しました。';
                $('#saved_message').text(message);
                openMessageModal();
            };

        </script>
    @endif

@endsection