@extends(backpack_view('blank'))

@section('content')
    <main class="main pt-2">
        <nav aria-label="breadcrumb" class="d-none d-lg-block">
            <ol class="breadcrumb bg-transparent p-0 justify-content-end">
                <li class="breadcrumb-item text-capitalize"><a href="{{ backpack_url('dashboard') }}">Admin</a></li>
                <li class="breadcrumb-item text-capitalize"><a href="{{ url('tasks') }}">Pekerjaan</a></li>
                <li class="breadcrumb-item text-capitalize active" aria-current="page">Tambah</li>
            </ol>
        </nav>

        <section class="container-fluid">
            <h2>
                <span class="text-capitalize">Pekerjaan</span>
                <small>Tambah Pekerjaan</small>
                <small><a href="{{ url('tasks') }}" class="d-print-none font-sm"><i class="la la-angle-double-left"></i> Back to all  <span>tasks</span></a></small>
            </h2>
        </section>

        <div class="container-fluid animated fadeIn">
            <div class="row">
                <div class="col-md-12 bold-labels">
                    <form id="form-task" method="post" action="{{isset($formRouteName) ? route($formRouteName) : ''}}" action="#" enctype="multipart/form-data">
                    @csrf
                        <input type="hidden" name="http_referrer" value="{{ url('tasks') }}">
                        <div class="tab-container  mb-2">
                            <div class="nav-tabs-custom " id="form_tabs">
                                <ul class="nav nav-tabs mb-4 " role="tablist">
                                    <li role="presentation" class="nav-item">
                                        <a href="#tab_kontrak" aria-controls="tab_kontrak" role="tab" tab_name="kontrak" data-toggle="tab" class="nav-link active" aria-selected="true">Kontrak</a>
                                    </li>
                                    <li role="presentation" class="nav-item">
                                        <a href="#tab_penilaian" aria-controls="tab_penilaian" role="tab" tab_name="penilaian" data-toggle="tab" class="nav-link" aria-selected="false">Penilaian</a>
                                    </li>
                                    <li role="presentation" class="nav-item">
                                        <a href="#tab_dokumen" aria-controls="tab_dokumen" role="tab" tab_name="dokumen" data-toggle="tab" class="nav-link ">Dokumen</a>
                                    </li>
                                    <li role="presentation" class="nav-item">
                                        <a href="#tab_tim" aria-controls="tab_tim" role="tab" tab_name="tim" data-toggle="tab" class="nav-link ">Tim</a>
                                    </li>
                                    <li role="presentation" class="nav-item">
                                        <a href="#tab_penugasan" aria-controls="tab_penugasan" role="tab" tab_name="penugasan" data-toggle="tab" class="nav-link ">Penugasan</a>
                                    </li>
                                </ul>

                                <div class="tab-content p-0 ">
                                    <div role="tabpanel" class="tab-pane active" id="tab_kontrak">
                                       @include('tasks.tabs.kontrak')
                                    </div>
                                    <div role="tabpanel" class="tab-pane pb-4" id="tab_penilaian">
                                        @include('tasks.tabs.penilaian')
                                    </div>
                                    <div role="tabpanel" class="tab-pane pb-4" id="tab_dokumen">
                                        @include('tasks.tabs.dokumen')
                                    </div>
                                    <div role="tabpanel" class="tab-pane pb-4" id="tab_tim">
                                        @include('tasks.tabs.tim')
                                    </div>
                                    <div role="tabpanel" class="tab-pane pb-4" id="tab_penugasan">
                                        @include('tasks.tabs.penugasan')
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="current_tab" value="simple">

                        <div id="saveActions" class="form-group">

                            <input type="hidden" name="save_action" value="save_and_back">
                            <div class="btn-group" role="group">

                                <button form="form-task" type="submit" class="btn btn-success" onclick="return window.validateAndConfirm('#form-task', 'Apakah Anda Yakin?')">
                                    <span class="la la-save" role="presentation" aria-hidden="true"></span> &nbsp;
                                    <span data-value="save_and_back">Save and back</span>
                                </button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">▼</span></button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="javascript:void(0);" data-value="save_and_edit">Save and edit this item</a>
                                    </div>
                                </div>

                            </div>

                            <a href="{{ url('tasks') }}" class="btn btn-default"><span class="la la-ban"></span> Kembali</a>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </main>

@endsection
@section('script')
    <script>
        $('#pemberi_tugas').select2({
            delay: 250,
            closeOnSelect: true,
            placeholder: "Pilih Pemberi Tugas",
            width: "100%",
            // minimumInputLength: 3,
            ajax: {
                url: '{!! url('api/master/clients/list') !!}',
                type: 'GET',
                data: function (params) {
                    return {
                        _token: '{{ csrf_token() }}',
                        key: params.term,
                    };
                },
                processResults: function(data) {
                    var result = [];
                    data.forEach(function (value) {
                        result.push({id: value.id, text: value.nama})
                    });
                    return {results: result};
                }
            }
        });

    </script>
@endsection