@extends('layout.default')

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

            @csrf
            <div class="row">
                <div class="col-md-6">
                    <x-inputs.form-group for="project_year" label="{{ __('Tahun') }}" required="true">
                        <x-inputs.yearpicker id="project_year" name="project_year" value="{{ date('Y') }}" />
                    </x-inputs.form-group>

                    <x-inputs.form-group for="name" label="{{ __('Nama Project') }}" required="true">
                        <x-inputs.text id="name" name="name" type="text" />
                    </x-inputs.form-group>

                    <x-inputs.form-group for="field_id" label="{{ __('Bidang') }}" required="true">
                        @if (is_null(auth()->user()->field_id))
                            <x-inputs.select2 id="field_id" name="field_id">
                                @foreach ($branches as $branch)
                                    <optgroup label="{{ $branch->name }}">
                                        @foreach ($branch->fields as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </x-inputs.select2>
                        @else
                            <x-inputs.text type="text" id="field" name="field" value="{{ auth()->user()->field->name }}"
                                readonly="readonly" />
                            <input type="hidden" name="field_id" value="{{ auth()->user()->field_id }}">
                        @endif
                    </x-inputs.form-group>

                    <x-inputs.form-group for="region_name" label="{{ __('Wilayah') }}" required="true">
                        <div class="typeahead">
                            <x-inputs.text id="region_name" name="region_name" type="text" />
                        </div>
                    </x-inputs.form-group>

                    <x-inputs.form-group for="client_name" label="{{ __('Nama Klien') }}" required="true">
                        <div class="typeahead">
                            <x-inputs.text id="client_name" name="client_name" type="text" />
                        </div>
                    </x-inputs.form-group>

                    <x-inputs.form-group for="project_manager" label="{{ __('Project Manager') }}" required="true">
                        <div class="typeahead">
                            <x-inputs.text id="project_manager" name="project_manager" type="text" />
                        </div>
                    </x-inputs.form-group>
                </div>
                <div class="col-md-6">
                    <x-inputs.form-group for="name_on_spk" label="{{ __('Nama Project Sesuai di SPK') }}">
                        <x-inputs.text id="name_on_spk" name="name_on_spk" type="text" />
                    </x-inputs.form-group>

                    <x-inputs.form-group for="order_number" label="{{ __('Nomor Order') }}">
                        <x-inputs.text id="order_number" name="order_number" type="text" />
                    </x-inputs.form-group>

                    <x-inputs.form-group for="project_price" label="{{ __('Nilai Project (Rp)') }}"
                        helpText="Isikan dengan nilai project sesuai di SPK">
                        <x-inputs.text id="project_price" name="project_price" type="text" data-mask="000.000.000.000.000"
                            data-mask-reverse="true" />
                    </x-inputs.form-group>

                    <x-inputs.form-group for="project_period" label="{{ __('Periode Pengerjaan Project') }}">
                        <div class="input-group" id="project_period_picker">
                            <input type="text" id="project_period" name="project_period" class="form-control"
                                readonly="readonly" />
                            <div class="input-group-append">
                                <span class="input-group-text">
                                    <i class="la la-calendar-check-o"></i>
                                </span>
                            </div>
                        </div>
                    </x-inputs.form-group>
                    <input type="hidden" name="starting_date" id="starting_date">
                    <input type="hidden" name="end_date" id="end_date">

                    <x-inputs.form-group for="status" label="{{ __('Status Pengerjaan') }}" required="true">
                        <x-inputs.select2 id="status" name="status">
                            @foreach ($status as $item)
                                <option value="{{ $item->value }}">{{ $item->label() }}</option>
                            @endforeach
                        </x-inputs.select2>
                    </x-inputs.form-group>

                    <x-inputs.checkbox id="auto_create_folder" name="auto_create_folder" value="1"
                        label="Otomatis Buatkan Folder Template" />
                </div>
            </div>

            <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('projects.index') }}"
                        class="font-weight-bold ml-2">{{ __('Cancel') }}</a></span>
            </x-slot>
        </x-card>
    </form>
@endsection

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

    <script>
        const existingProjectManagers = @json($existingProjectManagers);
        const existingProjectClients = @json($existingProjectClients);
        const daterangeoption = {
            showDropdowns: true,
            buttonClasses: 'btn',
            applyClass: 'btn-primary',
            cancelClass: 'btn-secondary',
            linkedCalendars: false,
        };

        $(document).ready(function() {
            $('#project_period_picker').daterangepicker(daterangeoption, function(start, end, label) {
                $('#project_period').val(start.format('DD/MM/YYYY') + ' - ' + end
                    .format('DD/MM/YYYY'));
                $('#starting_date').val(start.format('YYYY-MM-DD'));
                $('#end_date').val(end.format('YYYY-MM-DD'));
            });

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

            initRegionalSuggestion();
            initProjectManagerSuggestion();
            initClientsSuggestion();
        });

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

            let data = $('#form').serialize();
            MyApp.ajaxPost("{{ route('projects.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('projects.index') }}";
                    });
            });
        }

        function initRegionalSuggestion() {
            var regionData = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: {
                    url: "{!! route('regional_suggestions', ['levels' => ['provinsi', 'kota']]) !!}",
                }
            });

            $('#region_name').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            }, {
                name: 'region_name',
                source: regionData
            });
        }

        function substringMatcher(strs) {
            return function findMatches(q, cb) {
                var matches, substringRegex;

                // an array that will be populated with substring matches
                matches = [];

                // regex used to determine if a string contains the substring `q`
                substrRegex = new RegExp(q, 'i');

                // iterate through the pool of strings and for any string that
                // contains the substring `q`, add it to the `matches` array
                $.each(strs, function(i, str) {
                    if (substrRegex.test(str)) {
                        matches.push(str);
                    }
                });

                cb(matches);
            };
        }

        function initProjectManagerSuggestion() {
            $('#project_manager').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            }, {
                name: 'project_manager',
                source: substringMatcher(existingProjectManagers)
            });
        }

        function initClientsSuggestion() {
            $('#client_name').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            }, {
                name: 'client_name',
                source: substringMatcher(existingProjectClients)
            });
        }
    </script>
@endpush