@extends('layouts.admin.app', ["title" => "Transaksi Penjualan"])

@push('css')
<style>
    .btn-outline-primary {
        height: 5rem;
        width: 12rem !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 1rem !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    @media (max-width: 575.98px) {
        .ml-1 {
            margin-left: 0 !important;
        }
    }
</style>
@endpush

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Penjualan</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Transaksi</a></div>
                <div class="breadcrumb-item">Penjualan</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                {{-- <div class="col-12 col-md-12 col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">Customer</h4>
                        </div>
                        <div class="card-body">
                            <div class="form-group row ml-1">
                                <h4 class="col-sm-3 col-form-label text-dark">Customer</h4>
                                <div class="col-sm-8">
                                    <select class="form-control select2" id="select-customer" required>
                                        <option value=0 disabled selected>Pilih customer</option>
                                        @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}">
                                            {{$customer->nama}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row ml-1">
                                <h4 class="col-sm-3 col-form-label text-dark">Nama</h4>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="form-group row ml-1">
                                <h4 class="col-sm-3 col-form-label text-dark">Alamat</h4>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" readonly>
                                </div>
                            </div>
                            <div class="form-group row ml-1">
                                <h4 class="col-sm-3 col-form-label text-dark">Catatan</h4>
                                <div class="col-sm-8">
                                    <textarea class="form-control" id="catatan" data-height=150></textarea>
                                </div>
                            </div>
                            <div class="d-flex mt-4 pt-1 ml-3 flex-row align-items-center">
                                <button href="#" class="btn btn-warning btn-icon reset-customer">
                                    <i class="fas fa-rotate-right"> </i> Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div> --}}
                <div class="col-12 col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="needs-validation" id="form_data" novalidate="">
                                @csrf
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <h6>Customer</h6>
                                        <div class="">
                                            <select class="form-control select2" id="select-customer" required>
                                                <option value="1" {{ old('customer_id')==1 ? 'selected' : '' }}>Umum
                                                </option>
                                                Umum
                                                </option>
                                                @foreach ($customers as $customer)
                                                @if ($customer->id != 1)

                                                <option value=" {{ $customer->id }}">
                                                    {{$customer->nama}}
                                                </option>
                                                @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Kode Barang</h6>
                                        <div class="">
                                            {{-- {{ dd($barangs->harga_jual) }} --}}
                                            <select class="form-control select2" id="select-barang" required>
                                                <option value=0 disabled selected>Pilih Barang</option>
                                                @foreach ($barangs as $barang)
                                                <option value="{{ $barang->id }}" data-nama="{{ $barang->nama }}"
                                                    data-harga-jual="{{ $barang->harga_jual }}"
                                                    data-grosir="{{ $barang->is_grosir }}">
                                                    {{-- data-satuan="{{ $barang->satuan->nama }}"> --}}
                                                    {{ $barang->kode }} - {{ $barang->nama }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Qty</h6>
                                        <div class="">
                                            <div class="input-group">
                                                <input type="text" id="qty" class="form-control rupiah"
                                                    placeholder="Masukan Qty Minimal" required>
                                                <div class="input-group-append">
                                                    <div class="input-group-text input-group-text-qty ">
                                                        Qty
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Nama</h6>
                                        <div class="">
                                            <input type="text" id="nama" class="form-control" readonly>
                                        </div>
                                    </div>
                                    {{-- <div class="form-group col-md-4">
                                        <h6>Kategori</h6>
                                        <div class="">
                                            <input type="text" id="kategori" class="form-control" readonly>
                                        </div>
                                    </div> --}}
                                    <div class="form-group col-md-4">
                                        <h6>Harga Jual</h6>
                                        <div class="">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">
                                                        RP
                                                    </div>
                                                </div>
                                                <input type="text" id="harga_jual" class="form-control rupiah" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Diskon <label class="text-danger">(Opsional)</label></h6>
                                        <div class="">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">
                                                        RP
                                                    </div>
                                                </div>
                                                <input type="text" id="diskon" class="form-control rupiah ">
                                            </div>
                                            <small id="passwordHelpBlock" id="password" class="form-text text-muted">
                                                Jika dibawah 100 maka akan dianggap persen
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <button href="#" type="button"
                                            class="btn btn-primary btn-block btn-icon tambah-barang">
                                            <i class="fas fa-cart-plus"> </i> Masukan Ke Keranjang
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        <button href="#" type="button"
                                            class="btn btn-block btn-warning btn-icon reset-barang">
                                            <i class="fas fa-rotate-right"> </i> Reset
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            {{-- <h4></h4> --}}
                            <h4 class="text-dark">Keranjang</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-borderless table-striped w-100" id="tableKeranjang">
                                    <thead class="table-dark ">
                                        <tr>
                                            <th style="width: 10%;">Action</th>
                                            <th style="width: 10%;">Kode</th>
                                            <th style="width: 15%;">Nama</th>
                                            <th style="width: 15%;">QTY</th>
                                            <th style="width: 15%;">Harga Jual</th>
                                            <th style="width: 15%;">Diskon</th>
                                            <th style="width: 20%;">Total </th>
                                        </tr>
                                    </thead>
                                    <tbody class="action" style="vertical-align: middle !important;">
                                        {{-- <tr>
                                            <td class="action"><a href="#" class="btn btn-icon btn-danger">
                                                    <i class="far fa-trash-can"></i>
                                                </a></td>
                                            <td>kkk/kkkk</td>
                                            <td>bimoli</td>
                                            <td class="text-right">10</td>
                                            <td class="text-right">Rp 10.000</td>
                                            <td class="text-right">Rp 0</td>
                                            <td class="text-right">Rp 100.000</td>

                                        </tr> --}}
                                    </tbody>
                                    <tfoot class="bg-light">
                                        <tr>
                                            <td class="text-center" colspan="5">
                                                <h6>Diskon Penjualan</h6>
                                            </td>
                                            <td colspan="2">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">RP</div>
                                                    </div>
                                                    <input type="text" id="diskon_penjualan"
                                                        class="form-control rupiah text-right" placeholder='0'>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center"><span class="subtotal_barang"></span>
                                                Barang </td>
                                            <td class="text-center" colspan="3">
                                                <h6>Subtotal</h6>
                                            </td>
                                            <td class="text-right"><span style="float:left">Rp</span> <span
                                                    class="subtotal" style="float:right">0</span></td>
                                            <td class="text-right"><span style="float:left">Rp</span> <span
                                                    class="subtotal_diskon" style="float:right">0</span></td>
                                            <td class="text-right"><span style="float:left">Rp</span> <span
                                                    class="total_keseluruhan" style="float:right">0</span></td>
                                        </tr>

                                    </tfoot>
                                </table>
                                <div class="text-right">
                                    <button type="button"
                                        class="justify-content-end btn-bayar btn-block btn-lg btn btn-success btn-icon">
                                        <i class="fas fa-wallet"></i> Bayar Sekarang
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
<div class="modal fade" id="modal-bayar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-pembayaran" role="document">
        <div class="modal-content">

            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Pembayaran</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{-- <h4 class="text-dark">Nominal </h4>
                <div class="d-flex flex-row align-items-center">
                    <button value="500" href="#" class="btn btn-lg  btn-outline-primary ">
                        RP 500
                    </button>
                    <button value="1000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 1.000
                    </button>
                    <button value="2000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 2.000
                    </button>
                    <button value="5000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 5.000
                    </button>
                </div>
                <div class="d-flex mt-2 flex-row align-items-center">
                    <button value="10000" href="#" class="btn btn-lg  btn-outline-primary ">
                        RP 10.000
                    </button>
                    <button value="20000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 20.000
                    </button>
                    <button value="50000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 50.000
                    </button>
                    <button value="100000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 100.000
                    </button>
                </div>
                <div class="d-flex mt-2 flex-row align-items-center">
                    <button value="200000" href="#" class="btn btn-lg  btn-outline-primary ">
                        RP 200.000
                    </button>
                    <button value="500000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 500.000
                    </button>
                    <button value="1000000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 1.000.000
                    </button>
                    <button value="2000000" href="#" class="btn ml-2 btn-lg  btn-outline-primary ">
                        RP 2.000.000
                    </button>
                </div> --}}
                {{-- <div class="form-group mt-4"> --}}
                    <div class="form-group">
                        <h6 class="text-dark">Dibayar</h6>
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    RP
                                </div>
                            </div>
                            <input type="text " class="form-control rupiah pembayaran "
                                placeholder="Masukan Harga Jual">
                        </div>
                        <h6 class="text-dark">Kembalian</h6>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    RP
                                </div>
                            </div>
                            <input type="text" class="form-control rupiah kembalian " value="0" readonly>
                        </div>
                    </div>
                    <div class="form-group">

                    </div>
                </div>
                <div class="modal-footer">
                    <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                    <button type="button" class="btn btn-transaksi-bayar btn-success "><i class="fas fa-wallet"> </i>
                        Bayar</button>
                </div>
            </div>
        </div>
    </div>
    @foreach ($barangGrosirs as $BarangGrosir)

    <div class="modal fade modal-grosir" id="modal-grosir-{{ $BarangGrosir->barang_id }}" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            {{-- <form class="needs-validation" id="form-user" novalidate=""> --}}
                {{-- @csrf --}}
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" id="exampleModalLabel">Informasi</h5> <button type="button"
                            class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span> </button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-striped w-100  tableGrosir">
                                <thead class="table-dark">
                                    <tr>
                                        <th style="width: 10%;">No</th>
                                        <th style="width: 45%;">Harga</th>
                                        <th style="width: 45%;">Minumum pembelian</th>
                                    </tr>
                                </thead>
                                <tbody class="action">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-end">
                        {{-- <button type="button" class="btn btn-danger btn-hapus" data-id="{{ $user->id }}">
                            <i class="fas fa-trash-alt me-1"></i> Iya
                        </button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Tidak
                        </button> --}}
                    </div>
                </div>
                {{--
            </form> --}}
        </div>
    </div>
    @endforeach

    @push('js')

    <script>
        let token = '{{ $token }}'
        let subtotalAwal = 0;
        let subtotalFix = 0;


        $(document).ready(function () {
            // $('#select-customer').on('select2:select', function () {
            //     $('#catatan').focus();
            // });

            let diskon_penjualan = sessionStorage.getItem('diskonPenjualan');
            diskon_penjualan = $('#diskon_penjualan').val(rupiah(diskon_penjualan));


            focusSelect();
            toggleMl1Class();
            keranjang();

        });
        $(window).resize(function () {
            toggleMl1Class()

        });
            function focusSelect(){
               $('#select-barang').select2({
                placeholder: "Pilih Barang",
                allowClear: true
            }); setTimeout(function () {
                $('#select-barang').select2('open');
        document.querySelector('.select2-search__field').focus();
            }, 100);
                    $('#select-barang').on('select2:select', function () {
                $('#qty').focus();
            });

        }
        function genrateFaktur() {
            const randomNumber = Math.floor(Math.random() * 100000000)
                .toString()
                .padStart(8, '0');

            let faktur = 'P' + randomNumber

            return faktur;
        }

        function keranjang() {
            $('#tableKeranjang').DataTable({
                lengthChange: false,
                searching: false,
                info: false,
                autoWidth: false,
                ordering: false,
                paging: false,

                // pageLength : 10,
                language: {
                    paginate: {
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }, emptyTable: "Keranjang masih kosong"

                },
                ajax: {
                    url: '/api/penjualans/keranjang',
                    type: "GET",
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    dataSrc: function (json) {

                        if (json.data.length === 0) {
                            $('.btn-bayar').hide();
                        } else {
                            $('.btn-bayar').show();

                        }
                        return json.data;
                    }


                },
                columns: [{
                    data: null,
                    render: function (data, type, row) {

                        return `<button class="btn btn-icon btn-danger btn-hapus-keranjang" data-id="${data.id}" type="button">
                                                                                                                <i class="far fa-trash-can"><a style="font-family: 'Quicksand', sans-serif;"> Hapus</a></i>
                                                                                                            </button>`;
                    }
                },

                {
                    data: 'barang.kode',
                    render: function (data) {
                        return data;
                    }
                },

                {
                    data: 'barang.nama',
                    render: function (data) {
                        return data;
                    }
                },
                {
                    data: 'qty',
                    render: function (data, type, row) {
                        return `<div class="input-group">
                                                                    <div class="input-group-prepend">
                                                                        <div class="input-group-text">${row.barang.satuan?.nama ?? 'Qty'}</div>
                                                                    </div>
                                                                    <input type="text" id="qty_keranjang" data-id="${row.id}" class="form-control rupiah" placeholder="Masukan Qty" value="${rupiah(data)}">
                                                                </div>`;
                    }
                },
                {
                    data: 'harga',
                    render: function (data) {
                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
                {
                    data: 'diskon',
                    render: function (data, type, row) {
                        return `<div class="input-group">
                                                                    <div class="input-group-prepend">
                                                                        <div class="input-group-text">RP</div>
                                                                    </div>
                                                                    <input type="text" id="diskon_keranjang" data-id="${row.id}" class="form-control rupiah" placeholder="Masukan Diskon" value="${rupiah(data)}">
                                                                </div>`;
                    }
                },
                {
                    data: null,
                    render: function (data, type, row) {

                        let harga = parseFloat(String(data.harga || '0').replace(/[,\.]/g, ''));
                        let qty = parseFloat(String(data.qty || '0').replace(/[,\.]/g, ''));
                        let diskon = parseFloat(String(data.diskon || '0').replace(/[,\.]/g, ''));

                        let total = (harga * qty) - diskon;

                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(total)}</span>`;
                    }
                },



                ], drawCallback: function (settings) {




                    let api = this.api();
                    let data = api.rows().data();


                    let subtotalDiskon = 0;
                    let subtotal = 0;
                    let jumlahBarang = data.length;

                    data.each(function (row) {

                        let harga = parseFloat((row.harga ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;
                        let qty = parseFloat((row.qty ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;
                        let diskon = parseFloat((row.diskon ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;


                        let total = (harga * qty) - diskon;
                        subtotalDiskon += diskon;
                        subtotal += total;

                    });
                    let diskon_penjualan = $('#diskon_penjualan').val().toString().replace(/\./g, '').replace(/,/g, '') || 0;

                    subtotalAwal = subtotal
                    subtotalFix = subtotalAwal - diskon_penjualan;

                    $(api.table().footer()).find('.subtotal_diskon').html(`${rupiah(subtotalDiskon)}`);
                    $(api.table().footer()).find('.subtotal').html(`${rupiah(subtotalAwal)}`);
                    $(api.table().footer()).find('.total_keseluruhan').html(`${rupiah(subtotalFix)}`);
                    $(api.table().footer()).find('.subtotal_barang').html(`${rupiah(jumlahBarang)}`);
                }

            })
        };
        function listGrosir(data) {
            $('.tableGrosir').DataTable({
                lengthChange: false,
                searching: false,
                paging: false,
                  info: false,
                filter: false,
                autoWidth: false,
                stateSave: true,
                ordering: false,
                destroy: true,
                // pageLength : 10,
                language: {
                    paginate: {
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }, emptyTable: "Keranjang masih kosong"

                },
                ajax: {
                    url: '/api/barang_grosirs/' + data,
                    type: "GET",
                    headers: {
                        'Authorization': 'Bearer ' + token 
                    },
                    

                },
                columns: [{
                    data: null,
                    render: function (data, type, row, meta) {
                        
                                return meta.row + meta.settings._iDisplayStart + 1;

                    }
                },

                {
                    data: 'harga',
                    render: function (data, type, row) {
                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}/Qty</span>`;
                    }
                },

                {
                    data: 'min_qty',
                    render: function (data, type, row) {
                        
                        return `${rupiah(data)}/Qty`;
                    }
                },

                ]

            })
        };

        function masukKeranjang() {
            // e.preventDefault();
            $.ajax({
                url: '/api/penjualans',
                type: "Post",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: {
                    "barang_id": $('#select-barang').val(),
                    "harga": $('#harga_jual').val().replace(/\D/g, ''),
                    "diskon": $('#diskon').val().replace(/\D/g, ''),
                    "qty": $('#qty').val().replace(/\D/g, ''),
                },
                success: function (response) {

                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        // window.location.href = "{{ route('master_user.index') }}";
                        $('#tableKeranjang').DataTable().ajax.reload(null, false);
                        $('#nama').val('');
                        // $('#kategori').val('');
                        $('#harga_jual').val('');
                        $('#qty').val('');
                        $('#diskon').val('');
                        $('.input-group-text-qty').text('');
                        $('#select-barang').val(0).change();
                        // const form = document.getElementById('form_data');

                        $('#form_data').removeClass('was-validated');
                                    // focusSelect();
   $('#select-barang').select2('open');
        document.querySelector('.select2-search__field').focus();
                        
                        
                    });
                },
                error: function (responseJSON) {
                    if (responseJSON.status === 422) {
                        let errors = responseJSON.responseJSON.errors;
                        let message = '';
                        let errorCount = Object.keys(errors).length;


                        if (errorCount === 2) {
                            for (let field in errors) {
                                message += errors[field].join(', ') + '\n';
                            }
                        } else {
                            message = errors;
                        }
                        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 hapusKeranjang(id) {
            $.ajax({
                url: '/api/penjualans/keranjang/' + id,
                type: "delete",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        $('#tableKeranjang').DataTable().ajax.reload(null, false);
                    });
                }
            })
        }
        function updateQty(id,data) {
            $.ajax({
                url: '/api/penjualans/keranjang/qty/' + id,
                type: "Put",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: {
                    qty: data,
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        $('#tableKeranjang').DataTable().ajax.reload(null, false);

                    });
                }
            })
        }
        function updateDiskon(id,data) {
            $.ajax({
                url: '/api/penjualans/keranjang/diskon/' + id,
                type: "Put",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: {
                    diskon: data,
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        $('#tableKeranjang').DataTable().ajax.reload(null, false);
                    });
                }
            })
        }
        function hapusKeranjang(id) {
            $.ajax({
                url: '/api/penjualans/keranjang/' + id,
                type: "delete",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        $('#tableKeranjang').DataTable().ajax.reload(null, false);
                    });
                }
            })
        }
        function transaksiBayar(data) {
            $.ajax({
                url: '/api/penjualans/bayar',
                type: "Post",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: data,
                success: function (response) {
                             if (response.data.resource.id) {
                            const url = "{{ route('penjualan.struk', ['id' => 'id_penjualan']) }}".replace('id_penjualan', response.data.resource.id);
                            window.open(url, '_blank');
                            sessionStorage.removeItem('diskonPenjualan');
                            
                        }

                    Swal.fire({
                        icon: 'success',
                        title: response.data.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {

                        $('#tableKeranjang').DataTable().ajax.reload(null, false);
                        $('#nama').val('');
                        // $('#kategori').val('');
                        $('#harga_jual').val('');
                        $('#qty').val('');
                        $('#diskon').val('');
                        $('.input-group-text-qty').text('');
                        $('#select-barang').val(0).change();
                        $('#modal-bayar').modal('hide');
                        $('.pembayaran').val(0);
                        $('.kembalian').val(0);
                        $('#diskon_penjualan').val('');
               
                        // focusSelect();
   $('#select-barang').select2('open');
        document.querySelector('.select2-search__field').focus();



                    });
                }, error: function (xhr, status, error) {

                    let errorMessage = 'Terjadi kesalahan';
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        html: errorMessage
                    });
                }
            })
        }
        function toggleMl1Class() {
            if ($(window).width() < 576) {
                $('.form-group.row').removeClass('ml-1');
                $('.tambah-barang').removeClass('ml-3');
            } else {
                $('.form-group.row').addClass('ml-1');
                $('.tambah-barang').addClass('ml-3');


            }
        }
        function kembalian() {
            let bayar = parseFloat($('.pembayaran').val().replace(/\D/g, '')) || 0;
            let kembalian = bayar - subtotalFix;


            if (kembalian < 0) kembalian = 0;

            $('.kembalian').val(rupiah(kembalian));

        }

        $('#select-barang').on('change', function () {
            let selectedValue = $(this).val();
            let selectedOption = $(this).find('option:selected');
            

            let nama = selectedOption.data('nama');
            // let kategori = selectedOption.data('kategori');
            let harga_jual = selectedOption.data('harga-jual');
            // let satuan = selectedOption.data('satuan');
            let grosir = selectedOption.data('grosir');


            // $('.input-group-text-qty').text(satuan);
            $('#nama').val(nama);
            // $('#kategori').val(kategori);
            $('#harga_jual').val(rupiah(harga_jual));


            if (grosir === 1) {
                if ($('.btn-grosir').length === 0) {
                    $('.reset-barang').after(`
                                                                    <button href="#"   class="btn mt-3 pl-2 btn-block btn-primary btn-icon btn-grosir" type="button">
                                                                        Informasi Harga Grosir
                                                                    </button>
                                                                `);
                }
            } else {
                $('.btn-grosir').remove();

            }



        })

        // $('.reset-customer').click(function () {
        //     // $('#catatan').val('');
        //     $('#select-customer').val(0).change();
        // })
$(document).on('click', '.btn-grosir', function () {
                        let selectedValue = $('#select-barang').val();

                $(this).attr('data-id', selectedValue);
                listGrosir(selectedValue);
                $(`#modal-grosir-${selectedValue}`).modal('show');

           
        })
        $('.reset-barang').click(function () {
            $('#nama').val('');
            // $('#kategori').val('');
            $('#harga_jual').val('');
            $('#qty').val('');
            $('#diskon').val('');
            $('.input-group-text-qty').text('');
            $('#select-barang').val(0).change();
        })

        // $('.transaksi-bayar').click(function () { $(this).addClass('btn-progress disabled'); $(this).html(' '); });

        $(document).ready(function () {
            $('.tambah-barang').click(function (e) {
                e.preventDefault();

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

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

                }
            });
        })
        $('#tableKeranjang').on('click', '.btn-hapus-keranjang', function () {
            let id = $(this).data('id');
            hapusKeranjang(id);

        })
        $(document).on('input', '#qty_keranjang', function () {
            let id = $(this).data('id');
            let inputGroup = $(this).closest('.input-group');

            inputGroup.find('.input-group-append').remove();

            inputGroup.append(`
                                                        <div class="input-group-append">
                                                            <button class="btn btn-success btn-sm btn-simpan-qty" data-id="${id}" type="button">
                                                                <i class="fas fa-check"></i>
                                                            </button>
                                                        </div>
                                                    `);
        });
        $(document).on('input', '#diskon_penjualan', function () {
            let inputGroup = $(this).closest('.input-group');

            inputGroup.find('.input-group-append').remove();

            inputGroup.append(`
                                                        <div class="input-group-append">
                                                            <button class="btn btn-success btn-sm btn-simpan-diskon-penjualan"  type="button">
                                                                <i class="fas fa-check"></i> Simpan
                                                            </button>
                                                        </div>
                                                    `);
        });

        $(document).on('input', '#diskon_keranjang', function () {
            let id = $(this).data('id');
            let inputGroup = $(this).closest('.input-group');

            inputGroup.find('.btn-simpan-diskon').parent().remove();

            inputGroup.append(`
                                                        <div class="input-group-append">
                                                            <button class="btn btn-success btn-sm btn-simpan-diskon" data-id="${id}" type="button">
                                                                <i class="fas fa-check"></i>
                                                            </button>
                                                        </div>
                                                    `);
        });



        $(document).on('click', '.btn-simpan-diskon', function () {
            let id = $(this).data('id');
let diskon = parseFloat($(`#diskon_keranjang[data-id="${id}"]`).val().replace(/[^\d]/g, ''));
                

            updateDiskon(id,diskon);
        })
        $(document).on('click', '.btn-simpan-diskon-penjualan', function () {
  let diskon_penjualan = parseInt($('#diskon_penjualan').val().toString().replace(/\./g, '').replace(/,/g, '')) || 0;
let subtotalValue = parseInt(subtotalAwal.toString().replace(/\./g, '').replace(/,/g, '')) || 0;



            let buttonElement = $(this);
            

            if (diskon_penjualan > subtotalValue) {
                Swal.fire({
                    icon: 'error',
                    title: 'Diskon tidak boleh melebihi subtotal',
                    showConfirmButton: false,
                    timer: 500
                }).then(() => {
                    buttonElement.closest('.input-group-append').fadeOut(300, function () {
                        $(this).remove();
                    });
                });

                return;
            }

            sessionStorage.setItem('diskonPenjualan', diskon_penjualan);

            Swal.fire({
                icon: 'success',
                title: 'Diskon berhasil disimpan',
                showConfirmButton: false,
                timer: 500
            }).then(() => {
                $('#tableKeranjang').DataTable().ajax.reload(null, false);
                buttonElement.closest('.input-group-append').fadeOut(300, function () {
                    $(this).remove();
                });
            });
        });
        $(document).on('click', '.btn-simpan-qty', function () {
            let id = $(this).data('id');
    let qty = parseFloat( $(`#qty_keranjang[data-id="${id}"]`).val().replace(/[^\d]/g, ''));
 
              updateQty(id,qty);
        })
        $(document).on('click', '.btn-outline-primary', function () {
            let buttonText = $(this).text().trim();
            let nominal = parseFloat(buttonText.replace(/[^\d]/g, '')) || 0;

            let bayarRaw = $('.pembayaran').val();
            let bayar = parseFloat(bayarRaw.replace(/[^\d]/g, '')) || 0;

            let totalBayar = bayar + nominal;
            $('.pembayaran').focus();

            $('.pembayaran').val(rupiah(totalBayar));

            kembalian();
        });
        $(document).on('input', '.pembayaran', function () {
            kembalian();
        });

        $(document).on('click', '.btn-bayar', function () {
            let customer = $('#select-customer').val()

            if (!customer || customer === '0') {
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan',
                    text: 'Harap pilih customer',
                });
                return;
            }
              


          $('#modal-bayar').modal('show');
          $('#modal-bayar').on('shown.bs.modal', function () {
              $('.pembayaran').focus();
        });
        })
        $(document).on('click', '.btn-transaksi-bayar', function () {
            let customer = $('#select-customer').val();
            let diskon_penjualan = sessionStorage.getItem('diskonPenjualan') || 0;

            let bayar = $('.pembayaran').val().replace(/\D/g, '');
            let kembalian = $('.kembalian').val();

            let data = {
                'faktur': genrateFaktur(),
                'diskon': diskon_penjualan,
                // 'catatan': catatan,
                'customer_id': customer,
                'bayar': bayar
            };
            if (kembalian < 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan',
                    text: 'Silakan isi nominal pembayaran',
                });
                return;
            }
            transaksiBayar(data);
        })
        $('#modal-bayar').on('hidden.bs.modal', function () {
            $('.pembayaran').val(0);
            $('.kembalian').val(0);
            // focusSelect();
               $('#select-barang').select2('open');
        document.querySelector('.select2-search__field').focus();
        });

$('#qty').on('keypress', function (e) {
    if (e.keyCode == 13) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                 $(this).blur();
        
        setTimeout(function() {
            masukKeranjang();
        }, 50);
                return false;
            }
        })
        $('.pembayaran').on('keyup', function (e) {
            if (e.key === 'Enter') {
                let customer = $('#select-customer').val();
                let diskon_penjualan = sessionStorage.getItem('diskonPenjualan') || 0;
                let bayar = $('.pembayaran').val().replace(/\D/g, '');
                let kembalian = $('.kembalian').val();

                let data = {
                    faktur: genrateFaktur(),
                    diskon: diskon_penjualan,
                    customer_id: customer,
                    bayar: bayar
                };


                if (kembalian < 0) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Silakan isi nominal pembayaran',
                    });
                    return;
                }

                transaksiBayar(data);
            }
        });

    </script>
    @endpush