@extends('layouts.app')

@section('title', 'Registrasi')

@section('breadcrumb')
    <ul class="breadcrumb">
        <li>
            <p>DASHBOARD</p>
        </li>
        <li><a href="#" class="active">Registrasi</a> </li>
    </ul>
@endsection

@section('title-section', 'Registrasi')

@push('addon-style')
    <style>
        .ui-autocomplete .ui-menu-item .ui-corner-all {
            font-family: 'Roboto';
        }

        #detail-submission {
            width: 100%;
            height: 200px;
        }
    </style>
@endpush

@section('content')

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <button class="close" data-dismiss="alert"></button>
            Success:&nbsp; {{ $message }}
        </div>
    @endif

    <div class="row">
        <div class="col-md-12">
            <div class="grid simple transparent">
                <div class="grid-title">
                    <h4>Form <span class="semi-bold">Registrasi</span></h4>
                </div>
                <div class="grid-body ">
                    <div class="row">
                        <form id="registrasiform" onsubmit="return confirm('Apakah data sudah sesuai?')" method="POST"
                            action="{{ route('registrasi.store') }}">
                            @csrf
                            <div id="rootwizard" class="col-md-12">
                                <div class="form-wizard-steps">
                                    <ul class="wizard-steps">
                                        <li class="active number-first-step" data-target="#step1">
                                            <a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span
                                                    class="title">Informasi Customer</span> </a>
                                        </li>
                                        <li data-target="#step2" class="number-second-step">
                                            <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span
                                                    class="title">Informasi Project</span> </a>
                                        </li>
                                        <li data-target="#step3" class="number-third-step">
                                            <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span
                                                    class="title">Kelengkapan Persyaratan</span> </a>
                                        </li>
                                        <li data-target="#step4" class="number-last-step">
                                            <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span
                                                    class="title">Informasi PIC
                                                    <br>
                                                </span> </a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="tab-content mt-5">
                                    <div class="tab-pane active" id="tab1">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="grid simple form-grid">
                                                    <div class="grid-title no-border">
                                                        <h4>Nomor Registrasi <span class="semi-bold"
                                                                id="no-registration">#00000000</span>
                                                        </h4>
                                                    </div>
                                                    <div class="grid-body no-border">
                                                        <h4 class="semi-bold">Step 1 - <span class="light">Informasi
                                                                Customer</span></h4>
                                                        <div class="form-no-horizontal-spacing" id="form-condensed">
                                                            <div class="row column-seperation">
                                                                <div class="col-md-6">
                                                                    <h4>Data Customer</h4>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <input name="customer_name" id="customer-name"
                                                                                type="text" class="form-control"
                                                                                placeholder="Nama Customer">
                                                                        </div>
                                                                    </div>
                                                                    {{-- <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <div class="input-with-icon right">
                                                                                    <i class=""></i>
                                                                                    <select name="customer_data"
                                                                                        id="customer-data"
                                                                                        class="select2 form-control"
                                                                                        data-init-plugin="select2">
                                                                                        <option value="">
                                                                                            Pilih Data Agen
                                                                                        </option>
                                                                                        @foreach ($customer as $data)
                                                                                            <option
                                                                                                value="{{ $data->id }}">
                                                                                                {{ $data->customer_name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div> --}}
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <input type="text" name="customer_data"
                                                                                    id="customer-data"
                                                                                    placeholder="Cari Data Agen"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row small-text">
                                                                        <p class="col-md-12">
                                                                            NOTE - Kosongkan jika tidak menemukan nama
                                                                            agen/customer yang dicari
                                                                        </p>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-6">
                                                                            <input name="customer_phone" id="customer-phone"
                                                                                type="number" class="form-control"
                                                                                placeholder="Nomor Telepon">
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <input type="date"
                                                                                onclick="this.showPicker()"
                                                                                placeholder="Tanggal Regristrasi"
                                                                                class="form-control" id="date-registration"
                                                                                name="date_registration">
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <input name="customer_email" id="customer-email"
                                                                                type="email" class="form-control"
                                                                                placeholder="email@address.com">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <h4>Data Lokasi</h4>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <input name="customer_address"
                                                                                id="customer-address" type="text"
                                                                                class="form-control"
                                                                                placeholder="Alamat Customer">
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <select name="customer_city"
                                                                                    id="city"
                                                                                    class="select2 form-control"
                                                                                    data-init-plugin="select2">
                                                                                    <option value="">
                                                                                        Kota /
                                                                                        Kabupaten
                                                                                    </option>
                                                                                    @foreach ($kabupaten as $value)
                                                                                        <option
                                                                                            value="{{ $value->id }}">
                                                                                            {{ $value->kota }}</option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <select name="customer_district"
                                                                                    id="district"
                                                                                    class="select2 form-control"
                                                                                    data-init-plugin="select2">
                                                                                    <option value="">
                                                                                        Kecamatan
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-8">
                                                                            <div class="form-group">
                                                                                <select name="customer_subdistrict"
                                                                                    id="subdistrict"
                                                                                    class="select2 form-control"
                                                                                    data-init-plugin="select2">
                                                                                    <option value="">
                                                                                        Desa /
                                                                                        Kelurahan
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-4">
                                                                            <input name="customer_postalcode"
                                                                                id="postalcode" type="number"
                                                                                class="form-control"
                                                                                placeholder="Postal Code">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tab2">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="grid simple form-grid">
                                                    <div class="grid-title no-border">
                                                        <h4>Nomor Registrasi <span class="semi-bold"
                                                                id="no-registration-1">#00000000</span>
                                                        </h4>
                                                    </div>
                                                    <div class="grid-body no-border">
                                                        <h4 class="semi-bold">Step 2 - <span class="light">Informasi
                                                                Project</span></h4>
                                                        <div class="form-no-horizontal-spacing" id="form-condensed">
                                                            <div class="row column-seperation">
                                                                <input type="hidden" name="nomor_registrasi"
                                                                    id="nomor-registrasi">
                                                                <div class="col-md-6">
                                                                    <h4>Data Layanan</h4>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <select id="category-service"
                                                                                    class="select2 form-control"
                                                                                    data-init-plugin="select2">
                                                                                    <option value="">
                                                                                        Pilih
                                                                                        Kategori
                                                                                    </option>
                                                                                    @foreach ($kategori as $data)
                                                                                        <option
                                                                                            value="{{ $data->id_kategori }}">
                                                                                            {{ $data->nama_kategori }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <select id="subcategory-service"
                                                                                    class="select2 form-control"
                                                                                    data-init-plugin="select2">
                                                                                    <option value="">
                                                                                        Pilih
                                                                                        Kategori Dahulu
                                                                                    </option>
                                                                                </select>
                                                                                <span class="text-danger"
                                                                                    id="waiting-message-subcategory"></span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <select name="service_name" id="service"
                                                                                    class="select2 form-control"
                                                                                    data-init-plugin="select2">
                                                                                    <option value="">
                                                                                        Pilih
                                                                                        Sub Kategori Dahulu
                                                                                    </option>
                                                                                </select>
                                                                                <span class="text-danger"
                                                                                    id="waiting-message-service"></span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <input name="project_name" id="form3LastName"
                                                                                type="text" class="form-control"
                                                                                placeholder="Nama Project">
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-6">
                                                                            <input name="address_project"
                                                                                id="form3Occupation" type="text"
                                                                                class="form-control"
                                                                                placeholder="Alamat Project">
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <input type="text"
                                                                                    name="location_project" id=""
                                                                                    placeholder="Pilih Kecamatan, Kab/Kota, Provinsi"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <h4>Detail Pekerjaan</h4>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <input type="text" name="offer_id"
                                                                                    id="offer-id"
                                                                                    placeholder="Pilih No. Penawaran"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <input type="text" name="invoice_id"
                                                                                    id="offer-id"
                                                                                    placeholder="Pilih No. Invoice"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row small-text">
                                                                        <p class="col-md-12">
                                                                            NOTE - Input nomor secara manual jika
                                                                            menggunakan penawaran Offline
                                                                        </p>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <label class="form-label">Detail Pengajuan
                                                                                (Bidang Usaha / Luas Bangunan, Jumlah
                                                                                Lantai, Fungsi Bangunan)</label>
                                                                            {{-- <input name="detail_submission"
                                                                                id="form3Address" type="text"
                                                                                class="form-control"
                                                                                placeholder="Detail Pengajuan (Bidang Usaha / Luas Bangunan, Jumlah Lantai, Fungsi Bangunan)"> --}}
                                                                            <textarea id="detail-submission" name="detail_submission">-</textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tab3">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="grid simple form-grid">
                                                    <div class="grid-title no-border">
                                                        <h4>Nomor Registrasi <span class="semi-bold"
                                                                id="no-registration-2">#00000000</span>
                                                        </h4>
                                                    </div>
                                                    <div class="grid-body no-border mt-4">
                                                        <h4 class="semi-bold mb-4">Step 3 - <span
                                                                class="light">Kelengkapan Persyaratan</span></h4>
                                                        <br>
                                                        <div id="input-persyaratan"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tab4">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="grid simple form-grid">
                                                    <div class="grid-title no-border">
                                                        <h4>Nomor Registrasi <span class="semi-bold"
                                                                id="no-registration-3">#00000000</span>
                                                        </h4>
                                                    </div>
                                                    <div class="grid-body no-border">
                                                        <h4 class="semi-bold">Step 4 - <span class="light">Informasi
                                                                PIC</span></h4>
                                                        <br>
                                                        <div class="form-no-horizontal-spacing" id="form-condensed">
                                                            <div class="row column-seperation">
                                                                <div class="col-md-12">
                                                                    <div class="form-group">
                                                                        <input type="text" name="project_manager"
                                                                            id="offer-id"
                                                                            placeholder="Pilih Project Manager"
                                                                            class="form-control">
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <input type="text" name="pic_marketing"
                                                                                    id="offer-id"
                                                                                    placeholder="Pilih PIC Marketing"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <input type="text" name="pic_produksi"
                                                                                    id="offer-id"
                                                                                    placeholder="Pilih PIC Produksi"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <input type="text"
                                                                                    name="pic_produksi_2" id="offer-id"
                                                                                    placeholder="Pilih PIC Produksi 2"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row form-row">
                                                                        <div class="col-md-12">
                                                                            <div class="form-group">
                                                                                <input type="text"
                                                                                    name="pic_customer_service"
                                                                                    id="offer-id"
                                                                                    placeholder="Pilih Customer Service"
                                                                                    class="form-control">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="wizard wizard-actions">
                                        <li class="previous first" style="display:none;"><a href="javascript:;"
                                                class="btn">&nbsp;&nbsp;First&nbsp;&nbsp;</a></li>
                                        <li class="previous" id="previous-btn"><a href="javascript:;"
                                                class="btn">&nbsp;&nbsp;Previous&nbsp;&nbsp;</a>
                                        </li>
                                        <li class="next last" style="display:none;"><a href="javascript:;"
                                                class="btn btn-primary">&nbsp;&nbsp;Last&nbsp;&nbsp;</a></li>
                                        <li class="next" id="next-btn"><a href="javascript:;"
                                                class="btn btn-primary">&nbsp;&nbsp;Next&nbsp;&nbsp;</a></li>
                                        <li class="d-none" id="save-btn"><button type="submit"
                                                class="btn btn-primary">&nbsp;&nbsp;Save&nbsp;&nbsp;</button></li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('addon-script')
    <script src="{{ asset('assets/plugins/boostrap-form-wizard/js/jquery.bootstrap.wizard.min.js') }}"
        type="text/javascript"></script>

    <script>
        function removeDisable(e) {
            let val = $(e).val();
            let checked = $(e).is(":checked");
            if (checked) {
                $("input[data-checked='" + val + "']").removeAttr("disabled");
            } else {
                $("input[data-checked='" + val + "']").attr("disabled", true);
            }
        }
        $(document).ready(function() {
            $.ajax({
                url: '{{ route('order-id') }}',
                type: 'GET',
                dataType: 'JSON',
                success: function(data) {
                    // console.log(data)
                    var idOrder;
                    if (data > 0 && data < 10) {
                        idOrder = "00" + data;
                    } else if (data > 10 && data < 100) {
                        idOrder = "0" + data;
                    } else {
                        idOrder = data;
                    }
                    $("#no-registration").text("#" + idOrder + "00000")
                    $("#no-registration-1").text("#" + idOrder + "00000")
                    $("#no-registration-2").text("#" + idOrder + "00000")
                    $("#no-registration-3").text("#" + idOrder + "00000")
                }
            });

            $('input[name="customer_data"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('customer-agen') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="customer_data"]').val(ui.item.label);
                    $.ajax({
                        url: "{{ route('customer-data') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            name: ui.item.label
                        },
                        success: function(data) {
                            $("#customer-phone").val(data.no_hp)
                        }
                    })
                    return false;
                }
            });

            $("#category-service").on("change", function() {
                var idCategory = $(this).val();
                $("#subcategory-service").html("");
                $("#waiting-message-subcategory").text("Sedang memuat data...");
                $.ajax({
                    url: "{{ route('subcategory-list') }}",
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        idCategory: idCategory,
                    },
                    success: function(data) {
                        let option = "<option>Pilih Sub Kategori</option>";
                        data.forEach((row) => {
                            option +=
                                `<option value="${row.id_subkategori}">${row.nama_subkategori}</option>`;
                        });
                        $("#subcategory-service").html(option);
                        $("#subcategory-service").change();
                        $("#waiting-message-subcategory").text("");
                        $("#waiting-message-service").text("");

                    }
                })
            });

            $("#subcategory-service").on("change", function() {
                var value = $(this).val();
                if (value != "Pilih Sub Kategori") {
                    $("#service").html("");
                    $("#waiting-message-service").text("Sedang memuat data...");
                    $.ajax({
                        url: "{{ route('service-list') }}",
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            idSubcategory: value,
                        },
                        success: function(data) {
                            $("#waiting-message-service").text("");
                            let option = "<option>Pilih Layanan</option>";
                            data.forEach((row) => {
                                option +=
                                    `<option value="${row.id}">${row.nama_layanan}</option>`;
                            });
                            $("#service").html(option);
                            $("#service").change();
                        }
                    })
                }
            })

            $("#service").on("change", function() {
                var idService = $(this).val();
                var noRegistrasi1 = $("#no-registration").text()
                var noRegistrasi2 = $("#no-registration-1").text()
                var noRegistrasi3 = $("#no-registration-2").text()
                var noRegistrasi4 = $("#no-registration-3").text()

                var idOrder1 = noRegistrasi1.substring(1, 4);
                var idOrder2 = noRegistrasi2.substring(1, 4);
                var idOrder3 = noRegistrasi3.substring(1, 4);
                var idOrder4 = noRegistrasi4.substring(1, 4);
                $("#input-persyaratan").html("");

                if (idService != "Pilih Layanan") {
                    $.ajax({
                        url: "{{ route('order-number') }}",
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            idService: idService,
                        },
                        success: function(data) {
                            var ordernumber;
                            if (data > 0 && data < 10) {
                                orderNumber = "00" + data;
                            } else if (data > 10 && data < 100) {
                                orderNumber = "0" + data;
                            } else {
                                orderNumber = data;
                            }
                            $("#no-registration").text("#" + idOrder1 + idService + orderNumber)
                            $("#no-registration-1").text("#" + idOrder2 + idService +
                                orderNumber)
                            $("#no-registration-2").text("#" + idOrder3 + idService +
                                orderNumber)
                            $("#no-registration-3").text("#" + idOrder4 + idService +
                                orderNumber)

                            $("#nomor-registrasi").val(idOrder1 + idService + orderNumber)
                        }
                    });

                    $.ajax({
                        url: "{{ route('list-persyaratan') }}",
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            idService: idService,
                        },
                        success: function(data) {
                            $.each(data, function(index, value) {
                                $("#input-persyaratan").append(
                                    `<div class="col-lg-6">
                                        <div class="col-lg-3 mb-4">
                                    <div class="row-fluid">
                                        <div class="form-check d-flex">
                                            <input type="checkbox" name="persyaratan[]" value="${value.id}" onclick="removeDisable(this)">
                                                <label class="ms-2 mt-1">${value.nama_persyaratan}</label><br>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9">
                                    <input name="ket_persyaratan[]" id="form3LastName" disabled data-checked="${value.id}" type="text" class="form-control" placeholder="Keterangan">
                                </div>
                                </div>`
                                )
                            })
                        }
                    });
                }
            });

            var now = new Date();

            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);

            var today = now.getFullYear() + "-" + (month) + "-" + (day);
            $('#date-registration').val(today);

            var lastStep = $(".wizard-steps li.active").attr('data-target')
            if (lastStep == "#step1") {
                $("#previous-btn").addClass('d-none')
                $("#save-btn").addClass("d-none")
                $("#next-btn").removeClass("d-none")
            }
            $(".number-first-step").click(function() {
                $("#previous-btn").addClass("d-none")
                $("#save-btn").addClass("d-none")
                $("#next-btn").removeClass("d-none")
            })
            $(".number-second-step").click(function() {
                $("#previous-btn").removeClass("d-none")
                $("#save-btn").addClass("d-none")
                $("#next-btn").removeClass("d-none")
            })
            $(".number-third-step").click(function() {
                $("#previous-btn").removeClass("d-none")
                $("#save-btn").addClass("d-none")
                $("#next-btn").removeClass("d-none")
            })
            $(".number-last-step").click(function() {
                $("#next-btn").addClass("d-none")
                $("#previous-btn").removeClass("d-none")
                $("#save-btn").removeClass("d-none")
            })

            $("#next-btn").click(function() {
                var currentTab = $('.tab-pane.active');
                var nextTab = currentTab.next();
                nextTab.addClass('active');
                currentTab.removeClass('active');
                $(".wizard-steps li.active").next().addClass('active');
                $(".wizard-steps li.active").prev().removeClass('active');
                var lastStep = $(".wizard-steps li.active").attr('data-target')
                if (lastStep == "#step4") {
                    $("#save-btn").removeClass('d-none')
                    $("#next-btn").addClass('d-none')
                } else if (lastStep !== "#step1") {
                    $("#previous-btn").removeClass('d-none')
                }

            });

            $("#previous-btn").click(function() {
                var currentTab = $('.tab-pane.active');
                var prevTab = currentTab.prev();
                prevTab.addClass('active');
                currentTab.removeClass('active');
                $(".wizard-steps li.active").prev().addClass('active');
                $(".wizard-steps li.active").next().removeClass('active');
                var lastStep = $(".wizard-steps li.active").attr('data-target')
                if (lastStep !== "#step1") {
                    $("#save-btn").addClass('d-none')
                    $("#next-btn").removeClass('d-none')
                } else if (lastStep == "#step1") {
                    $("#previous-btn").addClass('d-none')
                }
            });


            //Jangan dihapus
            // $.getJSON("/assets/province-list.json", function(data) {
            //     var cityList = []; // Create an array to store unique provinces

            //     $.each(data, function(index, value) {
            //         if (value.province === "Bali") {
            //             if (cityList.indexOf(value.city) === -1) {
            //                 cityList.push(value.city);
            //             }
            //         }

            //     });

            //     $.each(cityList, function(index, value) {
            //         $('#city').append('<option value="' + value + '">' + value + '</option>');
            //     });
            // });

            $("#city").on("change", function() {
                let value = $(this).val();
                $("#district").html();
                $.ajax({
                    url: "{{ route('kecamatan-tampil') }}",
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        city: value,
                    },
                    success: function(data) {
                        let option = `<option value="">Kecamatan</option>`;
                        data.forEach((row) => {
                            option +=
                                `<option value="${row.id}">${row.kecamatan}</option>`;
                        });
                        $("#district").html(option);
                    },
                    error: function(err) {
                        console.log(err)
                    }
                })
            })
            $("#district").on("change", function() {
                let value = $(this).val();
                $("#subdistrict").html();
                $.ajax({
                    url: "{{ route('kelurahan-tampil') }}",
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        district: value,
                    },
                    success: function(data) {
                        let option = `<option value="">Kelurahan</option>`;
                        data.forEach((row) => {
                            option +=
                                `<option value="${row.id}">${row.kelurahan}</option>`;
                        });
                        $("#subdistrict").html(option);
                    },
                    error: function(err) {
                        console.log(err)
                    }
                })
            })
            $("#subdistrict").on("change", function() {
                let value = $(this).val();
                $("#postalcode").val();
                $.ajax({
                    url: '{{ route('kode-pos-select') }}',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        subdistrict: value,
                    },
                    success: function(data) {
                        $("#postalcode").val(data.kode_pos);
                    }
                })
            });

            $('input[name="location_project"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('list-province') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="location_project"]').val(ui.item.label);
                    return false;
                }
            });


            $('input[name="offer_id"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('surat-penawaran') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="offer_id"]').val(ui.item.label);
                    // console.log(ui.item);
                    return false;
                }
            });

            $('input[name="invoice_id"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('no-invoice') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="invoice_id"]').val(ui.item.label);
                    // console.log(ui.item);
                    return false;
                }
            });

            //Autocomplet PIC

            $('input[name="project_manager"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('pic') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="project_manager"]').val(ui.item.label);
                    // console.log(ui.item);
                    return false;
                }
            });

            $('input[name="pic_marketing"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('pic') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="pic_marketing"]').val(ui.item.label);
                    // console.log(ui.item);
                    return false;
                }
            });

            $('input[name="pic_produksi"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('pic') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="pic_produksi"]').val(ui.item.label);
                    // console.log(ui.item);
                    return false;
                }
            });

            $('input[name="pic_produksi_2"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('pic') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="pic_produksi_2"]').val(ui.item.label);
                    // console.log(ui.item);
                    return false;
                }
            });


            $('input[name="pic_customer_service"]').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('pic') }}",
                        type: 'post',
                        dataType: "json",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            search: request.term
                        },
                        success: function(data) {
                            // console.log(data)
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    $('input[name="pic_customer_service"]').val(ui.item.label);
                    return false;
                }
            });

            // $('#customer-data').on('change', function() {
            //     var customerName = $(this).find(":selected").attr("value");
            //     $.ajax({
            //         url: "{{ route('customer-data') }}",
            //         type: 'post',
            //         dataType: "json",
            //         data: {
            //             "_token": "{{ csrf_token() }}",
            //             customer: customerName
            //         },
            //         success: function(data) {
            //             $("#customer-phone").val(data.customer_phone)
            //         }
            //     })
            // })

            $("#registrasiform").on("submit", function() {
                // e.preventDefault();
                var customerNameInput = $('input[name="customer_name"]').val();
                var customrPhoneInput = $('input[name="customer_phone"]').val();
                var customerEmailInput = $('input[name="customer_email"]').val();
                var customerAddressInput = $('input[name="customer_address"]').val();
                var customerCityInput = $('select[name="customer_city"] option:selected').val();
                var customerDistrictInput = $('select[name="customer_district"] option:selected').val();
                var customerSubDistrictInput = $('select[name="customer_subdistrict"] option:selected').val();
                var customerPostalCodeInput = $('input[name="customer_postal_code"]').val();
                var serviceInput = $('select[name="service_name"]').val();
                var projectNameInput = $('input[name="project_name"]').val();
                var projectAddressInput = $('input[name="project_address"]').val();
                var locationProjectInput = $('input[name="location_project"]').val();
                var penawaranInput = $('input[name="offer_id"]').val();
                var invoiceInput = $('input[name="invoice_id"]').val();
                var detailSubmissionInput = $('textarea[name="detail_submission"]').val();

                var persyaratanInput = [];
                $('input[name="persyaratan[]"]:checked').each(function() {
                    persyaratanInput.push($(this).val());
                });
				
                if (customerNameInput === "") {
                    alert("Nama Pelanggan harus diisi")
                    return false;
                }

                if (customrPhoneInput === "") {
                    alert("Nomor Telepon harus diisi")
                    return false;
                }
				
                if (customerEmailInput === "") {
                    alert("Email harus diisi")
                    return false;
                }
                if (customerAddressInput === "") {
                    alert("Alamat harus diisi")
                    return false;
                }

                if (customerCityInput === "") {
                    alert("Kota harus diisi")
                    return false;
                }

                if (customerDistrictInput === "") {
                    alert("Kecamatan harus diisi")
                    return false;
                }

                if (customerSubDistrictInput === "") {
                    alert("Kelurahan harus diisi")
                    return false;
                }

                if (customerPostalCodeInput === "") {
                    alert("Kode Pos harus diisi")
                    return false;
                }

                if (serviceInput === "") {
                    alert("Jenis Layanan harus diisi")
                    return false;
                }

                if (projectNameInput === "") {
                    alert("Nama Proyek harus diisi")
                    return false;
                }

                if (projectAddressInput === "") {
                    alert("Alamat Proyek harus diisi")
                    return false;
                }

                if (locationProjectInput === "") {
                    alert("Alamat Proyek harus diisi")
                    return false;
                }

                if (persyaratanInput.length === 0) {
                    alert("Persyaratan harus diisi")
                    return false;
                }

                if (penawaranInput === "") {
                    alert("Nomor Penawaran harus diisi")
                    return false;
                }
				
            })
        })
    </script>
@endpush