@extends('layouts.admin.app',["title" => "Tambah Data Customer"])



@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Tambah Customer</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Master Data</a></div>
                <div class="breadcrumb-item"><a href="{{route('master_customer.index')}}">Customer</a></div>
                <div class="breadcrumb-item">Tambah</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12 col-md-7 col-lg-7">
                    <div class="card">
                        <div class="card-header">
                            {{-- <h4></h4> --}}
                            <h4 class="text-dark">Form Customer</h4>
                        </div>
                        <div class="card-body">
                            <form class="needs-validation" id="form_data" novalidate="">
                                @csrf
                                <div class="form-group">
                                    <label>Nama Customer </label>
                                    <input type="text" id="nama" class="form-control"
                                        placeholder="Masukan Nama Customer">
                                    <div class="invalid-feedback">Harap Isi Nama Customer
                                    </div>

                                </div>
                                <div class="form-group">
                                    <label class="form-label">Jenis Kelamin</label>
                                    <div class="selectgroup selectgroup-pills" id="jenis_kelamin">
                                        <label class="selectgroup-item">
                                            <input type="radio" name="icon-input" value="0" class="selectgroup-input"
                                                checked>
                                            <span class="selectgroup-button selectgroup-button-icon">Laki -
                                                laki<span>
                                        </label>
                                        <label class="selectgroup-item">
                                            <input type="radio" name="icon-input" value="1" class="selectgroup-input">
                                            <span class="selectgroup-button selectgroup-button-icon">Perempuan</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Nomor Telepon <a class="text-danger">(Opsional)</a></label> <input
                                        type="number" class="form-control" placeholder="0888-8888-8888" id="no_telepon">

                                </div>
                                <div class="form-group">
                                    <label>Email <a class="text-danger">(Opsional)</a> </label>
                                    <input type="email" id="email" class="form-control" placeholder="example@gmail.com">
                                </div>
                                <div class="form-group">
                                    <label>Alamat <a class="text-danger">(Opsional)</a> </label>
                                    <input type="text" class="form-control" id="alamat" placeholder="Masukan Alamat">

                                </div>

                                <div class="form-group">
                                    <button id="simpan" type="button" class="btn btn-success "><i
                                            class="fas fa-floppy-disk">
                                        </i>
                                        Simpan
                                    </button>
                                    <a href="{{route('master_customer.index')}}" class="btn btn-warning"><i
                                            class="fas fa-backward"> </i>
                                        Kembali
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
</section>
</div>
@endsection
@push('js')
<script>
    let token = '{{ $token }}';

    function simpan() {
            // e.preventDefault();
            $.ajax({
                url: '/api/customers',
                type: "Post",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: {
                    "email": $('#email').val(),
                    "user_created": {{ auth()->user()->id }},
                    "nama": $('#nama').val(),
                    "alamat": $('#alamat').val(),
                    "jenis_kelamin": $('#jenis_kelamin input[name="icon-input"]:checked').val(),
                    "no_telepon": $('#no_telepon').val()
                },
                success: function (response) {

                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        window.location.href = "{{ route('master_customer.index') }}";
                    });
                },
                error: function (responseJSON) {
                    if (responseJSON.status === 422) {
                        let errors = responseJSON.responseJSON.errors;
                        let message = '';
                        for (let field in errors) {
                            message += errors[field].join(', ') + '\n';
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            html: message.replace(/\n/g, '<br>'),
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            text: 'Silakan coba lagi',
                        });
                    }
                }
        })}
        $(document).ready(function () {
            $('#simpan').click(function (e) {
                e.preventDefault();
                const form = document.getElementById('form_data');

                if (form.checkValidity()) {
                                                       simpan();

                }else{
                        form.classList.add('was-validated');

                }
            });
        })
</script>

@endpush