@extends('admin')

@push('after-style')
<style>
    .card-body>.table>thead>tr>td,
    .card-body>.table>thead>tr>th {
        border-top-width: 0;
        text-align: center;
    }
</style>
<link rel="stylesheet" href="{{ asset('adminn/plugins/summernote/summernote-bs4.css') }}">

@endpush

@push('header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">{{ session()->get('title') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">{{ session()->get('title') }}</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><b>Tambah Instrumen</b></h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <form id="form">
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" id="name" class="form-control">
                        <div class="text-danger text-error" id="name_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label>Merk</label>
                        <input type="text" name="brand" id="brand" class="form-control">
                        <div class="text-danger text-error" id="brand_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label for="">Tarif</label>
                        <div class="row">
                            <div class="col-3">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Rp </span>
                                    </div>
                                    <input id="price" name="price" type="text" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency" class="form-control" placeholder="Tarif">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><b>/</b></span>
                                    </div>
                                    <input type="text" id="unit_1" name="unit_1" class="form-control" placeholder="Satuan">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><b>/</b></span>
                                    </div>
                                    <input type="text" id="unit_2" name="unit_2" class="form-control" placeholder="Satuan">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="content">Content</label>
                        <textarea class="textarea" name="content" id="content" placeholder="Place some text here" style="width: 100%; height: 1000px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                        </textarea>
                        <div class="text-danger text-error" id="content_error">*error</div>
                    </div>
                    <div class="form-group">
                        <label>Gambar</label>
                        <img src="#" id="preview_image" alt="" style="margin-bottom: 20px;">
                        <input type="file" name="image" id="image" class="form-control">
                        <div class="text-danger text-error" id="image_error">*error</div>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Tutup</button>
                <button type="button" id="btnSave" onclick="save();" class="btn btn-primary waves-effect waves-light">Save
                    changes</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('after-script')
<script src="{{ asset('adminn/plugins/summernote/summernote-bs4.min.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {

        // Jquery Dependency

        $("input[data-type='currency']").on({
            keyup: function() {
                formatCurrency($(this));
            },
            blur: function() {
                formatCurrency($(this), "blur");
            }
        });


        function formatNumber(n) {
            // format number 1000000 to 1,234,567
            return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ".")
        }


        function formatCurrency(input, blur) {
            // appends $ to value, validates decimal side
            // and puts cursor back in right position.

            // get input value
            var input_val = input.val();

            // don't validate empty input
            if (input_val === "") {
                return;
            }

            // original length
            var original_len = input_val.length;

            // initial caret position 
            var caret_pos = input.prop("selectionStart");

            // check for decimal
            if (input_val.indexOf(",") >= 0) {

                // get position of first decimal
                // this prevents multiple decimals from
                // being entered
                var decimal_pos = input_val.indexOf(",");

                // split number by decimal point
                var left_side = input_val.substring(0, decimal_pos);
                var right_side = input_val.substring(decimal_pos);

                // add commas to left side of number
                left_side = formatNumber(left_side);

                // validate right side
                right_side = formatNumber(right_side);

                // On blur make sure 2 numbers after decimal
                if (blur === "blur") {
                    right_side += "00";
                }

                // Limit decimal to only 2 digits
                right_side = right_side.substring(0, 2);

                // join number by .
                // input_val = "$" + left_side + "." + right_side;
                input_val = left_side + "." + right_side;

            } else {
                // no decimal entered
                // add commas to number
                // remove all non-digits
                input_val = formatNumber(input_val);
                input_val = input_val;

                // final formatting
                // if (blur === "blur") {
                //     input_val += ",00";
                // }
            }

            // send updated string to input
            input.val(input_val);

            // put caret back in the right position
            var updated_len = input_val.length;
            caret_pos = updated_len - original_len + caret_pos;
            input[0].setSelectionRange(caret_pos, caret_pos);
        }

        $('#content').summernote({
            height: "600",
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#preview_image').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#image").change(function() {
            readURL(this);
        });

        $('.text-error').empty(); // clear error string
        $('#form')[0].reset(); // reset form on modals
        $('#content').summernote('code', '');
        $('#btnSave').text('Simpan');
    });

    function save() {
        $('.text-error').empty(); // clear error string
        $('#btnSave').text('Menyimpan...'); //change button text
        $('#btnSave').attr('disabled', true); //set button disable 
        var url;

        var formData = new FormData($('#form')[0]);
        formData.append("_token", "{{ csrf_token() }}");

        $.ajax({
            url: "{{ url('/admin/instrument/create') }}",
            type: "POST",
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
                if (data.status) //if success close modal and reload ajax table
                {
                    var text = '';
                    text = 'Data Added Successfully';

                    toastr.success(text);
                    window.location.href = "{{ url('admin/instrument') }}";
                    // notification('success', 'Success', text);
                } else {
                    for (const [key, value] of Object.entries(data.message)) {
                        $('#' + key + '_error').html('*' + value);
                    }
                    $('#btnSave').text('Save');
                }

                $('#btnSave').attr('disabled', false); //set button enable 
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error adding / update data');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
                // $('#btnSave').attr('disabled', false); //set button enable 
            }
        });
    }
</script>
@endpush