@extends('layouts.app')
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="float-left">Assign User Baru</h1>
            </div>
        </div>
    </div>
</section>

<section class="content">

    <!-- Default box -->
    <div class="card" id="cari_data">
        <div class="card-body">
            @include('layouts.success_error')

            <form method="post" autocomplete="off" action="{{url('api/assign-user/find_data')}}" id="idForm">
                @csrf
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="isi">NIP</label>
                            <input type="text" name="nip" class="form-control" id="cari_nip" placeholder="Masukan NIP">
                        </div>
                        <div class="form-group">
                            <label for="isi">Nomor Surat Tugas</label>
                            <input type="text" name="st" class="form-control" id="cari_st" placeholder="Masukan Nomor Surat Tugas">
                        </div>
                    </div>
                    <div class="col-sm-12 d-none" id="iferror">
                        <div class="alert alert-danger">
                            <h5><i class="icon fas fa-ban"></i> Error!</h5>
                            <span id="status_message"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <button type="submit" class="btn btn-primary float-right">Cek Data</button>
                </div>
            </form>

        </div>
    </div>

    <div class="card d-none" id="hasil_data">
        <div class="card-header">
            <h3 class="card-title mb-0">
                <strong>Tambahkan User ini ke surat tugas ?</strong>
            </h3>
        </div>
        <div class="card-body">

            <form method="post" autocomplete="off">
                @csrf
                <input type="hidden" name="nip" id="nip_hid" placeholder="">
                <input type="hidden" name="st" id="st_hid" placeholder="">
                <div class="row">
                    <div class="col-sm-12" id="hasil_detail">
                        <dl>
                            <dt>Nama</dt>
                            <dd>A description list is perfect for defining terms.</dd>
                            <dt>NIP</dt>
                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                            <dt>Jabatan</dt>
                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                            <dt>No Surat Tugas</dt>
                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                        </dl>
                    </div>
                </div>
                <div class="col-sm-12">
                    <button type="submit" class="btn btn-primary float-right" id="simpan_data">Ya, Tambahkan User</button>
                </div>
            </form>


        </div>
    </div>

    <!-- /.card -->

</section>
@endsection

@section('js')
<script>
    $( document ).ready(function() {

        

        $("#idForm").submit(function(e) {

            e.preventDefault(); // avoid to execute the actual submit of the form.

            var form = $(this);
            var actionUrl = form.attr('action');

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(result, status, xhr) 
                {
                    $('#cari_data').addClass('d-none');
                    $('#hasil_data').removeClass('d-none');

                    $('#nip_hid').val( $('#cari_nip').val() );
                    $('#st_hid').val( $('#cari_st').val() );

                    $('#hasil_detail').html(
                        `
                        <dl>
                            <dt>Nama</dt>
                            <dd>`+result.peg.gelar_depan+` `+result.peg.nama_lengkap+` `+result.peg.gelar_belakang+`</dd>
                            <dt>NIP</dt>
                            <dd>`+result.peg.nip+`</dd>
                            <dt>Jabatan</dt>
                            <dd>`+result.peg.jabatan+`</dd>
                            <dt>No Surat Tugas</dt>
                            <dd>`+result.st.nomor_surat+`</dd>
                        </dl>
                        `
                    );

                    

                    console.log(result); // show response from the php script.
                },
                error: function (xhr, status, error) 
                {
                    console.log(jQuery.parseJSON(xhr.responseText).message);
                    console.log(status);
                    console.log(error);
                    $('#status_message').html(jQuery.parseJSON(xhr.responseText).message);
                    $('#iferror').removeClass('d-none');
                }
            });

        });

      

    });
    
</script>
@endsection