{{-- filepath: c:\xampp82\htdocs\somanager-git_main\resources\views\admin\CityMaster\add.blade.php --}}
@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between mb-3 gap-2">
            <h2 class="mb-0 fw-bold">{{ __('新規') }}</h2>
            <ol class="breadcrumb float-md-right text-sm mb-0 bg-transparent">
                <li class="breadcrumb-item"><a href="{{ url('/home') }}">ホーム</a></li>
                <li class="breadcrumb-item"><a href="{{ route('city') }}">市区マスタ</a></li>
                <li class="breadcrumb-item active">新規</li>
            </ol>
        </div>

        @php($errorMessages = $errorMsg ?? [])
        @if(!empty($errorMessages))
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errorMessages as $message)
                        <li>{{ $message }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-start">
                <button type="submit" form="city-form" class="btn btn-lg btn-default mr-2 register">{{ __('登録') }}</button>
            </div>
            <div class="card-body py-4">
                <form id="city-form" class="city-form" method="POST" action="{{ route('city_add') }}">
                    @csrf

                    @include('admin.CityMaster._form', ['isEdit' => 0, 'isInfo' => 0])

                    <div class="d-flex flex-column flex-md-row align-items-md-center gap-3 mt-4">
                        <button type="submit" class="btn btn-lg btn-default mr-2 register">{{ __('登録') }}</button>
                        <a href="{{ route('city') }}" class="btn btn-lg btn-default">{{ __('戻る') }}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .city-form .form-group {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .city-form .form-group .form-label {
        flex: 0 0 180px;
        margin-bottom: 0;
        font-weight: 600;
        color: #333;
    }
    .city-form .form-group .form-control {
        flex: 1 1 auto;
    }
    @media (max-width: 767.98px) {
        .city-form .form-group {
            flex-direction: column;
            align-items: stretch;
        }
        .city-form .form-group .form-label {
            flex: none;
            width: 100%;
        }
    }
</style>
@endpush

@push('scripts')
<script>
(function ($) {
    $(function () {
        var validationErrors = @json($errorMessages);
        if (validationErrors.length) {
            var message = validationErrors.join('\n');
            if ($.alert) {
                $.alert({ title: 'エラー', content: message });
            } else {
                window.alert(message);
            }
        }

        $('.register').off('click.cityConfirm').on('click.cityConfirm', function (e) {
            e.preventDefault();
            const formId = this.getAttribute('form');
            const $form = formId ? $('#' + formId) : $('#city-form');
            if (!$form.length) { return; }

            const submit = function () {
                if (typeof $form[0].requestSubmit === 'function') {
                    $form[0].requestSubmit();
                } else {
                    $form.trigger('submit');
                }
            };

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