@extends('siswa.master')
@section('title', 'Data Alamat Siswa')
@section('content')
    <div class="main-container">
        <div class="pd-ltr-20 xs-pd-20-10">
            <div class="min-height-200px">
                <div class="page-header">
                    <div class="title">
                        <h4>Data Alamat Siswa</h4>
                    </div>
                    <nav aria-label="breadcrumb" role="navigation">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active" aria-current="page">
                                Data Alamat Siswa
                            </li>
                        </ol>
                    </nav>
                </div>
                <div class="alert alert-info">
                    Anda Dapat Mengubah <b>DATA ALAMAT CALON SISWA</b> Jika Masih Terdapat Kesalahan Input
                </div>
                <div class="card">
                    <form id="updateForm">
                        @csrf
                        <section>
                            <div class="card-header bg-success text-white">
                                DATA ALAMAT
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Pilih Provinsi <span class="text-danger">*</span></label>
                                    <select name="provinsi" required class="form-control" id="provinsi">
                                        <option value="">- PILIH PROVINSI -</option>
                                        @foreach ($provinsi as $p)
                                            <option {{ $p->name == $data_alamat?->provinsi ? 'selected' : '' }}
                                                value="{{ $p->name }}">{{ $p->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Pilih Kabupaten <span class="text-danger">*</span></label>
                                    <select name="kabupaten" required class="form-control" id="kabupaten">
                                        <option value="">- PILIH KABUPATEN -</option>
                                        <option value="{{ $data_alamat?->kabupaten }}" selected>-
                                            {{ $data_alamat?->kabupaten }} -
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Pilih Kecamatan <span class="text-danger">*</span></label>
                                    <select name="kecamatan" required class="form-control" id="kecamatan">
                                        <option value="">- PILIH KECAMATAN -</option>
                                        <option value="{{ $data_alamat?->kecamatan }}" selected>-
                                            {{ $data_alamat?->kecamatan }} -
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Pilih Kelurahan <span class="text-danger">*</span></label>
                                    <select name="kelurahan" required class="form-control" id="kelurahan">
                                        <option value="">- PILIH KELURAHAN -</option>
                                        <option value="{{ $data_alamat?->kelurahan }}" selected>-
                                            {{ $data_alamat?->kelurahan }} -
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>RT <span class="text-danger">*</span></label>
                                    <input class="form-control" type="number" name="rt" required
                                        placeholder="Masukkan RT" id="" value="{{ $data_alamat?->rt }}">
                                </div>
                                <div class="form-group">
                                    <label>RW <span class="text-danger">*</span></label>
                                    <input class="form-control" type="number" name="rw" required
                                        value="{{ $data_alamat?->rw }}" placeholder="Masukkan RW" id="">
                                </div>
                                <div class="form-group">
                                    <label>Alamat Lengkap <span class="text-danger">*</span></label>
                                    <textarea name="alamat_lengkap" class="form-control" id="" required rows="3"
                                        placeholder="Masukkan Kembali Alamat Lengkap Calon Siswa Lebih Detail">{{ $data_alamat?->alamat_lengkap }}</textarea>
                                </div>
                            </div>
                        </section>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary btn-block">
                                Update Data Alamat
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <br><br><br>
    <script>
        $('#updateForm').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: "{{ url('siswa/data-alamat') }}",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $.LoadingOverlay("show", {
                        image: "",
                        fontawesome: "fa fa-cog fa-spin"
                    });
                },
                complete: function() {
                    $.LoadingOverlay("hide", {
                        image: "",
                        fontawesome: "fa fa-cog fa-spin"
                    });
                },
                success: function(data) {
                    if (data.status) {
                        swal('Pendaftaran Diupdate', data.message, "success")
                            .then((result) => {
                                location.reload();
                            });
                    } else {
                        swal('Gagal Update', data.message, "error");
                    }
                },
                error: function(xhr, status, error) {
                    alert('Terjadi Kesalahan');
                    console.log(xhr.responseText);
                }
            });
        });

        $(document).ready(function() {
            // Laravolt Started
            $('#provinsi').change(function() {
                $('#kabupaten option[value!=""]').remove();
                $('#kecamatan option[value!=""]').remove();
                $('#kelurahan option[value!=""]').remove();
                $.ajax({
                    url: "{{ url('laravolt/kabupaten') }}",
                    type: 'GET',
                    data: {
                        'provinsi': $(this).val()
                    },
                    success: function(data) {
                        $.each(data.kabupaten, function(i, v) {
                            $("#kabupaten").append(new Option(v.name, v.name));
                        });
                    }
                });
            });
            $('#kabupaten').change(function() {
                $('#kecamatan option[value!=""]').remove();
                $('#kelurahan option[value!=""]').remove();
                $.ajax({
                    url: "{{ url('laravolt/kecamatan') }}",
                    type: 'GET',
                    data: {
                        'kabupaten': $(this).val()
                    },
                    success: function(data) {
                        $.each(data.kecamatan, function(i, v) {
                            $("#kecamatan").append(new Option(v.name, v.name));
                        });
                    }
                });
            });
            $('#kecamatan').change(function() {
                $('#kelurahan option[value!=""]').remove();
                $.ajax({
                    url: "{{ url('laravolt/kelurahan') }}",
                    type: 'GET',
                    data: {
                        'kecamatan': $(this).val()
                    },
                    success: function(data) {
                        $.each(data.kelurahan, function(i, v) {
                            $("#kelurahan").append(new Option(v.name, v.name));
                        });
                    }
                });
            });
        });
    </script>
@endsection