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

@section('content')
<div class="container-fluid page-park py-3">

    {{-- 画面上部のツールバー（新規は登録だけ/目标图一致） --}}
    <div class="screen-toolbar mb-2">
        <div class="left">
            <button type="submit" form="park-add-form" class="btn btn-success btn-sm">登録</button>
        </div>
        <div class="right"><!-- 新規は削除無し --></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-success">登録</button>
            <a href="{{ route('parks') }}" class="btn btn-outline-secondary">戻る</a>
        </div>
    </form>
</div>

<script>
document.getElementById('register-btn').addEventListener('click', function(e) {
    if(confirm('登録してよろしいですか？')) {
        // 重複チェック（駐輪場名）Ajax
        const form = document.getElementById('park-add-form');
        const formData = new FormData(form);
        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('登録内容に重複があります。（重複駐輪場ID：' + data.park_id + '　駐輪場名：' + data.park_name + '）');
            } else {
                form.submit();
            }
        })
        .catch(() => {
            alert('重複チェックに失敗しました。');
        });
    }
});
</script>

<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