@extends('layouts.app')

@section('title', 'Penawaran')

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


@section('title-section', 'Edit Penawaran')

@section('content')
    <div class="row">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="grid simple form-grid">
                <div class="grid-title no-border">
                </div>
                <div class="grid-body no-border">
                    <form action="{{ route('penawaran.update', $data->id) }}" method="POST" autocomplete="off"
                        class="validate" id="roles-form">
                        @csrf
                        @method('PUT')
                        {{-- Nomor surat penawaran, Hal, Kepada Penawaran, Layanan, dan Fungsi Layanan --}}
                        <div class="row">
                            <h5 class="mb-3">Kepala Surat Penawaran</h5>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Nomor Surat Penawaran</label>
                                    <input class="form-control" id="role" placeholder="Nomor Surat Penawaran"
                                        name="nomor_surat" value="{{ $data->nomor_surat }}" type="text">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Hal</label>
                                    <input class="form-control" id="role"
                                        placeholder="Contoh: Penawaran Pengurusan SLF Rumah Tinggal" name="hal"
                                        type="text" value="{{ $data->hal }}">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Kepada</label>
                                    <input class="form-control" id="role" placeholder="Bapak John" name="kepada"
                                        type="text" value="{{ $data->kepada }}">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Layanan</label>
                                    <select name="layanan" id="service" class="select2 form-control"
                                        data-init-plugin="select2">
                                        <option value="">
                                            Pilih
                                            Layanan
                                        </option>
                                        @foreach ($layanan as $row)
                                            <option value="{{ $row->id }}"
                                                {{ $row->id == $data->layanan_id ? 'selected' : '' }}>
                                                {{ $row->nama_layanan }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Fungsi Penawaran</label>
                                    <input class="form-control" value="{{ $data->fungsi_layanan }}" id="role"
                                        placeholder="Contoh: Rumah Tinggal" name="fungsi_penawaran" type="text">
                                </div>
                            </div>
                        </div>
                        {{-- Lokasi, Kecamatan, Kabupaten --}}
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Lokasi</label>
                                    <input class="form-control" id="role" placeholder="Contoh: Pantai Sanur"
                                        name="lokasi" value="{{ $data->lokasi }}" type="text">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Kecamatan</label>
                                    <input class="form-control" id="role" placeholder="Contoh: Kuta Utara"
                                        name="kecamatan" value="{{ $data->kecamatan }}" type="text">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Kabupaten</label>
                                    <input class="form-control" value="{{ $data->kabupaten }}" id="role"
                                        placeholder="Contoh: Singaraja" name="kabupaten" type="text">
                                </div>
                            </div>
                        </div>
                        {{-- Luas dan Satuan --}}
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Luas</label>
                                    <input class="form-control" value="{{ $data->luas }}" id="role"
                                        placeholder="Contoh: 100" name="luas" type="number">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Satuan</label>
                                    <select name="satuan" id="" class="form-control">
                                        <option value="">Pilih Satuan</option>
                                        <option value="m2" {{ $data->satuan == 'm2' ? 'selected' : '' }}>m2</option>
                                        <option value="Ls" {{ $data->satuan == 'Ls' ? 'selected' : '' }}>Ls</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        {{-- Ruang Lingkup --}}
                        <h5 class="mb-3 mt-4">Ruang Lingkup Pekerjaan</h5>
                        @if ($data->ruangLingkup->isNotEmpty())
                            @foreach ($data->ruangLingkup as $key => $row)
                                @if ($key == 0)
                                    <div class="ruang-lingkup add-ruang-lingkup">
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <div class="form-group">
                                                    <label class="form-label">Ruang Lingkup</label>
                                                    <input class="form-control" id="role"
                                                        placeholder="Contoh: Pengajuan Validasi KKPR"
                                                        value="{{ $row->ruang_lingkup }}" name="ruang_lingkup[]"
                                                        type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <button type="button" class="btn btn-primary" id="add-ruang-lingkup">
                                                    Tambah
                                                    Ruang
                                                    Lingkup</button>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="ruang-lingkup">
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <div class="form-group">
                                                    <label class="form-label">Ruang Lingkup</label>
                                                    <input class="form-control" id="role"
                                                        placeholder="Contoh: Pengajuan Validasi KKPR"
                                                        value="{{ $row->ruang_lingkup }}" name="ruang_lingkup[]"
                                                        type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <button type="button" class="btn btn-danger" id="remove-ruang-lingkup">
                                                    Hapus Ruang
                                                    Lingkup</button>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <div class="ruang-lingkup add-ruang-lingkup">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="form-group">
                                            <label class="form-label">Ruang Lingkup</label>
                                            <input class="form-control" id="role"
                                                placeholder="Contoh: Pengajuan Validasi KKPR" name="ruang_lingkup[]"
                                                type="text">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 mt-4">
                                        <button type="button" class="btn btn-primary" id="add-ruang-lingkup"> Tambah
                                            Ruang
                                            Lingkup</button>
                                    </div>
                                </div>
                            </div>
                        @endif
                        {{-- Persyaratan --}}
                        <h5 class="mb-3 mt-4">Dokumen Persyaratan</h5>
                        @if ($data->persyaratanPenawaran->isNotEmpty())
                            @foreach ($data->persyaratanPenawaran as $key => $row)
                                @if ($key == 0)
                                    <div class="persyaratan add-persyaratan">
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <div class="form-group">
                                                    <label class="form-label">Persyaratan</label>
                                                    <input class="form-control" id="role"
                                                        placeholder="Contoh: KTP Pemohon" value="{{ $row->persyaratan }}"
                                                        name="persyaratan[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <button type="button" class="btn btn-primary" id="add-persyaratan">
                                                    Tambah
                                                    Persyaratan</button>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="persyaratan">
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <div class="form-group">
                                                    <label class="form-label">Persyaratan</label>
                                                    <input class="form-control" id="role"
                                                        placeholder="Contoh: KTP Pemohon" value="{{ $row->persyaratan }}"
                                                        name="persyaratan[]" type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <button type="button" class="btn btn-danger" id="remove-persyaratan">
                                                    Hapus
                                                    Persyaratan</button>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <div class="persyaratan add-persyaratan">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="form-group">
                                            <label class="form-label">Persyaratan</label>
                                            <input class="form-control" id="role" placeholder="Contoh: KTP Pemohon"
                                                name="persyaratan[]" type="text">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 mt-4">
                                        <button type="button" class="btn btn-primary" id="add-persyaratan"> Tambah
                                            Persyaratan</button>
                                    </div>
                                </div>
                            </div>
                        @endif
                        {{-- Biaya pengurusan dan waktu pelaksanaan --}}
                        <h5 class="mb-3 mt-4">Biaya Pengurusan</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Biaya Pengurusan</label>
                                    <input class="form-control" value="{{ $data->biaya }}" id="role"
                                        placeholder="Contoh: 28000000" name="biaya" type="number">
                                </div>
                            </div>
                        </div>
                        <h5 class="mb-3 mt-4">Waktu Pelaksanaan</h5>
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Waktu Pelaksanaan</label>
                                    <input class="form-control" value="{{ $data->waktu_pelaksanaan }}" id="role"
                                        placeholder="Contoh: 6 Bulan" name="waktu_pelaksanaan" type="text">
                                </div>
                            </div>
                        </div>
                        {{-- PIC --}}
                        <h5 class="mb-3 mt-4">PIC (Nama & TTD)</h5>
                        <div class="row">
                            <div class="col-lg-9">
                                <div class="form-group">
                                    <label class="form-label">PIC</label>
                                    <select name="pic" id="service" class="select2 form-control"
                                        data-init-plugin="select2">
                                        <option value="">
                                            Pilih
                                            PIC
                                        </option>
                                        @foreach ($pic as $row)
                                            <option value="{{ $row->id }}"
                                                {{ $data->user_admin_id == $row->id ? 'selected' : '' }}>
                                                {{ $row->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        {{-- Lampiran Penawaran --}}
                        <h5 class="mb-3 mt-4">Lampiran Penawaran</h5>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Tanggal</label>
                                    <input class="form-control" value="{{ $data->tgl_lampiran }}" name="tgl_lampiran"
                                        id="role" onclick="this.showPicker()" type="date">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Tanggal Berlaku</label>
                                    <input class="form-control" value="{{ $data->tgl_berlaku }}" name="tgl_berlaku"
                                        id="role" onclick="this.showPicker()" type="date">
                                </div>
                            </div>
                        </div>
                        <div class="add-kategori-proses">
                            @if ($data->kategoriProsesPenawaran->isNotEmpty())
                                @foreach ($data->kategoriProsesPenawaran as $key => $row)
                                    @if ($key == 0)
                                        <div class="kategori-proses">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label class="form-label">Kategori Proses</label>
                                                        <input class="form-control" placeholder="Contoh: Gambar"
                                                            name="kategori_proses[{{ $key }}]"
                                                            value="{{ $row->kategori }}" id="role" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="add-proses">
                                                @foreach ($row->prosesPenawaran as $key2 => $proses)
                                                    @if ($key2 == 0)
                                                        <div class="proses">
                                                            <div class="row">
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Proses</label>
                                                                        <input type="text"
                                                                            name="proses[{{ $key }}][]"
                                                                            class="form-control kategori-input-proses"
                                                                            placeholder="Contoh: Denah Bangunan"
                                                                            value="{{ $proses->proses }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Volume</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="Volume"
                                                                            name="volume[{{ $key }}][]"
                                                                            value="{{ $proses->volume }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Satuan</label>
                                                                        <select
                                                                            name="satuan_proses[{{ $key }}][]"
                                                                            id="" class="form-control">
                                                                            <option value="">Pilih Satuan</option>
                                                                            <option value="m2"
                                                                                {{ $proses->satuan == 'm2' ? 'selected' : '' }}>
                                                                                m2
                                                                            </option>
                                                                            <option value="Ls"
                                                                                {{ $proses->satuan == 'Ls' ? 'selected' : '' }}>
                                                                                Ls
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Harga</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="1000000"
                                                                            name="harga[{{ $key }}][]"
                                                                            value="{{ $proses->harga }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-1 mt-4">
                                                                    <button type="button" data-row="{{ $key }}"
                                                                        onclick="addProses(this)"
                                                                        class="btn btn-primary">Tambah
                                                                        Proses</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="proses">
                                                            <div class="row">
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Proses</label>
                                                                        <input type="text"
                                                                            name="proses[{{ $key }}][]"
                                                                            class="form-control kategori-input-proses"
                                                                            placeholder="Contoh: Denah Bangunan"
                                                                            value="{{ $proses->proses }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Volume</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="Volume"
                                                                            name="volume[{{ $key }}][]"
                                                                            value="{{ $proses->volume }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Satuan</label>
                                                                        <select
                                                                            name="satuan_proses[{{ $key }}][]"
                                                                            id="" class="form-control">
                                                                            <option value="">Pilih Satuan</option>
                                                                            <option value="m2"
                                                                                {{ $proses->satuan == 'm2' ? 'selected' : '' }}>
                                                                                m2
                                                                            </option>
                                                                            <option value="Ls"
                                                                                {{ $proses->satuan == 'Ls' ? 'selected' : '' }}>
                                                                                Ls
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Harga</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="1000000"
                                                                            name="harga[{{ $key }}][]"
                                                                            value="{{ $proses->harga }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-1 mt-4">
                                                                    <button type="button" onclick="removeProses(this)"
                                                                        class="btn btn-danger">Hapus
                                                                        Proses</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                            <button class="btn btn-primary btn-add-kategori-proses"
                                                onclick="addKategoriProses(this)" type="button">Tambah Kategori
                                                Proses</button>
                                        </div>
                                    @else
                                        <div class="kategori-proses mt-4">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label class="form-label">Kategori Proses</label>
                                                        <input class="form-control" placeholder="Contoh: Gambar"
                                                            name="kategori_proses[{{ $key }}]"
                                                            value="{{ $row->kategori }}" id="role" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="add-proses">
                                                @foreach ($row->prosesPenawaran as $key2 => $proses)
                                                    @if ($key2 == 0)
                                                        <div class="proses">
                                                            <div class="row">
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Proses</label>
                                                                        <input type="text"
                                                                            name="proses[{{ $key }}][]"
                                                                            class="form-control kategori-input-proses"
                                                                            placeholder="Contoh: Denah Bangunan"
                                                                            value="{{ $proses->proses }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Volume</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="Volume"
                                                                            name="volume[{{ $key }}][]"
                                                                            value="{{ $proses->volume }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Satuan</label>
                                                                        <select
                                                                            name="satuan_proses[{{ $key }}][]"
                                                                            id="" class="form-control">
                                                                            <option value="">Pilih Satuan</option>
                                                                            <option value="m2"
                                                                                {{ $proses->satuan == 'm2' ? 'selected' : '' }}>
                                                                                m2
                                                                            </option>
                                                                            <option value="Ls"
                                                                                {{ $proses->satuan == 'Ls' ? 'selected' : '' }}>
                                                                                Ls
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Harga</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="1000000"
                                                                            name="harga[{{ $key }}][]"
                                                                            value="{{ $proses->harga }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-1 mt-4">
                                                                    <button type="button" data-row="{{ $key }}"
                                                                        onclick="addProses(this)"
                                                                        class="btn btn-primary">Tambah
                                                                        Proses</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="proses">
                                                            <div class="row">
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Proses</label>
                                                                        <input type="text"
                                                                            name="proses[{{ $key }}][]"
                                                                            class="form-control kategori-input-proses"
                                                                            placeholder="Contoh: Denah Bangunan"
                                                                            value="{{ $proses->proses }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Volume</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="Volume"
                                                                            name="volume[{{ $key }}][]"
                                                                            value="{{ $proses->volume }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Satuan</label>
                                                                        <select
                                                                            name="satuan_proses[{{ $key }}][]"
                                                                            id="" class="form-control">
                                                                            <option value="">Pilih Satuan</option>
                                                                            <option value="m2"
                                                                                {{ $proses->satuan == 'm2' ? 'selected' : '' }}>
                                                                                m2
                                                                            </option>
                                                                            <option value="Ls"
                                                                                {{ $proses->satuan == 'Ls' ? 'selected' : '' }}>
                                                                                Ls
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <div class="form-group">
                                                                        <label for=""
                                                                            class="form-label">Harga</label>
                                                                        <input type="number" class="form-control"
                                                                            placeholder="1000000"
                                                                            name="harga[{{ $key }}][]"
                                                                            value="{{ $proses->harga }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-1 mt-4">
                                                                    <button type="button" onclick="removeProses(this)"
                                                                        class="btn btn-danger">Hapus
                                                                        Proses</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                            <button class="btn btn-danger btn-remove-kategori-proses"
                                                onclick="removeKategoriProses(this)" type="button">Hapus
                                                Kategori Proses</button>
                                        </div>
                                    @endif
                                @endforeach
                            @else
                                <div class="kategori-proses">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label">Kategori Proses</label>
                                                <input class="form-control" placeholder="Contoh: Gambar"
                                                    name="kategori_proses[0]" id="role" type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="add-proses">
                                        <div class="proses">
                                            <div class="row">
                                                <div class="col-lg-2">
                                                    <div class="form-group">
                                                        <label for="" class="form-label">Proses</label>
                                                        <input type="text" name="proses[0][]"
                                                            class="form-control kategori-input-proses"
                                                            placeholder="Contoh: Denah Bangunan">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2">
                                                    <div class="form-group">
                                                        <label for="" class="form-label">Volume</label>
                                                        <input type="number" class="form-control" placeholder="Volume"
                                                            name="volume[0][]">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2">
                                                    <div class="form-group">
                                                        <label class="form-label">Satuan</label>
                                                        <select name="satuan_proses[0][]" id=""
                                                            class="form-control">
                                                            <option value="">Pilih Satuan</option>
                                                            <option value="m2">m2</option>
                                                            <option value="Ls">Ls</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2">
                                                    <div class="form-group">
                                                        <label for="" class="form-label">Harga</label>
                                                        <input type="number" class="form-control" placeholder="1000000"
                                                            name="harga[0][]">
                                                    </div>
                                                </div>
                                                <div class="col-lg-1 mt-4">
                                                    <button type="button" data-row="0" onclick="addProses(this)"
                                                        class="btn btn-primary">Tambah Proses</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-primary btn-add-kategori-proses" onclick="addKategoriProses(this)"
                                    type="button">Tambah Kategori Proses</button>
                            @endif
                        </div>
                        <div class="row mt-5">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Biaya Lain-Lain</label>
                                    <input class="form-control" id="role" placeholder="Biaya Lain-Lain"
                                        name="biaya_lain" value="{{ $data->biaya_lain }}" type="number">
                                </div>
                            </div>
                        </div>
                        {{-- Tahapan Pembayaran --}}
                        <h5 class="mb-3 mt-4">Tahapan Pembayaran</h5>
                        <div class="add-pembayaran mt-3">
                            @if ($data->tahapPembayaran->isNotEmpty())
                                @foreach ($data->tahapPembayaran as $key => $row)
                                    @if ($key == 0)
                                        <div class="pembayaran">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label class="form-label">Tahap Pembayaran</label>
                                                        <input class="form-control" id="role"
                                                            value="Tahap Pembayaran 1" disabled type="text">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label class="form-label">Jumlah (%)</label>
                                                        <input class="form-control" id="role" placeholder="Jumlah"
                                                            max="100" name="jumlah[]" value="{{ $row->persen }}"
                                                            type="number">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label class="form-label">Pada Saat</label>
                                                        <input class="form-control" value="{{ $row->pada_saat }}"
                                                            id="role" name="pada_saat[]" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-primary" id="add-pembayaran">Tambah
                                                Pembayaran</button>
                                        </div>
                                    @else
                                        <div class="pembayaran">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label class="form-label">Tahap Pembayaran</label>
                                                        <input class="form-control" id="role"
                                                            value="Tahap Pembayaran {{ $key + 1 }}" disabled
                                                            type="text">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label class="form-label">Jumlah (%)</label>
                                                        <input class="form-control" id="role" placeholder="Jumlah"
                                                            max="100" name="jumlah[]" value="{{ $row->persen }}"
                                                            type="number">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label class="form-label">Pada Saat</label>
                                                        <input class="form-control" value="{{ $row->pada_saat }}"
                                                            id="role" name="pada_saat[]" type="text">
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger" id="remove"> Hapus
                                                Pembayaran</button>
                                        </div>
                                    @endif
                                @endforeach
                            @else
                                <div class="pembayaran">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label class="form-label">Tahap Pembayaran</label>
                                                <input class="form-control" id="role" value="Tahap Pembayaran 1"
                                                    disabled type="text">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label class="form-label">Jumlah (%)</label>
                                                <input class="form-control" id="role" placeholder="Jumlah"
                                                    max="100" name="jumlah[]" type="number">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label class="form-label">Pada Saat</label>
                                                <input class="form-control" id="role" name="pada_saat[]"
                                                    type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary" id="add-pembayaran">Tambah
                                        Pembayaran</button>
                                </div>
                            @endif
                        </div>
                        {{-- Catatan --}}
                        <h5 class="mb-3 mt-4">Catatan Penawaran</h5>
                        @if ($data->catatanPenawaran->isNotEmpty())
                            @foreach ($data->catatanPenawaran as $key => $row)
                                @if ($key == 0)
                                    <div class="catatan add-catatan">
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <div class="form-group">
                                                    <label class="form-label">Catatan</label>
                                                    <input class="form-control" id="role"
                                                        placeholder="Catatan Penawaran" name="catatan[]"
                                                        value="{{ $row->catatan }}" type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <button type="button" class="btn btn-primary" id="add-catatan"> Tambah
                                                    Catatan</button>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="catatan">
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <div class="form-group">
                                                    <label class="form-label">Catatan</label>
                                                    <input class="form-control" id="role"
                                                        placeholder="Catatan Penawaran" name="catatan[]"
                                                        value="{{ $row->catatan }}" type="text">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <button type="button" class="btn btn-danger" id="remove-catatan"> Hapus
                                                    Catatan</button>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <div class="catatan add-catatan">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="form-group">
                                            <label class="form-label">Catatan</label>
                                            <input class="form-control" id="role" placeholder="Catatan Penawaran"
                                                name="catatan[]" type="text">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 mt-4">
                                        <button type="button" class="btn btn-primary" id="add-catatan"> Tambah
                                            Catatan</button>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="form-actions">
                            <div class="pull-right">
                                <button class="btn btn-success btn-cons" type="submit"><i
                                        class="icon-ok"></i>Simpan</button>
                                <button type="reset" class="btn btn-warning btn-cons">Reset</button>
                                <a href="{{ route('penawaran.index') }}" class="btn btn-danger btn-cons">Kembali</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Tahap Pembayaran --}}
    <div class="d-none new-tahap-pembayaran">
        <div class="pembayaran mt-4">
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label class="form-label">Tahap Pembayaran</label>
                        <input class="form-control tahap" disabled type="text">
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label class="form-label">Jumlah (%)</label>
                        <input class="form-control jml-pembayaran" max="100" disabled id="role"
                            placeholder="Jumlah" name="jumlah[]" type="number">
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label class="form-label">Pada Saat</label>
                        <input class="form-control pada-saat" disabled id="role" name="pada_saat[]" type="text">
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-danger" id="remove"> Hapus
                Pembayaran</button>
        </div>
    </div>

    {{-- Ruang Lingkup --}}
    <div class="d-none new-ruang-lingkup">
        <div class="ruang-lingkup">
            <div class="row">
                <div class="col-lg-8">
                    <div class="form-group">
                        <label class="form-label">Ruang Lingkup</label>
                        <input class="form-control input-ruang-lingkup" id="role"
                            placeholder="Contoh: Pengajuan Validasi KKPR" name="ruang_lingkup[]" disabled type="text">
                    </div>
                </div>
                <div class="col-lg-4 mt-4">
                    <button type="button" class="btn btn-danger" id="remove-ruang-lingkup"> Hapus Ruang
                        Lingkup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Persyaratan --}}
    <div class="d-none new-persyaratan">
        <div class="persyaratan">
            <div class="row">
                <div class="col-lg-8">
                    <div class="form-group">
                        <label class="form-label">Persyaratan</label>
                        <input class="form-control input-persyaratan" id="role" placeholder="Contoh: KTP Pemohon"
                            name="persyaratan[]" disabled type="text">
                    </div>
                </div>
                <div class="col-lg-4 mt-4">
                    <button type="button" class="btn btn-danger" id="remove-persyaratan"> Hapus Persyaratan</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Kategori Proses --}}
    <div class="d-none new-kategori-proses">
        <div class="kategori-proses">
            <div class="row mt-3">
                <div class="col-lg-5">
                    <div class="form-group">
                        <label class="form-label">Kategori Proses</label>
                        <input class="form-control input-kategori-proses" disabled type="text"
                            placeholder="Contoh: Gambar">
                    </div>
                </div>
            </div>
            <div class="proses">
                <div class="add-proses">
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="" class="form-label">Proses</label>
                                <input type="text" disabled class="form-control kategori-input-proses"
                                    placeholder="Contoh: Denah Bangunan">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="" class="form-label">Volume</label>
                                <input type="number" disabled class="form-control kategori-input-volume"
                                    placeholder="Volume">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label class="form-label">Satuan</label>
                                <select id="" disabled class="form-control kategori-input-satuan">
                                    <option value="">Pilih Satuan</option>
                                    <option value="m2">m2</option>
                                    <option value="Ls">Ls</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="" class="form-label">Harga</label>
                                <input type="number" disabled class="form-control kategori-input-harga"
                                    placeholder="1000000">
                            </div>
                        </div>
                        <div class="col-lg-1 mt-4">
                            <button type="button" onclick="addProses(this)"
                                class="btn btn-primary btn-add-proses">Tambah
                                Proses</button>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" class="total-row-proses-input" value="1" disabled>
            <button class="btn btn-danger btn-remove-kategori-proses" onclick="removeKategoriProses(this)"
                type="button">Hapus
                Kategori Proses</button>
        </div>
    </div>

    {{-- Proses --}}
    <div class="d-none new-proses">
        <div class="proses">
            <div class="row">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label for="" class="form-label">Proses</label>
                            <input type="text" class="form-control input-proses" placeholder="Contoh: Denah Bangunan">
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label for="" class="form-label">Volume</label>
                            <input type="number" class="form-control input-volume" placeholder="Volume">
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label class="form-label">Satuan</label>
                            <select id="" class="form-control input-satuan">
                                <option value="">Pilih Satuan</option>
                                <option value="m2">m2</option>
                                <option value="Ls">Ls</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label for="" class="form-label">Harga</label>
                            <input type="number" class="form-control input-harga" placeholder="1000000">
                        </div>
                    </div>
                    <div class="col-lg-1 mt-4">
                        <button type="button" onclick="removeProses(this)" class="btn btn-danger">Hapus
                            Proses</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Catatan --}}
    <div class="d-none new-catatan">
        <div class="catatan">
            <div class="row">
                <div class="col-lg-8">
                    <div class="form-group">
                        <label class="form-label">Catatan</label>
                        <input class="form-control input-catatan" id="role" placeholder="Catatan Penawaran"
                            name="catatan[]" disabled type="text">
                    </div>
                </div>
                <div class="col-lg-4 mt-4">
                    <button type="button" class="btn btn-danger" id="remove-catatan"> Hapus Catatan</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('addon-script')
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    <script>
        $(".form-penawaran").validate({
            rules: {
                nomor_surat: {
                    required: true
                },
                hal: {
                    required: true
                },
                kepada: {
                    required: true
                },
                layanan: {
                    required: true
                },
                fungsi_penawaran: {
                    required: true
                },
                lokasi: {
                    required: true
                },
                kecamatan: {
                    required: true
                },
                kabupaten: {
                    required: true
                },
                luas: {
                    required: true
                },
                satuan: {
                    required: true
                },
                'ruang_lingkup[]': {
                    required: true
                },
                'persyaratan[]': {
                    required: true
                },
                biaya: {
                    required: true
                },
                waktu_pelaksanaan: {
                    required: true
                },
                pic: {
                    required: true
                },
                tgl_lampiran: {
                    required: true
                },
                tgl_berlaku: {
                    required: true
                },
                'kategori_proses[0]': {
                    required: true
                },
                'proses[0][]': {
                    required: true
                },
                'volume[0][]': {
                    required: true
                },
                'satuan_proses[0][]': {
                    required: true
                },
                'harga[0][]': {
                    required: true
                },
                'jumlah[]': {
                    required: true
                },
                'pada_saat[]': {
                    required: true
                },
            }
        });
    </script>
    <script>
        var countKategoriProses = "{!! $countKategoriProses !!}";
        var countPembayaran = "{{ $countPembayaran }}";

        function addKategoriProses(e) {
            countKategoriProses++;
            let elementInputKategoriProses = $(".new-kategori-proses").find(".input-kategori-proses");
            let elementInputProses = $(".new-kategori-proses").find(".kategori-input-proses");
            let elementInputVolume = $(".new-kategori-proses").find(".kategori-input-volume");
            let elementInputSatuan = $(".new-kategori-proses").find(".kategori-input-satuan");
            let elementInputHarga = $(".new-kategori-proses").find(".kategori-input-harga");
            let elementInputTotalRowProses = $(".new-kategori-proses").find(".total-row-proses-input");
            let btnAddProses = $(".new-kategori-proses").find(".btn-add-proses");

            btnAddProses.attr("data-row", countKategoriProses);

            elementInputKategoriProses.attr("name", `kategori_proses[${countKategoriProses}]`);
            elementInputKategoriProses.removeAttr("disabled");

            elementInputProses.attr("name", `proses[${countKategoriProses}][]`);
            elementInputProses.removeAttr("disabled");

            elementInputVolume.attr("name", `volume[${countKategoriProses}][]`);
            elementInputVolume.removeAttr("disabled");

            elementInputSatuan.attr("name", `satuan_proses[${countKategoriProses}][]`);
            elementInputSatuan.removeAttr("disabled");

            elementInputHarga.attr("name", `harga[${countKategoriProses}][]`);
            elementInputHarga.removeAttr("disabled");

            btnAddProses.data("row", countKategoriProses);

            let html = $(".new-kategori-proses").html();
            $(".add-kategori-proses").append(html);
        }

        function removeKategoriProses(e) {
            countKategoriProses--;
            $(e).parents(".kategori-proses").remove();
        }

        function addProses(e) {
            let elementInputProses = $(".new-proses").find(".input-proses");
            let elementInputVolume = $(".new-proses").find(".input-volume");
            let elementInputSatuan = $(".new-proses").find(".input-satuan");
            let elementInputHarga = $(".new-proses").find(".input-harga");
            let dataRow = $(e).data("row");

            elementInputProses.attr("name", `proses[${dataRow}][]`);
            elementInputProses.removeAttr("disabled");

            elementInputVolume.attr("name", `volume[${dataRow}][]`);
            elementInputVolume.removeAttr("disabled");

            elementInputSatuan.attr("name", `satuan_proses[${dataRow}][]`);
            elementInputSatuan.removeAttr("disabled");

            elementInputHarga.attr("name", `harga[${dataRow}][]`);
            elementInputHarga.removeAttr("disabled");

            let html = $(".new-proses").html();
            $(e).parents(".add-proses").append(html);
        }

        function removeProses(e) {
            $(e).parents(".proses").remove();
        }

        $("#add-ruang-lingkup").click(function() {
            $(".input-ruang-lingkup").removeAttr("disabled");
            let html = $(".new-ruang-lingkup").html();
            $(".add-ruang-lingkup").after(html);
        });

        $("body").on("click", "#remove-ruang-lingkup", function() {
            $(this).parents(".ruang-lingkup").remove();
        });

        $("#add-persyaratan").click(function() {
            $(".input-persyaratan").removeAttr("disabled");
            let html = $(".new-persyaratan").html();
            $(".add-persyaratan").after(html);
        });

        $("body").on("click", "#remove-persyaratan", function() {
            $(this).parents(".persyaratan").remove();
        });

        $("#add-catatan").click(function() {
            $(".input-catatan").removeAttr("disabled");
            let html = $(".new-catatan").html();
            $(".add-catatan").after(html);
        });

        $("body").on("click", "#remove-catatan", function() {
            $(this).parents(".catatan").remove();
        });

        // Jumlah tahap pembayaran
        // count === 0 ? count = 1 : count;

        // 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);
        //     }
        // }
        $("#add-pembayaran").click(function() {
            countPembayaran === 0 ? countPembayaran = 1 : countPembayaran++;
            $(".new-tahap-pembayaran").find(".tahap").attr("value", "Tahap Pembayaran " + countPembayaran);
            $(".jml-pembayaran").removeAttr("disabled");
            $(".pada-saat").removeAttr("disabled");
            var html = $(".new-tahap-pembayaran").html();
            $(".add-pembayaran").append(html);
        });

        // // saat tombol remove dklik control group akan dihapus
        $("body").on("click", "#remove", function() {
            countPembayaran === 0 ? countPembayaran = 1 : countPembayaran--;
            $(this).parents(".pembayaran").remove();
        });
    </script>
@endpush