@extends('layout.app')
@section('content')
    <div class="flex flex-col px-8 py-8">
        <div class="pb-4">
            <div class="xs:flex-col items-center justify-between sm:flex">
                <div>
                    <nav class="flex" aria-label="Breadcrumb">
                        <ol role="list" class="flex items-center space-x-4">
                            <li>
                                <div>
                                    <a href="#" class="text-gray-400 hover:text-gray-500">
                                        <!-- Heroicon name: solid/home -->
                                        <svg class="h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path
                                                d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                                        </svg>
                                        <span class="sr-only">Home</span>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <svg class="h-5 w-5 flex-shrink-0 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                    </svg>
                                    <a href="{{ $index }}" class="text-md ml-4 font-medium text-gray-500 hover:text-gray-700">{{ $model->breadcrumb }}</a>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <svg class="h-5 w-5 flex-shrink-0 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                    </svg>
                                    @isset($breadcrumb)
                                        <a href="#" class="text-md ml-4 font-medium text-gray-500 hover:text-gray-700">{{ $breadcrumb }}</a>
                                    @else
                                        <a href="#" class="text-md ml-4 font-medium text-gray-500 hover:text-gray-700">{{ $type === 'create' ? 'เพิ่มข้อมูล' : 'แก้ไขข้อมูล' }}</a>
                                    @endisset
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="-my-2 mt-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                    <div class="overflow-hidden bg-white shadow sm:rounded-lg">
                        <div class="px-4 py-5 sm:px-6">
                            <div class="flex justify-between">
                                <div>
                                    <h3 class="text-lg font-medium leading-6 text-gray-900">
                                        {{ $type === 'create' ? 'เพิ่มข้อมูล' : 'แก้ไขข้อมูล' }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <form id="form" action="{{ $action }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @if ($type === 'edit')
                                @isset($put_method)
                                @else
                                    @method('PUT')
                                @endisset
                            @endif
                            <div class="border-t border-gray-200">
                                <dl class="flex flex-col gap-4 px-4 pt-5 sm:px-6">
                                    @yield('fields')
                                </dl>
                            </div>
                            <div class="px-5 py-5">
                                <div class="flex justify-end">
                                    <a href="{{ $index }}">
                                        <button type="button"
                                            class="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                                            ยกเลิก
                                        </button>
                                    </a>
                                    <button type="button" id="btn-submit"
                                        class="ml-3 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                                        บันทึกข้อมูล
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    @stack('page_script')
    <script>
        $('#btn-submit').on('click', function() {
            validateForm('#form', window.validateElements)
        })
    </script>
@endpush