@extends('layouts.admin.app', ['title' => 'Edit 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>Edit 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">Edit</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" value="{{ old('kode', $barangs->kode) }}"
                                        id="kode" placeholder="Masukan Kode Barang">

                                </div>
                                <div class="form-group">
                                    <label>Nama Barang </label>
                                    <input type="text" class="form-control" value="{{ old('kode', $barangs->nama) }}"
                                        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" required> --}}
                                        {{-- <option value=0 disabled selected>Pilih Kategori</option> --}}
                                        {{-- <option value="{{ old('kategori_id', $barangs->kategori_id) }}">
                                            {{ $barangs->kategori->nama ?? 'Tidak ada kategori' }}</option>

                                        @foreach ($kategoris as $kategori)
                                        @if ($kategori->id != $barangs->kategori_id)
                                        <option value="{{ $kategori->id }}">{{ $kategori->nama }}</option>
                                        @endif
                                        @endforeach
                                    </select>
                                </div> --}}
                                {{-- <div class="form-group">
                                    <label>Satuan</label>
                                    <select class="form-control select2" id="select-satuan" required>
                                        <option value="{{ old('satuan_id', $barangs->satuan_id) }}">
                                            {{ $barangs->satuan->nama }}</option>

                                        @foreach ($satuans as $satuan)
                                        @if ($satuan->id != $barangs->satuan_id)
                                        <option value="{{ $satuan->id }}">{{ $satuan->nama }}</option>
                                        @endif
                                        @endforeach
                                    </select>
                                </div> --}}
                                <div class="form-group">
                                    {{-- <label>Harga Beli <a class="text-danger">(Opsional)</a></label> --}}
                                    <label>Harga Beli</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                RP
                                            </div>
                                        </div>
                                        <input type="text" value="{{old('harga_beli',$barangs->harga_beli) }}"
                                            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" value="{{old('harga_jual',$barangs->harga_jual) }}"
                                            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="ubah" 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" {{
                                        old('is_grosir', $barangs->is_grosir ?? '') == '1' ? 'checked' : '' }}>
                                    <span class=" custom-switch-indicator"></span>
                                </label>
                            </div>
                            <div class="card-body card-grosir">
                                <div id="wrapper-grosir">
                                    @if($barangs->grosir && count($barangs->grosir) > 0)
                                    @foreach($barangs->grosir as $index => $grosir)
                                    <div class="grosir{{ $index + 1 }} grosir" data-grosir-id="{{ $grosir->id }}">
                                        <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_grosir{{ $index + 1 }}"
                                                        placeholder="Masukan Harga Jual Grosir"
                                                        value="{{ old('grosir.'.$index.'.harga', $grosir->harga) }}">
                                                </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_grosir{{ $index + 1 }}"
                                                        placeholder="Masukan Qty Minimal"
                                                        value="{{ old('grosir.'.$index.'.min_qty', $grosir->min_qty) }}">
                                                    <div class="input-group-append">
                                                        {{-- <div class="input-group-text input-group-text-qty">{{
                                                            $barangs->satuan->nama }}</div> --}}
                                                        <div class="input-group-text input-group-text-qty">Qty</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="form-group justify-evenly btn-grosir{{ $index + 1 }} btn-grosir col-md-3 d-flex align-items-end">
                                                @if($loop->first)
                                                <button type="button" class="btn btn-primary btn-icon tambah-grosir">
                                                    <i class="fas fa-plus"></i> <span class="title-btn">Tambah</span>
                                                </button>
                                                @else
                                                <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>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @else
                                    <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>
                                            </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">{{
                                                            $barangs->satuan->nama }}</div> --}}
                                                        <div class="input-group-text input-group-text-qty">Qty</div>
                                                    </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>
                                    @endif
                                    {{-- {{ dd($barangs->grosir) }} --}}
                                </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">Edit</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 x = {{ $barangs->grosir && count($barangs->grosir) > 0 ? count($barangs->grosir) : 1 }};
    let deletedGrosir = [];
    

        let id = '{{ $barangs->id }}'
    
    $(document).ready(function() {
            cekGrosir();
            rupiah();
        });
        let token = '{{ $token }}';

        function ubah(data) {
            // e.preventDefault();
            $.ajax({
                url: '/api/barangs/' + id   ,
                type: "Put",
                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;
        }

        function cekGrosir() {
            if ($('.custom-switch-input').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);
            }
        }

        $('.custom-switch-input').on('change', function() {
            if ($(this).is(':checked')) {
                $('.card-grosir').show();
                     $('[class*="harga_grosir"]').prop('required', true);
        $('[class*="qty_grosir"]').prop('required', true);
                $('.harga_grosir1').prop('required', true);
                $('.qty_grosir1').prop('required', true);
            } else {
                $('.card-grosir').hide();
                     $('[class*="harga_grosir"]').prop('required', false);
        $('[class*="qty_grosir"]').prop('required', false);
                $('.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.attr('data-grosir-id', '0'); 

                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;
             const grosirElement = $(this).closest('.grosir');
            const grosirId = grosirElement.data('grosir-id');

            if (total > 1) {
                $(this).closest('.grosir').remove();
                if(grosirId){
              deletedGrosir.push(grosirId);
            }
                    grosirElement.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() {
            $('#ubah').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, '');
                        let grosirId = $(`.grosir${x}`).data('grosir-id');
                        if (minQty && harga) {

                            let grosirData = {
                                min_qty: minQty,
                                harga: harga,
                            };

                            if (grosirId){
                                grosirData.id = grosirId;
                            }
                            dataGrosir.push(grosirData);
                        }
                    }
                }


                let data = {
                    'user_updated' : {{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,
                    'delete_grosir': deletedGrosir,
                }


                if (form.checkValidity()) {
                    // console.log(deletedGrosir);
                    
                    ubah(data);
                } else {
                    form.classList.add('was-validated');

                }

            })
        })
</script>
@endpush