@extends('layout.default')

@section('content')
    <form class="form" id="form" action="{{ route('fields.update', ['field' => $field->id]) }}" method="PUT">
        <x-card>
            <x-slot name="title">
                <h3 class="card-title">{{ __('Form') }}</h3>
            </x-slot>

            @csrf
            @method('PUT')
            <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 }}" @selected($item->id == $field->branch_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" value="{{ $field->name }}" />
            </x-inputs.form-group>

            <x-slot name="footerLeft">
                <button id="btn-submit" type="button"
                    class="btn btn-primary font-weight-bolder">{{ __('Update') }}</button>
                <span class="ml-2">{{ __('or') }} <a href="{{ route('fields.index') }}"
                        class="font-weight-bold ml-2">{{ __('Cancel') }}</a></span>
            </x-slot>

            @can('fields.delete')
                <x-slot name="footerRight">
                    <button id="btn-delete" type="button" class="btn btn-danger font-weight-bold">{{ __('Delete') }}</button>
                </x-slot>
            @endcan

        </x-card>

    </form>
@endsection

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

    <script>
        $(document).ready(function() {
            $('#btn-submit').on('click', () => update());
            $('#btn-delete').on('click', () => destroy());
        });

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

            let data = $("#form").serialize();
            MyApp.ajaxPut(
                "{{ route('fields.update', ['field' => $field->id]) }}",
                data,
                function(
                    response) {
                    MyApp.alert("{{ __('Update') }}",
                        "{{ __('Data updated successfully.') }}",
                        "success",
                        () => {
                            location.href = "{{ route('fields.index') }}";
                        });
                });
        }

        function destroy() {
            MyApp.confirm("{{ __('Confirm') }}", "{{ __('Are you sure to delete this data?') }}", "warning",
                () => {
                    MyApp.ajaxDelete(
                        "{{ route('fields.destroy', ['field' => $field->id]) }}",
                        null,
                        function(response) {
                            MyApp.alert("{{ __('Delete') }}",
                                "{{ __('Data deleted successfully') }}",
                                "success", () => {
                                    location.href =
                                        "{{ route('fields.index') }}";
                                });
                        });
                })
        }
    </script>
@endpush