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

@push('css')
<style>
    .mb-50 {
        margin-bottom: 50px !important;
    }
</style>

@endpush
@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Tambah Barang</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_barang.index')}}">Barang</a></div>
                <div class="breadcrumb-item">Tambah</div>
            </div>
        </div>

        <div class="section-body">
            <form class="needs-validation" id="form_data" novalidate="">
                @csrf
                <div class="row">
                    <div class="col-12 col-md-5 col-lg-5">
                        <div class="card">
                            <div class="card-header">
                                {{-- <h4></h4> --}}
                                <h4 class="text-dark">Form Barang</h4>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Kode Barang <a class="text-danger">(Opsional)</a></label>
                                    <input type="text" class="form-control" id="kode" placeholder="Masukan Kode Barang">

                                </div>
                                <div class="form-group">
                                    <label>Nama Barang </label>
                                    <input type="text" class="form-control" id="nama" placeholder="Masukan Nama Barang"
                                        required>
                                    <div class="invalid-feedback">Harap Isi Nama
                                    </div>
                                </div>
                                {{-- <div class="form-group">
                                    <label>Kategori<a class="text-danger">(Opsional)</a></label>
                                    <select class="form-control select2" id="select-kategori">
                                        <option value=0 disabled selected>Pilih Kategori</option>
                                        @foreach ($kategoris as $kategori)
                                        <option value="{{ $kategori->id }}">{{$kategori->nama}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Satuan</label>
                                    <select class="form-control select2" id="select-satuan" required>
                                        <option value=0 disabled selected>Pilih Satuan</option>
                                        @foreach ($satuans as $satuan)
                                        <option value="{{ $satuan->id }}">{{$satuan->nama}}</option>
                                        @endforeach
                                    </select>
                                </div> --}}
                                <div class="form-group">
                                    <label>Harga Beli </label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                RP
                                            </div>
                                        </div>
                                        <input type="text" class="form-control rupiah" id="harga_beli"
                                            placeholder="Masukan Harga Beli">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Harga Jual</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                RP
                                            </div>
                                        </div>
                                        <input type="text" class="form-control rupiah" id="harga_jual"
                                            placeholder="Masukan Harga Jual" required>
                                        <div class="invalid-feedback">Harap Isi Harga Jual
                                        </div>
                                    </div>
                                </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_barang.index')}}" class="btn btn-warning"><i
                                            class="fas fa-backward"> </i>
                                        Kembali
                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-7 col-lg-7">
                        <div class="card">
                            <div class="card-header">
                                {{-- <h4></h4> --}}
                                <h4 class="text-dark">Harga Grosir</h4>
                                {{-- <input type="radio" name="option" value="2" class="custom-switch-input" checked>
                                --}}
                                <label class="custom-switch mt-1" style="padding-left: 0 !important ">

                                    <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
                                    <span class="custom-switch-indicator"></span>
                                </label>
                            </div>
                            <div class="card-body card-grosir">
                                <div id="wrapper-grosir">
                                    <div class="grosir1 grosir">
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label>Harga Grosir</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">RP</div>
                                                    </div>
                                                    <input type="text" class="form-control rupiah harga_grosir1"
                                                        placeholder="Masukan Harga Jual Grosir">
                                                    {{-- <div class="invalid-feedback">Harap Isi Harga Grosir
                                                    </div> --}}
                                                </div>
                                            </div>

                                            <div class="form-group col-md-3">
                                                <label>Minimal Qty</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control rupiah qty_grosir1"
                                                        placeholder="Masukan Qty Minimal">
                                                    <div class="input-group-append">
                                                        <div class="input-group-text input-group-text-qty">Qty</div>
                                                    </div>
                                                    {{-- <div class="invalid-feedback">Harap Isi Qty Minimum
                                                    </div> --}}
                                                </div>
                                            </div>
                                            <div
                                                class="form-group justify-evenly  btn-grosir1 btn-grosir col-md-3  d-flex align-items-end">
                                                <button type="button" class="btn btn-primary btn-icon tambah-grosir">
                                                    <i class="fas fa-plus"></i> <span class="title-btn">Tambah</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div id="wrapper-grosir">
                                    <div class="grosir2">
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label>Harga Grosir</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">RP</div>
                                                    </div>
                                                    <input type="number" class="form-control rupiah"
                                                        placeholder="Masukan Harga Jual Grosir">
                                                </div>
                                            </div>

                                            <div class="form-group col-md-3">
                                                <label>Minimal Qty</label>
                                                <div class="input-group">
                                                    <input type="number" class="form-control rupiah"
                                                        placeholder="Masukan Qty Minimal">
                                                    <div class="input-group-append">
                                                        <div class="input-group-text">qty</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group justify-evenly col-md-3 d-flex align-items-end">
                                                <button type="button" class="btn btn-primary btn-icon tambah-grosir">
                                                    <i class="fas fa-plus"></i> <span class="title-btn">Tambah</span>
                                                </button>
                                                <button type="button" class="btn btn-danger hapus-grosir">
                                                    <i class="fas fa-trash-can"></i> <span
                                                        class="title-btn">Hapus</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}


                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
</div>
</div>
</div>
</section>
</div>
@endsection

@push('js')
<script>
    let token = '{{ $token }}';
            let x = 1;


        function simpan(data) {
            // e.preventDefault();
            $.ajax({
                url: '/api/barangs',
                type: "Post",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: data,
                success: function (response) {

                    Swal.fire({
                        icon: 'success',
                            title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        window.location.href = "{{ route('master_barang.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',
                        });
                    }
                }
            })
        }
        
        function generateKode() {
            // let kategori = $('#select-satuan').val()|| 0;
            // let satuan = $('#select-satuan').val();
            const randomNumber = Math.floor(Math.random() * 10000000)
                .toString()
                .padStart(7, '0');

            let kode = 'Gr' +  randomNumber

            return kode;
        }
        $(document).ready(function () {
            $('.card-grosir').hide();
            rupiah();

        })
        $('.custom-switch-input').on('change', function () {
            if ($(this).is(':checked')) {
                $('.card-grosir').show();
                $('.harga_grosir1').prop('required', true);
                $('.qty_grosir1').prop('required', true);
            } else {
                $('.card-grosir').hide();
                $('.harga_grosir1').prop('required', false);
                $('.qty_grosir1').prop('required', false);
            }
        });




        $(document).on('click', '.tambah-grosir', function (e) {
            e.preventDefault();
            if (x < 5) {

                x++;


                let clone = $('.grosir1').first().clone();
                clone.find('input').val('');
                clone.removeClass().addClass(`grosir${x} grosir`);

                clone.find('.harga_grosir1').removeClass('harga_grosir1').addClass(`harga_grosir${x}`).prop('required', true);
                clone.find('.qty_grosir1').removeClass('qty_grosir1').addClass(`qty_grosir${x}`).prop('required', true);
                clone.find('.btn_grosir1').removeClass('btn_grosir1').addClass(`btn_grosir1${x}`);

                $('#wrapper-grosir').append(clone);

                if (clone.find('.hapus-grosir').length === 0) {
                    clone.find('.form-group.d-flex').append(`
                                                                                            <button type="button" class="btn btn-danger hapus-grosir">
                                                                                                                        <i class="fas fa-trash-can"></i> <span class="title-btn">Hapus</span>
                                                                                                                    </button>`)
                }
                $('#wrapper-grosir').append(clone);
            } else {
                Swal.fire({
                    icon: 'info',
                    title: 'info',
                    text: 'Maksimal lima form grosir',
                });
            }

        })
        // function validateGrosir(index) {
        //     const hargaGrosir = $(`.harga_grosir${index}`);
        //     const qtyGrosir = $(`.qty_grosir${index}`);
        //     const btnGrosir = $(`.btn-grosir${index}`);

        //     const isHargaInvalid = hargaGrosir.hasClass('is-invalid') || !hargaGrosir[0].checkValidity();
        //     const isQtyInvalid = qtyGrosir.hasClass('is-invalid') || !qtyGrosir[0].checkValidity();

        //     const form = document.getElementById('form_data');

        //     if (form.classList.contains('was-validated')) {
        //         if (isHargaInvalid || isQtyInvalid) {
        //             btnGrosir.css('margin-bottom', '50px');
        //         } else {
        //             btnGrosir.css('margin-bottom', '25px');
        //         }
        //     }
        // }
        // $(document).on('input', '[class*="harga_grosir"], [class*="qty_grosir"]', function () {
        //     const className = $(this).attr('class');
        //     const match = className.match(/(\d+)/);
        //     if (match) {
        //         const index = match[1];
        //         validateGrosir(index);
        //     }
        // });

        $(document).on('click', '.hapus-grosir', function (e) {
            e.preventDefault();

            const total = $('#wrapper-grosir .grosir').length;


            if (total > 1) {
                $(this).closest('.grosir').remove();
            }
            x--;


        })
        // $('#select-satuan').on('change', function () {
        //     let selectedValue = $(this).val();
        //     let selectedText = $('#select-satuan option:selected').text();
        //     if (selectedText === 0) {
        //         $('.input-group-text-qty').text()
        //     } else {
        //         $('.input-group-text-qty').text(selectedText)

        //     }
        // })
        $(document).ready(function () {
            $('#simpan').click(function (e) {
                e.preventDefault();
                const form = document.getElementById('form_data');
                let harga_beli = $('#harga_beli').val().replace(/\D/g, '');
let harga_jual = $('#harga_jual').val().replace(/\D/g, '');
                let grosir = $('.custom-switch-input').is(':checked') ? 1 : 0;
                let kode;
                let kodeInput = $('#kode').val();
                if (kodeInput === "") {
                    kode = generateKode();
                } else {
                    kode = kodeInput
                }
                if(harga_beli === ""){
                    harga_beli = 0;
                }

                let dataGrosir = [];
                if (grosir == 1) {
                    let count = $('.grosir').length;
                    for (let x = 1; x <= count; x++) {
                        let minQty = $(`.qty_grosir${x}`).val().replace(/\D/g, '');
                        let harga = $(`.harga_grosir${x}`).val().replace(/\D/g, '');
                        if (minQty && harga) {

                            dataGrosir.push({
                                min_qty: minQty,
                                harga: harga
                            });
                        }
                    }
                }


                let data = {
                    'user_created': {{auth()->user()->id}},
                    'kode': kode,
                    'nama': $('#nama').val(),
                    // 'kategori_id': $('#select-kategori').val() || 0,
                    // 'satuan_id': $('#select-satuan').val(),
                    'harga_beli': harga_beli,
                    'harga_jual': harga_jual,
                    'is_grosir': grosir,
                    'grosir': dataGrosir
                }


                if (form.checkValidity()) {
                    simpan(data);
                } else {
                    form.classList.add('was-validated');

                }

            }
            )
        })






</script>
@endpush