@extends('layout.default')

@section('content')
    <form class="form" id="form" action="{{ route('projects.update', ['project' => $project->id]) }}"
        method="PUT">
        <x-card>
            <x-slot name="title">
                <h3 class="card-title">{{ $page_title }}</h3>
            </x-slot>
            <x-slot name="toolbar">
                @include('project._navigation', ['project' => $project])
            </x-slot>

            @csrf
            @method('PUT')
            <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="{{ $project->project_year }}" />
                    </x-inputs.form-group>

                    <x-inputs.form-group for="name" label="{{ __('Nama Project') }}" required="true">
                        <x-inputs.text id="name" name="name" type="text" value="{{ $project->name }}" />
                    </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 }}" @selected($item->id == $project->field_id)>
                                                {{ $item->name }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </x-inputs.select2>
                        @else
                            <x-inputs.text type="text" id="field" name="field" value="{{ $project->field->name }}"
                                readonly="readonly" />
                            <input type="hidden" name="field_id" value="{{ $project->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"
                                value="{{ $project->region_name }}" />
                        </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"
                                value="{{ $project->client_name }}" />
                        </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"
                                value="{{ $project->project_manager }}" />
                        </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"
                            value="{{ $project->name_on_spk }}" />
                    </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"
                            value="{{ $project->order_number }}" />
                    </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"
                        value="{{ optional($project->starting_date)->toDateString() }}">
                    <input type="hidden" name="end_date" id="end_date"
                        value="{{ optional($project->end_date)->toDateString() }}">

                    <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" value="{{ $project->project_price }}" />
                    </x-inputs.form-group>

                    <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 }}" @selected($item->value == $project->status->value)>{{ $item->label() }}
                                </option>
                            @endforeach
                        </x-inputs.select2>
                    </x-inputs.form-group>
                </div>
            </div>

            <x-slot name="footerLeft">
                <button id="btn-submit" type="button"
                    class="btn btn-primary font-weight-bolder">{{ __('Update') }}</button>
            </x-slot>

            @can('projects.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\Project\UpdateProjectRequest', '#form') !!}

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

        $(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'));
            });

            if (startingDate && endDate) {
                const start = moment(startingDate, 'YYYY-MM-DD')
                const end = moment(endDate, 'YYYY-MM-DD')

                $('#project_period_picker').data('daterangepicker').setStartDate(start);
                $('#project_period_picker').data('daterangepicker').setEndDate(end);
                $('#project_period').val(start.format('DD/MM/YYYY') + ' - ' + end
                    .format('DD/MM/YYYY'));
            }

            $('#btn-submit').on('click', () => update());
            $('#btn-delete').on('click', () => destroy());

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

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

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

        function destroy() {
            MyApp.confirm("{{ __('Confirm') }}", "{{ __('Are you sure to delete this data?') }}", "warning",
                () => {
                    MyApp.ajaxDelete(
                        "{{ route('projects.destroy', ['project' => $project->id]) }}",
                        null,
                        function(response) {
                            MyApp.alert("{{ __('Delete') }}",
                                "{{ __('Data deleted 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