@extends('admin.layouts.base')

@section('contents')
    <form class="portal-form" method="POST" action="{{ $route ?? route('admin.portal.image', $article_id) }}{{!empty(request('tab')) ? '?tab='.request('tab') : '' }}" enctype="multipart/form-data">
        {{ csrf_field() }}
    <div class="c-base-tab align-items-center">
        <p class="c-tab__title">{{$main_title??null}}</p>
        <div class="mr-3" style="display:inline-block; font-size: .8rem;margin-top: 10px">
        <span>※登録・保存せずに「戻る」ボタンを押すと、編集内容が破棄されます。</span>
        </div>
        <div class="bt-right">
            <button type="submit" class="c-linkbtn c-base-link__portal button_order_portal saved_to_portal">保存してポータル入稿ページ</button>
            @include('admin.objects.components.regist-btn', ['class' => 'c-base-tab__image button_order_portal', 'title' => '登録・保存'])
            @include('admin.objects.components.link-btn', ['url' => $back, 'title' => '戻る', 'class' => 'c-tab__backbtn mr-0 ml-0'])
        </div>
    </div>

    @include('admin.objects.components.hidden', ['name' => 'article_id', 'value' => $article_id])
    @include('admin.objects.components.hidden', ['name' => 'delete_relation_portal_image', 'value' => ''])
    @include('admin.objects.components.hidden', ['name' => 'restore_relation_portal_image', 'value' => ''])
    @include('admin.objects.components.hidden', ['name' => 'delete_relation_portal_facility_image', 'value' => ''])
    @include('admin.objects.components.hidden', ['name' => 'restore_relation_portal_facility_image', 'value' => ''])
    <div id="portal_image">
        @php
            $tab_active = 'con1';
            if (request('tab') == 'homes') $tab_active = 'con2';
            if (request('tab') == 'athome') $tab_active = 'con3';
        @endphp
        @include('admin.objects.projects.regist-portal-image-tab-link', ['active' => $tab_active ])
        <div class="mb10 p-rains__duplicate__schedule_content {{ empty(request('tab')) || request('tab') == 'suumo' ? '' : 'p-rains__none' }}" name="duplicate_data1">
            <div class="c-band d-flex justify-content-between">
                <p class="c-band__title">SUUMO</p>
            </div>
            <div class="button_bar">
                <a class="p-search-common__collapse-link p-search-common__collapse-link--open" data-toggle="collapse" href="#searchUnique" role="button" aria-expanded="false" aria-controls="searchUnique">画像入力</a>
            </div>
            <div class="p-search-common__collapse-contains collapse show" id="searchUnique">
                <table class="p-regist__table">
                    <tbody id="image_lists" class="house_img bg-suumo">
                        @include('admin.pages.portal.summo.image-20')
                        @include('admin.pages.portal.summo.facility')
                        @include('admin.pages.portal.summo.traffic-map')
                        @include('admin.pages.portal.summo.seller-comment')
                        @include('admin.pages.portal.summo.facility-spec')
                        @include('admin.pages.portal.summo.construction')
                    </tbody>
                </table>
            </div>
            <div class="button_bar pt-close">
                <a class="p-search-common__collapse-link p-search-common__collapse-link--close" data-toggle="collapse" href="#searchUnique" role="button" aria-expanded="true" aria-controls="searchUnique">画像入力を閉じる</a>
            </div>
        </div>
        <div class="mb10 p-rains__duplicate__schedule_content {{ request('tab') == 'homes' ? '' : 'p-rains__none' }}" name="duplicate_data1">
            <div class="c-band d-flex justify-content-between" style="background:#fab81e">
                <p class="c-band__title">HOME'S</p>
            </div>
            <div class="button_bar">
                <a class="p-search-common__collapse-link p-search-common__collapse-link--open" data-toggle="collapse" href="#searchUnique" role="button" aria-expanded="false" aria-controls="searchUnique">画像入力</a>
            </div>
            <div class="p-search-common__collapse-contains collapse show" id="searchUnique">
                <table class="p-regist__table">
                    <tbody id="image_lists" class="house_img">
                        @include('admin.pages.portal.homes.image-30')
                        @include('admin.pages.portal.homes.image-16')
                    </tbody>
                </table>
            </div>
            <div class="button_bar pt-close">
                <a class="p-search-common__collapse-link p-search-common__collapse-link--close" data-toggle="collapse" href="#searchUnique" role="button" aria-expanded="true" aria-controls="searchUnique">画像入力を閉じる</a>
            </div>
        </div>
        <div class="mb10 p-rains__duplicate__schedule_content {{ request('tab') == 'athome' ? '' : 'p-rains__none' }}" name="duplicate_data1">
            <div class="c-band d-flex justify-content-between" style="background:#bd0a37">
                <p class="c-band__title">at home</p>
            </div>
            <div class="button_bar">
                <a class="p-search-common__collapse-link p-search-common__collapse-link--open" data-toggle="collapse" href="#searchUnique" role="button" aria-expanded="false" aria-controls="searchUnique">画像入力</a>
            </div>
            <div class="p-search-common__collapse-contains collapse show" id="searchUnique">
                <table class="p-regist__table">
                    <tbody id="image_lists" class="house_img bg-athome">
                        @include('admin.pages.portal.athome.image-40')
                        @include('admin.pages.portal.athome.image-8')
                    </tbody>
                </table>
            </div>
            <div class="button_bar pt-close">
                <a class="p-search-common__collapse-link p-search-common__collapse-link--close" data-toggle="collapse" href="#searchUnique" role="button" aria-expanded="true" aria-controls="searchUnique">画像入力を閉じる</a>
            </div>
        </div>
    </div>

    <div class="regist__div position-fixed d-flex justify-content-center align-items-center">
        <div class="l-contents__disp">
            <button class="c-linkbtn c-base-link__portal button_order_portal saved_to_portal">保存してポータル入稿ページ</button>
            @include('admin.objects.components.regist-btn', ['class' => 'c-base-tab__image button_order_portal', 'title' => '登録・保存'])
            @include('admin.objects.components.link-btn', ['url' => $back, 'title' => '戻る', 'class' => 'c-tab__backbtn mr-0 ml-0'])
        </div>
    </div>
    </form>
    <style>
        .modal.show{display: block}
        .modal-content{padding: 30px}
        .p-img-size {
            max-height: 110px;
        }
    </style>

    <script>
        $(".portal-form").submit(function(e) {

            e.preventDefault();

            var form = $(this);
            var actionUrl = form.attr('action');

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: new FormData(this),
                processData: false,
                contentType: false,
                cache: false,
                success: function(data)
                {
                    var url = form.attr('action');
                    if (url.indexOf("toportal") !== -1) {
                        window.location.href = '{{ route("admin.portal", $building_id) }}'
                    }else{
                        var searchParams = new URLSearchParams(window.location.href);
                        searchParams.set('saved', 1)
                        window.location.href = decodeURIComponent(searchParams.toString());
                    }
                },
                error: function (error) {
                    showModalMessage(error.responseJSON)
                },

            });
        });
    </script>
    @if (session('message_modal'))
        <input type="hidden" name="" id="message" value="{{ session('message_modal') }}">
        @include('admin.objects.projects.modal-message', ['ok' => "OK"])
        <script type="text/javascript">
            window.onload = function(){
                var message = $("#message").val();
                $('#saved_message').text(message);
                openMessageModal();
                $(".btn-close-modal").click(function () {
                    $("#modal-overlay").remove();
                    $("#modal-message-content").remove();
                });
            };
        </script>
    @endif
    @include('admin.objects.projects.modal-portal', [ 'portal' =>  'suumo', 'portal_status' => $portal_status, 'num' =>  1])
    @include('admin.objects.projects.modal-portal', [ 'portal' =>  'homes', 'portal_status' => $portal_homes_status, 'num' =>  2])
    @include('admin.objects.projects.modal-portal', [ 'portal' =>  'athome', 'portal_status' => $portal_athome_status, 'num' =>  3])
    @include('admin.objects.projects.modal-portal-facility', [ 'portal' =>  'suumo', 'portal_facility_status' => $portal_facility_status, 'num'  =>  1])
    @include('admin.objects.projects.modal-portal-facility', [ 'portal' =>  'athome', 'portal_facility_status' => $athome_facility_status, 'num'  =>  2])
    @include('admin.objects.projects.modal-portal-detail', [ 'portal' =>  'suumo', 'portal_status' => $suumo_status_do, 'portal_facility_status' => $suumo_facility_status_do, 'num' =>  1])
    @include('admin.objects.projects.modal-portal-detail', [ 'portal' =>  'suumo', 'portal_status' => $suumo_status_do, 'portal_facility_status' => $suumo_facility_status_do, 'num' =>  2])
    @include('admin.objects.projects.modal-portal-detail', [ 'portal' =>  'homes', 'portal_status' => $homes_status_do, 'portal_facility_status' => $homes_status_do, 'num' =>  3])
    @include('admin.objects.projects.modal-portal-detail', [ 'portal' =>  'athome', 'portal_status' => $athome_status_do, 'portal_facility_status' => $athome_facility_status_do, 'num' =>  4])
    @include('admin.objects.projects.modal-portal-detail', [ 'portal' =>  'athome', 'portal_status' => $athome_status_do, 'portal_facility_status' => $athome_facility_status_do, 'num' =>  5])
    @include('admin.objects.components.modal-window-portal')
    @if(isset($saved))
        @include('admin.objects.projects.modal-message')
        <script type="text/javascript">
            window.onload = function(){
                var message = '登録・保存しました。';
                $('#saved_message').text(message);
                openMessageModal();
            };
        </script>
    @endif
    <script>
        jQuery('.scrollbar').scrollbar();
    </script>
    @if (session('message_modal'))
        <div id="modal-message-content-portal" class="modal-contents" style="width:600px; min-height:100px;">
            <div id="modal_open">
                <main id="modal_main">
                    <span id="saved_message"><?php echo session('message_modal') ?></span>
                </main>
            </div>
        </div>

        <script type="text/javascript">
            function openMessageModalPortal() {
                $(this).blur();  //ボタンからフォーカスを外す
                if ($("#modal-overlay")[0]) return false;
                $("body").append('<div id="modal-overlay"></div>');
                $("#modal-overlay").fadeIn("slow");
                centeringMessageModalSyncerPoral();
                $("#modal-message-content-portal").fadeIn("slow");
                $("#modal-overlay,#modal-close").unbind().click(function () {
                    $("#modal-message-content-portal,#modal-overlay").fadeOut("slow", function () {
                        $('#modal-overlay').remove();
                    });
                });
            }
            function centeringMessageModalSyncerPoral() {
                var w = $(window).width();
                var h = $(window).height();

                var cw = $("#modal-message-content-portal").outerWidth();
                var ch = $("#modal-message-content-portal").outerHeight();

                $("#modal-message-content-portal").css({"left": ((w - cw) / 2) + "px", "top": ((h - ch) / 2) + "px"});
            }
            window.onload = function() {
                openMessageModalPortal();
                $(".btn-close-modal").click(function () {
                    $("#modal-overlay").remove();
                    $("#modal-message-content").remove();
                    $(".modal-contents").remove();
                });
            };
        </script>
    @endif
@endsection