@extends('layout.default')

@section('content')
    <form class="form" id="form" action="{{ route('fields.store') }}" method="POST">
        <x-card>
            <x-slot name="title">
                <h3 class="card-title">{{ __('Form') }}</h3>
            </x-slot>

            @csrf
            <x-inputs.form-group for="branch_id" label="{{ __('Cabang') }}">
                <x-inputs.select2 id="branch_id" name="branch_id">
                    @foreach ($branches as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
                </x-inputs.select2>
            </x-inputs.form-group>
            <x-inputs.form-group for="name" label="{{ __('Nama') }}" required="true">
                <x-inputs.text id="name" name="name" type="text" />
            </x-inputs.form-group>

            <x-slot name="footerLeft">
                <button id="btn-submit" type="button" class="btn btn-primary font-weight-bolder">{{ __('Save') }}</button>
                <button id="btn-submit-add-new" type="button"
                    class="btn btn-secondary font-weight-bold ml-2">{{ __('Save Add New') }}</button>
                <span class="ml-2">{{ __('or') }} <a href="{{ route('fields.index') }}"
                        class="font-weight-bold ml-2">{{ __('Cancel') }}</a></span>
            </x-slot>
        </x-card>
    </form>
@endsection

@push('page_script')
    {!! JsValidator::formRequest('App\Http\Requests\Field\StoreFieldRequest', '#form') !!}

    <script>
        $(document).ready(function() {
            $('#btn-submit').on('click', function(e) {
                store();
            });
            $('#btn-submit-add-new').on('click', function(e) {
                store(true);
            });
        });

        function store(addNew = false) {
            if (!$('#form').validate().form()) {
                return false;
            }

            let data = $('#form').serialize();
            MyApp.ajaxPost("{{ route('fields.store') }}", data, function(response) {
                if (addNew) {
                    $('#form')[0].reset();
                    $('#form select').val(null).trigger('change');
                    MyApp.notify("{{ __('Save') }}",
                        "{{ __('Data saved successfully') }}",
                        "success");
                    return true;
                }
                MyApp.alert("{{ __('Save') }}",
                    "{{ __('Data saved successfully') }}",
                    "success", () => {
                        location.href = "{{ route('fields.index') }}";
                    });
            });
        }
    </script>
@endpush