@extends('layouts.app')

@section('title', 'Penawaran')

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


@section('title-section', 'Tambah 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.store') }}" method="POST" autocomplete="off" class="form-penawaran"
                        id="roles-form">
                        @csrf
                        {{-- 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" placeholder="Nomor Surat Penawaran" name="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" placeholder="Contoh: Penawaran Pengurusan SLF Rumah Tinggal"
                                        name="hal" type="text">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Kepada</label>
                                    <input class="form-control" placeholder="Bapak John" name="kepada" type="text">
                                </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 $data)
                                            <option value="{{ $data->id }}">
                                                {{ $data->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" 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" 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" type="text">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Kabupaten</label>
                                    <input class="form-control" 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" 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">m2</option>
                                        <option value="Ls">Ls</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        {{-- Ruang Lingkup --}}
                        <h5 class="mb-3 mt-4">Ruang Lingkup Pekerjaan</h5>
                        <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>
                        {{-- Persyaratan --}}
                        <h5 class="mb-3 mt-4">Dokumen Persyaratan</h5>
                        <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>
                        {{-- 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" 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" 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="pic" class="select2 form-control"
                                        data-init-plugin="select2">
                                        <option>Pilih PIC</option>
                                        @foreach ($pic as $data)
                                            <option value="{{ $data->id }}">
                                                {{ $data->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" 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" name="tgl_berlaku" id="role"
                                        onclick="this.showPicker()" type="date">
                                </div>
                            </div>
                        </div>
                        <div class="add-kategori-proses">
                            <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>
                        </div>
                        <div class="row">
                            <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" type="number">
                                </div>
                            </div>
                        </div>
                        {{-- Tahapan Pembayaran --}}
                        <h5 class="mb-3 mt-4">Tahapan Pembayaran</h5>
                        <div class="add-pembayaran mt-3">
                            <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>
                        </div>
                        {{-- Catatan --}}
                        <h5 class="mb-3 mt-4">Catatan Penawaran</h5>
                        <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>
                        <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 = 0;

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

        var tahap = 1;
        $("#add-pembayaran").click(function() {
            tahap++;
            $(".new-tahap-pembayaran").find(".tahap").attr("value", "Tahap Pembayaran " + tahap);
            $(".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() {
            tahap--;
            $(this).parents(".pembayaran").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();
        });
    </script>
@endpush