@extends('layouts.app')

@section('title', 'Edit Surat')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet"
        href="{{ asset('library/bootstrap-daterangepicker/daterangepicker.css') }}">
    <link rel="stylesheet"
        href="{{ asset('library/select2/dist/css/select2.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('library/selectric/public/selectric.css') }}">
@endpush

@section('main')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Edit Surat</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                    <div class="breadcrumb-item"><a href="{{ url('surat/menu/pbb-baru') }}">Surat</a></div>
                    <div class="breadcrumb-item">Edit</div>
                </div>
            </div>
            <div class="section-body">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <form action="{{ route('surat.update', $surat->slug) }}" method="post" class="custom-validation" enctype="multipart/form-data">
                                    @csrf
                                    @method('POST')
                                <div class="form-row">
                                    <input type="hidden" class="form-control" name="id" id="id" value="{{ $data->id }}" />
                                    <div class="form-group col-md-6">
                                        <label>NIK</label>
                                        <select name="penduduk_id" class="form-control select2" required>
                                            <option value="" selected disabled>--- Pilih ---</option>
                                            @foreach ($penduduk as $item )
                                            <option value="{{ $item['id'] }}" {{ $item['id'] == $data->penduduk_id ? 'selected' : '' }}>{{ $item['nik'] }} - {{ $item['nama'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>Tanggal Surat</label>
                                        <input type="text" name="tgl_surat" value="{{ $data->tgl_surat }}" class="form-control datepicker" required>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="no_surat">Nomor Surat</label>
                                        <input type="text" value="{{ $data->no_surat }}" name="no_surat" placeholder="No. Surat" class="form-control" required>
                                    </div>
                                </div>                                
                                <div class="form-row">
                                    <div class="form-group col-md-4">
                                        <label class='form-label'>Luas Tanah</label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><u>+</u></span>
                                            <input type="number" name='luas_tanah' required placeholder="Luas Tanah" class='form-control' value="{{ $data_surat->luas_tanah ?? '' }}">
                                            <span class="input-group-text">m<sup>2</sup></span>
                                        </div>
                                    </div>
                                </div>
                                <div class='form-row'>
                                    <div class="col-md-12 mb-4">
                                        <label class='form-label'>Alamat Tanah</label>
                                        <input type="text" value="{{ $data_surat->alamat_tanah ?? '' }}" name="alamat_tanah" placeholder="Alamat Tanah" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                                <a href="{{ url()->previous() }}" class="btn btn-danger">Batal</a>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <!-- JS Libraies -->
    <script src="{{ asset('library/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('library/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('library/selectric/public/jquery.selectric.min.js') }}"></script>

    <!-- Page Specific JS File -->
    <script src="{{ asset('js/page/forms-advanced-forms.js') }}"></script>
@endpush


@push('scripts')
    <script>
        $(function () {
            var table = $('#doms').DataTable({
                            processing: true,
                            serverSide: true,
                            ajax: '{{ route('surat.data', $surat->slug) }}', // memanggil route yang menampilkan data json
                            columns:
                            [
                                { data: 'DT_RowIndex',  orderable: false, searchable: false },
                                { data: 'nik', name: 'nik', orderable: true, searchable: true },
                                { data: 'nama', name: 'nama' },
                                { data: 'kelurahan', name: 'kelurahan' },
                                { data: 'tgl_surat', name: 'tgl_surat' },
                                { data: 'action', name: 'action' },
                            ]
                        });

            $('#doms tbody').on('click', 'button', table, function () {
                const data = table.row($(this).parents('tr')).data();
                var url = "{{ url('surat/delete/'.$surat->slug) }}" + "/" + data.id;
                swal({
                        title: 'Anda Yakin?',
                        text: 'Jika ya, maka data ini akan dihapus',
                        icon: 'warning',
                        buttons: true, 
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            window.location.href = url;
                            swal('Data berhasil dihapus! :)', {
                                icon: 'success',
                            });
                        } else {

                        }
                });
            });
        });

    </script>

@if (session('success'))
<script>
    $(document).ready(function(){
        iziToast.success({
        title: 'Success!',
        message: '{{ session('success') }}',
        position: 'topRight'
    });
    });
</script>
@endif
<script>
    $('#mySelect2').select2({
        dropdownParent: $('#createModal')
    });
</script>

<script src="{{ asset('library/datatables/media/js/jquery.dataTables.min.js') }}"></script>
{{-- <script src="https://code.jquery.com/jquery.js"></script> --}}
{{-- <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> --}}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="{{ asset('library/select2/dist/js/select2.full.min.js') }}"></script>

<script src="{{ asset('library/jquery-ui-dist/jquery-ui.min.js') }}"></script>
<script src="{{ asset('library/prismjs/prism.js') }}"></script>
<!-- Page Specific JS File -->


@endpush