@extends('layouts.app')

@section('title', 'Detail Customer')

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

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

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


@section('title-section', 'Detail Customer')

@section('content')
    <div class="page-title">
        <h3>#{{ $data->no_registrasi }} - <span class="semi-bold">{{ $data->customer->customer_name }}</span></h3>
    </div>
    <form id="form-input" action="{{ route('data-customer.update', $data->id) }}" method="post" class="mb-5">
        @csrf
        @method('PUT')
        <div class="row">
            <div class="col-md-6">
                <div class="grid simple ">
                    <div class="grid-title">
                        <h4>Data Customer</h4>
                    </div>
                    <div class="grid-body">
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <div class="controls">
                                        <input type="text" placeholder="Nama Customer" class="form-control"
                                            value="{{ $data->customer->customer_name }}" name="customer_name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="controls">
                                        <input type="text" placeholder="No. Telepon"
                                            value="{{ $data->customer->customer_phone }}" name="customer_phone"
                                            class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="controls">
                                        <input type="date" placeholder="Tanggal Regristrasi"
                                            name="customer_registration_date"
                                            value="{{ $data->customer->customer_registration_date }}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="controls">
                                        <input type="email" placeholder="Email"
                                            value="{{ $data->customer->customer_email }}" name="customer_email"
                                            class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-with-icon right">
                                            <i class=""></i>
                                            <select name="customer_city" id="city" class="select2 form-control"
                                                data-init-plugin="select2">
                                                <option value="">
                                                    Pilih Kota /
                                                    Kabupaten
                                                </option>
                                                @foreach ($kabupaten as $value)
                                                    <option value="{{ $value->id }}"
                                                        {{ $value->id == $data->customer->kota_id ? 'selected' : '' }}>
                                                        {{ $value->kota }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-with-icon right">
                                            <i class=""></i>
                                            <select name="customer_district" id="district" class="select2 form-control"
                                                data-init-plugin="select2">
                                                <option value="{{ $data->customer->kecamatan_id }}" selected>
                                                    {{ $data->customer->kecamatan->kecamatan }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-with-icon right">
                                            <i class=""></i>
                                            <select name="customer_subdistrict" id="subdistrict"
                                                class="select2 form-control" data-init-plugin="select2">
                                                <option value="{{ $data->customer->kelurahan_id }}" selected>
                                                    {{ $data->customer->kelurahan->kelurahan }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <input name="customer_postalcode" id="postalcode" type="number" class="form-control"
                                        placeholder="Postal Code" value="{{ $data->customer->kode_pos }}">
                                </div>
                                <div class="col-md-12">
                                    <div class="controls">
                                        <input type="text" placeholder="Alamat" value="{{ $data->customer->alamat }}"
                                            name="customer_address" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="grid simple ">
                    <div class="grid-title">
                        <h4>Data Layanan</h4>
                    </div>
                    <div class="grid-body body-data-layanan">
                        <div class="scroller scrollbar-hidden" data-height="220px">
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="Nama Project" value="{{ $data->nama_project }}"
                                        name="nama_project" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    {{-- <input type="text" placeholder="No. Penawaran" value="{{ $data->no_penawaran }}"
                                    class="form-control" name="no_penawaran"> --}}
                                    <input type="text" name="no_penawaran" id="offer-id" placeholder="No. Penawaran"
                                        value="{{ $data->suratPenawaran->nomor_surat }}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="No. Invoice"
                                        value="{{ $data->invoice->no_invoice }}" class="form-control" name="no_invoice">
                                </div>
                            </div>
                            <div class="col-md-6 mt-2">
                                <select id="kategori" class="select2 form-control" data-init-plugin="select2">
                                    @foreach ($kategori as $row)
                                        <option value="{{ $row->id_kategori }}"
                                            {{ $kategoriSelected == $row->id_kategori ? 'selected' : '' }}>
                                            {{ $row->nama_kategori }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mt-2">
                                <select id="subkategori" class="select2 form-control" data-init-plugin="select2">
                                    {{-- @foreach ($subKategori as $row)
                                        <option value="{{ $row->id_subkategori }}"
                                            {{ $data->layananRegistrasi->subKategoriLayanan->id_subkategori == $row->id_subkategori ? 'selected' : '' }}>
                                            {{ $row->nama_subkategori }}
                                        </option>
                                    @endforeach --}}

                                    <option value="{{ $data->layananRegistrasi->subKategoriLayanan->id_subkategori }}"
                                        selected>
                                        {{ $data->layananRegistrasi->subKategoriLayanan->nama_subkategori }}</option>
                                </select>
                                <span class="text-danger" id="waiting-subkategori"></span>
                            </div>
                            <div class="col-md-6 mt-2">
                                <select id="layanan" class="select2 form-control" name="layanan"
                                    data-init-plugin="select2">
                                    {{-- @foreach ($subKategori as $row)
                                        <option value="{{ $row->id_subkategori }}"
                                            {{ $data->layananRegistrasi->subKategoriLayanan->id_subkategori == $row->id_subkategori ? 'selected' : '' }}>
                                            {{ $row->nama_subkategori }}
                                        </option>
                                    @endforeach --}}

                                    <option value="{{ $data->layananRegistrasi->id }}" selected>
                                        {{ $data->layananRegistrasi->nama_layanan }}</option>
                                </select>
                                <span class="text-danger" id="waiting-layanan"></span>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="Alamat Projek"
                                        value="{{ $data->alamat_project }}" class="form-control" name="alamat_project">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="Lokasi Projek"
                                        value="{{ $data->lokasi_project }}" class="form-control" name="lokasi_project">
                                </div>
                            </div>
                            <div class="col-md-12 mt-2">
                                <div class="controls">
                                    {{-- <input type="text" placeholder="Detail Pengajuan" value="{{ $data->detail }}"
                                        name="detail" class="form-control"> --}}
                                    <textarea id="detail-submission" name="detail">{{ $data->detail }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="grid simple ">
                    <div class="grid-title">
                        <h4>Kelengkapan Persyaratan</h4>
                    </div>
                    <div class="grid-body">
                        <span class="text-danger" id="waiting-persyaratan"></span>
                        <div id="input-persyaratan" class="row">
                            {{-- @foreach ($dataPersyaratan as $persyaratan)
                                <div class="col-lg-3 mb-4">
                                    <div class="row-fluid">
                                        <div class="form-check d-flex">
                                            <input type="checkbox" name="persyaratan[]" value="{{ $persyaratan['id'] }}"
                                                {{ $persyaratan['checked'] === true ? 'checked' : '' }}
                                                onclick="removeDisable(this)">
                                            <label class="ms-2 mt-1">{{ $persyaratan['name'] }}</label><br>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9">
                                    <input name="ket_persyaratan[]" id="form3LastName" type="text"
                                        class="form-control" placeholder="Keterangan"
                                        value="{{ $persyaratan['keterangan'] }}"
                                        {{ $persyaratan['checked'] !== true ? 'disabled' : '' }}
                                        data-checked="{{ $persyaratan['id'] }}">
                                </div>
                            @endforeach --}}
                            @foreach (collect($dataPersyaratan)->chunk(4) as $chunk)
                                <div class="col-md-6">
                                    @foreach ($chunk as $persyaratan)
                                        <div class="row">
                                            <div class="col-lg-6 mb-4">
                                                <div class="row-fluid">
                                                    <div class="form-check d-flex">
                                                        <input type="checkbox" name="persyaratan[]"
                                                            value="{{ $persyaratan['id'] }}"
                                                            {{ $persyaratan['checked'] === true ? 'checked' : '' }}
                                                            onclick="removeDisable(this)">
                                                        <label class="ms-2 mt-1">{{ $persyaratan['name'] }}</label><br>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <input name="ket_persyaratan[]" id="form3LastName" type="text"
                                                    class="form-control" placeholder="Keterangan"
                                                    value="{{ $persyaratan['keterangan'] }}"
                                                    {{ $persyaratan['checked'] !== true ? 'disabled' : '' }}
                                                    data-checked="{{ $persyaratan['id'] }}">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="grid simple ">
                    <div class="grid-title">
                        <h4>Informasi PIC</h4>
                    </div>
                    <div class="grid-body">
                        <div class="scroller scrollbar-hidden" data-height="220px">
                        </div>
                        <div class="form-group">
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="Project Manager"
                                        value="{{ $data->pmUserAdmin->name ?? '' }}" class="form-control"
                                        name="project_manager">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="PIC Marketing"
                                        value="{{ $data->marketingUserAdmin->name ?? '' }}" name="marketing"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="PIC Produksi"
                                        value="{{ $data->produksiUserAdmin->name ?? '' }}" name="produksi"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="PIC Produksi 2"
                                        value="{{ $data->produksi2UserAdmin->name ?? '' }}" name="produksi_2"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="controls">
                                    <input type="text" placeholder="PIC Customer Service"
                                        value="{{ $data->csUserAdmin->name ?? '' }}" name="customer_service"
                                        class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary ms-3">Simpan Perubahan</button>
    </form>
    <div class="col-md-12">
        <div class="grid simple ">
            <div class="grid-title">
                <h4>History Pembayaran</h4>
            </div>
            <div class="grid-body">
                <div class="scroller scrollbar-hidden" data-height="220px">
                </div>
                <table class="table" id="example">
                    <thead>
                        <tr>
                            <th>Keterangan</th>
                            <th>No. Invoice</th>
                            <th>Tanggal</th>
                            <th>Total Tagihan</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($invoice as $pembayaran)
                            <tr>
                                <td>{{ 'Pembayaran Ke - ' . $pembayaran->tahapan }}</td>
                                <td>{{ $pembayaran->no_invoice }}</td>
                                <td>{{ $pembayaran->tgl_invoice }}</td>
                                <td>{{ 'Rp. ' . number_format($pembayaran->price, 0, ',', '.') }}</td>
                                <td>
                                    @if ($pembayaran->status == 'BILLING')
                                        <span class="label label-danger text-uppercase">{{ $pembayaran->status }}</span>
                                    @endif
                                    @if ($pembayaran->status == 'PAID')
                                        <span class="label label-success text-uppercase">{{ $pembayaran->status }}</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12" id="timeline">
        <div class="grid simple ">
            <div class="grid-title">
                <h4>Timeline Pekerjaan</h4>
            </div>
            <div class="grid-body">
                <div class="scroller scrollbar-hidden" data-height="220px">
                </div>
                <a href="{{ route('timeline-project.create', $data->id) }}" class="btn btn-primary">Tambah Timeline</a>
                <table class="table" id="example4">
                    <thead>
                        <tr>
                            <th>Nama Timeline</th>
                            <th>Tanggal Awal</th>
                            <th>Tanggal Akhir</th>
                            <th>Keterangan</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data->timelineProject as $timeline)
                            <tr>
                                <td>{{ $timeline->prosesLayanan->nama_proses }}</td>
                                <td>{{ $timeline->tgl_awal }}</td>
                                <td>{{ $timeline->tgl_akhir }}</td>
                                <td>{{ $timeline->keterangan }}</td>
                                <td>
                                    <form action="{{ route('timeline-project.destroy', [$data->id, $timeline->id]) }}"
                                        onsubmit="return confirm('Apakah anda yakin ingin menghapus data?')"
                                        method="post">
                                        @method('DELETE')
                                        @csrf
                                        <a href="{{ route('timeline-project.edit', [$data->id, $timeline->id]) }}"
                                            class="btn btn-warning btn-cons">Edit</a>
                                        <button class="btn btn-danger btn-cons">Hapus</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12" id="informasi-progress">
        <div class="grid simple ">
            <div class="grid-title">
                <h4>Informasi Progres Pekerjaan</h4>
            </div>
            <div class="grid-body">
                <div class="scroller scrollbar-hidden" data-height="220px">
                </div>
                <table class="table" id="example3">
                    <thead>
                        <tr>
                            <th>Proses</th>
                            <th>Tanggal Mulai</th>
                            <th>Tanggal Selesai</th>
                            <th>Keterangan</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if ($data->progress)
                            @foreach ($data->progress as $progress)
                                <tr>
                                    <td>{{ $progress->prosesLayanan->nama_proses }}</td>
                                    <td>{{ $progress->tanggal_mulai ?? null }}</td>
                                    <td>{{ $progress->tanggal_selesai ?? null }}</td>
                                    <td>{{ $progress->keterangan ?? null }}</td>
                                    <td>
                                        @if ($progress->status == 'SELESAI')
                                            <span class="label label-success">{{ $progress['status'] }}</span>
                                        @endif
                                        @if ($progress->status == 'PENDING')
                                            <span class="label label-warning">{{ $progress->status }}</span>
                                        @endif
                                        @if ($progress->status == 'PROSES')
                                            <span class="label label-primary">{{ $progress->status }}</span>
                                        @endif
                                        @if ($progress->status == 'BATAL')
                                            <span class="label label-danger">{{ $progress->status }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('data-customer.edit', ['id' => $progress->id, 'registrasi' => $data->id]) }}"
                                            class="btn btn-warning">Edit</a>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="grid simple ">
            <div class="grid-title">
                <h4>Catatan Lainnya</h4>
            </div>
            <div class="grid-body">
                <div class="scroller scrollbar-hidden" data-height="220px">
                </div>
                <a href="{{ route('catatan.create', $data->id) }}" class="btn btn-primary">Tambah Catatan</a>
                <table class="table" id="example5">
                    <thead>
                        <tr>
                            <th>Catatan</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data->catatan as $catatan)
                            <tr>
                                <td>{{ $catatan->catatan }}</td>
                                <td>
                                    <form action="{{ route('catatan.destroy', [$data->id, $catatan->id]) }}"
                                        onsubmit="return confirm('Apakah anda yakin ingin menghapus data?')"
                                        method="post">
                                        @method('DELETE')
                                        @csrf
                                        <a href="{{ route('catatan.edit', [$data->id, $catatan->id]) }}"
                                            class="btn btn-warning btn-cons">Edit</a>
                                        <button class="btn btn-danger btn-cons">Hapus</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('addon-script')
    <script>
        var customerCity = '{!! $data->customer->kota_id !!}';
        var customerDistrict = '{!! $data->customer->kecamatan_id !!}';
        var customerSubdistrict = '{!! $data->customer->kelurahan_id !!}';
        var customerPostalCode = '{!! $data->customer->kode_pos !!}';
        var selectedCategory = '{!! $kategoriSelected !!}';
        var selectedSubCategory = '{!! $data->layananRegistrasi->subKategoriLayanan->id_subkategori !!}';
        var selectedService = '{!! $data->layananRegistrasi->id !!}';

        // console.log(customerCity, customerDistrict, customerSubdistrict)

        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);
            }
        }

        // Display kecamatan based on kabupaten or city selected
        $.ajax({
            url: "{{ route('kecamatan-tampil') }}",
            type: 'POST',
            dataType: 'JSON',
            data: {
                "_token": "{{ csrf_token() }}",
                city: customerCity,
            },
            success: function(data) {
                let option = `<option value="">Pilih Kecamatan</option>`;
                data.forEach((row) => {
                    if (row.id != customerDistrict) {
                        option += `<option value="${row.id}">${row.kecamatan}</option>`;
                    }
                });
                $("#district").append(option);
            },
            error: function(err) {
                console.log(err)
            }
        })

        // Display kelurahan based on kecamatan selected
        $.ajax({
            url: "{{ route('kelurahan-tampil') }}",
            type: 'POST',
            dataType: 'JSON',
            data: {
                "_token": "{{ csrf_token() }}",
                district: customerDistrict,
            },
            success: function(data) {
                let option = `<option value="">Pilih Kelurahan</option>`;
                data.forEach((row) => {
                    if (row.id != customerSubdistrict) {
                        option += `<option value="${row.id}">${row.kelurahan}</option>`;
                    }
                });
                $("#subdistrict").append(option);
            },
            error: function(err) {
                console.log(err)
            }
        })

        //Display postal code based on kelurahan selected
        // $("#postalcode").val(customerPostalCode);

        //Display sub kategori based on kategori selected
        $.ajax({
            url: "{{ route('subcategory-list') }}",
            type: 'POST',
            dataType: 'JSON',
            data: {
                "_token": "{{ csrf_token() }}",
                idCategory: selectedCategory,
            },
            success: function(data) {
                let option = '<option value="">Pilih Sub Kategori</option>';
                data.forEach((row) => {
                    if (selectedSubCategory != row.id_subkategori) {
                        option +=
                            `<option value="${row.id_subkategori}">${row.nama_subkategori}</option>`;
                    }
                })
                $("#subkategori").append(option);
                $("#waiting-subkategori").html("");
            }
        });

        //Display service (layanan) based on sub kategori selected
        $.ajax({
            url: "{{ route('service-list') }}",
            type: 'POST',
            dataType: 'JSON',
            data: {
                "_token": "{{ csrf_token() }}",
                idSubcategory: selectedSubCategory,
            },
            success: function(data) {
                let option = '<option value="">Pilih Layanan</option>';
                data.forEach((row) => {
                    if (row.id != selectedService) {
                        option +=
                            `<option value="${row.id}">${row.nama_layanan}</option>`;
                    }
                })
                $("#layanan").append(option);
                $("#waiting-layanan").html("");
            }
        });

        // $.getJSON("/assets/province-list.json", function(data) {
        //     var cityList = [];
        //     var districtList = [];
        //     var subDistrictList = [];
        //     var postalCode;

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

        //             if (value.district === customerDistrict) {
        //                 if (subDistrictList.indexOf(value.subdistrict) === -1) {
        //                     if (customerSubdistrict !== value.subdistrict) {
        //                         subDistrictList.push(value.subdistrict);
        //                     }
        //                 }
        //             }
        //         }
        //     });
        //     $.each(cityList, function(index, value) {
        //         $('#city').append('<option value="' + value + '">' + value + '</option>');
        //     });
        //     $.each(districtList, function(index, value) {
        //         $('#district').append('<option value="' + value + '">' + value + '</option>');
        //     });
        //     $.each(subDistrictList, function(index, value) {
        //         $('#subdistrict').append('<option value="' + value + '">' + value + '</option>');
        //     });
        // });

        // $('#city').on('change', function() {
        //     var selectedCity = this.value;
        //     var option = `<option value="">Kecamatan</option>`;
        //     if (selectedCity !== "") {
        //         $.getJSON("/assets/province-list.json", function(data) {
        //             var district = [];

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

        //             $('#district').empty();

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

        // $('#district').on('change', function() {
        //     var selectedDistrict = this.value;
        //     var option = `<option>Desa / Kelurahan</option>`;
        //     if (selectedDistrict !== "") {
        //         $.getJSON("/assets/province-list.json", function(data) {
        //             var subdistrict = [];

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

        //             $('#subdistrict').empty();

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

        // $("#subdistrict").on('change', function() {
        //     var selectedSubDistrict = this.value;

        //     if (selectedSubDistrict !== "") {
        //         $.getJSON("/assets/province-list.json", function(data) {
        //             var postalCode = [];

        //             $.each(data, function(index, value) {
        //                 if (value.province === "Bali") {
        //                     if (selectedSubDistrict === value.subdistrict) {
        //                         if (postalCode.indexOf(value.postalCode) === -1) {
        //                             postalCode.push(value.postal_code)
        //                         }
        //                     }
        //                 }
        //             });
        //             $('#postalcode').attr('value', postalCode[0]);
        //         })

        //     }
        // })

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

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

        })

        $("#layanan").on("change", function() {
            var idService = $(this).val();
            $("#input-persyaratan").html("");
            $("#waiting-persyaratan").html("Sedang memuat data...");
            $.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-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>`
                        )
                    })
                    $("#waiting-persyaratan").html("");
                }
            });
        });

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


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

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

        $('input[name="lokasi_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) {
                        response(data);
                    }
                });
            },
            select: function(event, ui) {
                $('input[name="lokasi_project"]').val(ui.item.label);
                return false;
            }
        });


        $('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) {
                        response(data);
                    }
                });
            },
            select: function(event, ui) {
                $('input[name="project_manager"]').val(ui.item.label);
                return false;
            }
        });

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

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

        $('input[name="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) {
                        response(data);
                    }
                });
            },
            select: function(event, ui) {
                $('input[name="produksi_2"]').val(ui.item.label);
                return false;
            }
        });

        $('input[name="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) {
                        response(data);
                    }
                });
            },
            select: function(event, ui) {
                $('input[name="customer_service"]').val(ui.item.label);
                return false;
            }
        });

        //Validation
        $("#form-input").on("submit", function() {
            var checkPersyaratan = $('input[name="persyaratan[]"]:checked').length;
            if (checkPersyaratan == 0) {
                alert("Persyaratan harus diisi");
                return false;
            }
        })
    </script>
@endpush