@extends('layouts.app')
@section('title', '駐輪場マスタ 新規')

@section('content')

    <div class="container-fluid page-park py-3">

        {{-- ▼ 成功メッセージ表示 --}}
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif


        {{-- ▼ パンくず --}}
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-lg-6">
                        <h1 class="m-0 text-dark">新規</h1>
                    </div>
                    <div class="col-lg-6">
                        <ol class="breadcrumb float-sm-right text-sm">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">ホーム</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('parks') }}">駐輪場マスタ</a></li>
                            <li class="breadcrumb-item active">新規</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        {{-- 本体フォーム（白背景のカード） --}}
        <form id="park-add-form" method="POST" action="{{ route('parks.store') }}" enctype="multipart/form-data"
            class="card card-body form-card">
            @csrf
            @include('admin.parks._form')

            <div class="form-footer mt-3 pt-2">
                <button type="button" id="register-btn" class="btn btn-default">登録</button>
                <a href="{{ route('parks') }}" class="btn btn-default">戻る</a>
            </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-confirm@3.3.4/css/jquery-confirm.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery-confirm@3.3.4/dist/jquery-confirm.min.js"></script>


    @push('scripts')
        <script>
            $(function () {
                $('#register-btn').off('click.parkConfirm').on('click.parkConfirm', function (e) {
                    e.preventDefault();
                    const form = document.getElementById('park-add-form');
                    const formData = new FormData(form);

                    const submit = function () {
                        fetch('{{ route('parks.check_duplicate') }}', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: formData
                        })
                            .then(response => response.json())
                            .then(data => {
                                if (data.duplicate) {
                                    $.alert({
                                        title: '重複エラー',
                                        content: '登録内容に重複があります。<br>重複駐輪場ID：' + data.park_id + '<br>駐輪場名：' + data.park_name
                                    });
                                } else {
                                    form.submit();
                                }
                            })
                            .catch(() => {
                                $.alert({
                                    title: 'エラー',
                                    content: '重複チェックに失敗しました。'
                                });
                            });
                    };

                    if ($.confirm) {
                        $.confirm({
                            title: '確認ダイアログ',
                            content: '登録してよろしいですか？　はい/いいえ',
                            buttons: {
                                ok: {
                                    text: 'はい',
                                    btnClass: 'btn-primary',
                                    action: function () {
                                        form.requestSubmit(); 
                                    }
                                },
                                いいえ: function () { }
                            }
                        });
                    } else if (window.confirm('登録してよろしいですか？')) {
                        form.requestSubmit(); 
                    }

                });
            });
        </script>
    @endpush

    <style>
        .page-park {
            background: #f4f6f9;
        }

        .form-card {
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .04)
        }

        .screen-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .screen-toolbar .btn {
            border-radius: 3px;
            padding: .35rem .7rem
        }

        .screen-toolbar .btn-light {
            background: #fff;
            border: 1px solid #dcdfe3;
            color: #333
        }

        .form-group {
            margin-bottom: .6rem
        }

        .col-form-label {
            padding-top: .55rem;
            font-weight: 600
        }

        .req:after {
            content: " *";
            color: #dc3545
        }

        input.form-control,
        select.form-control {
            height: 34px;
            padding: .25rem .5rem
        }

        textarea.form-control {
            min-height: 72px
        }

        .img-thumbnail {
            border: 1px dashed #d0d7de;
            background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f3f4f6 8px, #f3f4f6 16px)
        }

        .form-footer {
            border-top: 1px dashed #e9ecef
        }
    </style>
@endsection