@extends('template.content')

@section('title', 'Tambah Pelanggan')

@push('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.js-tile-3d/dist/L.Tile3D.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    {{-- Jika menggunakan Bootstrap 5, disarankan juga menggunakan tema Select2 untuk Bootstrap: --}}
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
@endpush

@push('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#pppoe').select2({
                // Terapkan tema Bootstrap 5 jika Anda menyertakannya di langkah 2
                theme: "bootstrap-5",
                width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
                placeholder: "-- Pilih PPPoE --", // Placeholder akan menggantikan opsi kosong
                allowClear: true // Opsi untuk membersihkan pilihan
            });

            // Catatan: Karena menggunakan form-floating, kita perlu menyesuaikan label setelah inisialisasi Select2
            // Namun, Select2 dan form-floating Bootstrap seringkali tidak kompatibel secara default. 
            // Jika tampilan label form-floating menjadi aneh, Anda mungkin perlu menghapus div 'form-floating' 
            // dan hanya menggunakan div 'mb-3' biasa.
        });
    </script>

    <script>
        $(document).ready(function () {

            const map = L.map("map", {
                center: [-5.670057576717042, 122.78804717460979], // Contoh koordinat Jakarta
                zoom: 14, // Atur zoom awal menjadi lebih besar
                minZoom: 2,
                maxZoom: 20, // Atur maxZoom sesuai ketersediaan data ubin
            });


            const tiles = L.tileLayer("https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}", {
                maxZoom: 20,
                subdomains: ["mt0", "mt1", "mt2", "mt3"],
            }).addTo(map);


            const popup = L.popup()
                .setLatLng([-5.670057576717042, 122.78804717460979])
                .setContent('Silahkan klik peta untuk menambahkan titik koordinat')
                .openOn(map);

            function onMapClick(e) {
                popup
                    .setLatLng(e.latlng)
                    .setContent(`Anda menambahkan titik Koordinat ${e.latlng.toString()}`)
                    .openOn(map);
                $("#maps").val(e.latlng.toString().split('(')[1].split(')')[0]);
            }

            map.on('click', onMapClick);

        });

    </script>
@endpush

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">@yield('title')</h4>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Pelanggan</a></li>
                    <li class="breadcrumb-item active">@yield('title')</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="row g-0">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <form action="{{ route('pelanggan.store') }}" method="POST">
                        @csrf

                        <h4 class="card-title">Jenis Pelanggan</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <!-- Checkbox Voucher -->
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" value="Y" id="voucher"
                                            name="voucher" {{ old('voucher') == 'Y' ? 'checked' : '' }} />
                                        <label class="form-check-label" for="voucher">Voucher</label>
                                    </div>

                                    <!-- Checkbox Rumahan -->
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" value="Y" id="rumahan"
                                            name="rumahan" {{ old('rumahan') == 'Y' ? 'checked' : '' }} />
                                        <label class="form-check-label" for="rumahan">Rumahan</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h4 class="card-title">Data Diri</h4>
                        <div class="row">

                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="tb-fname"
                                        value="{{ old('nama_pelanggan') }}" placeholder="Masukan nama lengkap"
                                        name="nama_pelanggan">
                                    <label for="tb-fname">Nama Lengkap</label>
                                    @error('nama_pelanggan')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="tb-fname" placeholder="no_hp" name="no_hp"
                                        value="{{ old('no_hp') }}">
                                    <label for="tb-fname">No HP</label>
                                    @error('no_hp')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Jenis Kelamin</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="jenis_kelamin"
                                            id="jenis_kelamin_laki" value="Laki-laki"
                                            {{ old('jenis_kelamin') == 'Laki-laki' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="jenis_kelamin_laki">Laki-laki</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="jenis_kelamin"
                                            id="jenis_kelamin_perempuan" value="Perempuan"
                                            {{ old('jenis_kelamin') == 'Perempuan' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="jenis_kelamin_perempuan">Perempuan</label>
                                    </div>
                                    @error('jenis_kelamin')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="date" class="form-control" id="tb-tanggal-pemasangan"
                                        name="tanggal_pemasangan" value="{{ old('tanggal_pemasangan') }}">
                                    <label for="tb-tanggal-pemasangan">Tanggal Pemasangan</label>
                                    @error('tanggal_pemasangan')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <h4 class="card-title">Langganan</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <select class="form-select" id="tb-select" name="wilayah">
                                        <option value="" selected disabled>Pilih Wilayah</option>
                                        @foreach ($wilayah as $wil)
                                            <option value="{{ $wil->id }}" {{ old('wilayah') == $wil->id ? "selected" : "" }}>
                                                {{ $wil->nama_wilayah }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label for="wilayah">Wilayah</label>
                                    @error('wilayah')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <select class="form-select" id="tb-select" name="paket_internet">
                                        <option value="" selected disabled>Pilih Paket Internet</option>
                                        @foreach ($paket_internet as $paket)
                                            <option value="{{ $paket->id }}"
                                                {{ old('paket_internet') == $paket->id ? "selected" : "" }}>
                                                {{ $paket->nama_paket }} |
                                                Rp. {{ number_format($paket->harga_paket, 0, ',', '.') }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label for="paket_internet">Paket Internet</label>
                                    @error('paket_internet')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="tb-kabupaten-kota" placeholder="Masukan ODP"
                                        name="odp_stasiun" value="{{ old('odp_stasiun') }}">
                                    <label for="tb-kabupaten-kota">ODP stasiun</label>
                                    @error('odp_stasiun')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <select class="form-select" id="tb-select" name="metode_pembayaran">
                                        <option value="">Pilih Metode Pembayaran</option>
                                        <option value="cash" {{ old('metode_pembayaran') == "cash" ? "selected" : "" }}>Cash
                                        </option>
                                        <option value="transfer"
                                            {{ old('metode_pembayaran') == "transfer" ? "selected" : "" }}>Transfer</option>
                                    </select>
                                    <label for="metode_pembayaran">Metode Pembayaran</label>
                                    @error('metode_pembayaran')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="biaya_pemasangan"
                                        value="{{ old('biaya_pemasangan') }}" placeholder="Masukan biaya pemasangan"
                                        name="biaya_pemasangan">
                                    <label for="tb-fname">Biaya Pemasangan</label>
                                    @error('biaya_pemasangan')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" value="{{ old('ongkos_kerja') }}"
                                        placeholder="Masukan Ongkos Kerja" name="ongkos_kerja">
                                    <label for="tb-fname">Ongkos Kerja</label>
                                    @error('ongkos_kerja')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" value="{{ old('titik_koordinat') }}"
                                        placeholder="Masukan Titik Koordinat" name="titik_koordinat" id="maps" readonly>
                                    <label for="maps">Titik Koordinat</label>
                                    @error('titik_koordinat')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <select name="pppoe" id="pppoe" class="form-control">
                                        <option value="">-- Pilih PPPoE --</option>
                                        @foreach ($pppoe as $pppoe)
                                            <option value="{{ $pppoe->id }}">{{ $pppoe->username_pppoe }}</option>
                                        @endforeach
                                    </select>
                                    @error('pppoe')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div id="map" style="height: 500px;"></div>

                            <div class="col-12">
                                <div class="d-md-flex align-items-center mt-3">
                                    <div class="ms-auto mt-3 mt-md-0">
                                        <button type="submit" class="btn btn-primary text-white">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection