@push('scripts')
    <script src="https://unpkg.com/autonumeric"></script>
    <script>
        new AutoNumeric('#uang_bayar', {
            currencySymbol: 'Rp ',
            decimalPlaces: 0,
            digitGroupSeparator: '.',
            decimalCharacter: ','
        });
        new AutoNumeric('#total_bayar', {
            currencySymbol: 'Rp ',
            decimalPlaces: 0,
            digitGroupSeparator: '.',
            decimalCharacter: ','
        });
    </script>
    <script>
        let uangBayarInput = document.getElementById("uang_bayar");
        const numberFormat = new Intl.NumberFormat({
            style: 'currency'
        });
        uangBayarInput.addEventListener("input", function(event) {
            countTotal();
        });

        function countTotal() {
            let kembaliInput = document.getElementById("kembali");

            let totalBayar = document.querySelector("#total_bayar");
            let kembaliValue = 0;


            let Total = totalBayar.value.replace(/\D/g, '');
            let uangBayar = uangBayarInput.value.replace(/\D/g, '');

            kembaliValue = uangBayar - Total;
            console.log(kembaliValue);
            if (kembaliValue < 0) {
                kembaliInput.value = "Uang Bayar Tidak Cukup";
            } else if (kembaliInput >= 0) {
                console.log(kembalivalue);

                kembaliInput.value = numberFormat.format(parseInt(kembaliValue));

            } else {
                kembaliInput.value = numberFormat.format(parseInt(kembaliValue));
            }

        }
        countTotal();
    </script>
@endpush


@push('styles')
    <style>
        .image-upload {
            width: 200px;
            height: 200px;
            background-color: gainsboro;
            display: block;
            margin: auto;
            background-size: contain;
        }

        .image-upload>input {
            display: none;
        }

        .pilih-bentuk svg {
            width: 100px;
            height: 100px;
            display: block;
            margin: auto;
        }

        .pilih-bentuk i {
            font-size: 100px;
            color: grey;
            position: absolute;
            left: 0%;
            top: 0%;
            right: 0%;
            bottom: 0%;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }
    </style>
@endpush

<div class="row clearfix">
    <!-- Task Info -->
    <div class="col-xs-12 col-sm-12 col-md-6">
        <div class="card">
            <div class="header">
                <a href="{{ route('service.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">


                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>No. Service</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input type="text" class="form-control" readonly value="{{ $datas->no_service }}">
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Total Service</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input type="text" class="form-control" name="grand_total" readonly
                                    value="Rp.{{ number_format($datas->grand_total) }}">
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Uang Muka</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input type="text" class="form-control" readonly
                                    value="Rp.{{ number_format($datas->uang_bayar, 0, '.', ',') }}">
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Total </b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input id="total_bayar" type="text" class="form-control" name="total_bayar"
                                    value="{{ $datas->grand_total - $datas->uang_bayar }}" readonly>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Uang Bayar</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input id="uang_bayar" type="text" class="form-control"
                                    name="uang_bayar"@if (isset($pembayaran_services)) value="{{ $pembayaran_services->uang_bayar }}" @endif>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Uang Kembali</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" id="kembali" name="kembali" readonly value="0"
                                        class="form-control" placeholder="Kembali" step="500">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Metode_pembayaran</b>
                        <div class="colorpicker colorpicker-element">
                            <div class="form-line ">
                                <select class="form-control" name="metode_bayar" id="metode_bayar" required>
                                    <option value="" selected disabled>-pilih metode bayar-</option>
                                    <option value="cash"
                                        @if (isset($pembayaran_services)) @if ($pembayaran_services->metode_bayar == 'cash')selected @endif
                                        @endif>Cash</option>
                                    <option value="transfer"
                                        @if (isset($pembayaran_services)) @if ($pembayaran_services->metode_bayar == 'transfer')selected @endif
                                        @endif>Transfer</option>
                                </select>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row clearfix hide" id="bukti_transfer_row">
                    <div class="col-md-6">
                        <b>Bukti Transfer</b>
                        <div class="input-group">
                            <div class="form-line">
                                <input type="file" accept="image/*,application/pdf" id="bukti_transfer" name="bukti_transfer">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Tanggal Batas Garansi Jasa</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input id="uang_bayar"
                                    type="date"@if (isset($pembayaran_services)) value="{{ $pembayaran_services->akhir_garansi }}" @endif
                                    id="daterange" class="form-control" name="akhir_garansi">
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Kasir</b>
                        <select name="kasir_id" class="form-control" required>
                            <option value="" selected disabled>-Pilih Kasir-</option>
                            @foreach ($pengguna as $p)
                                <option value="{{ $p->id }}"
                                    @if (isset($datas)) @if (auth()->user()->id == $p->id) selected @endif
                                    @endif> {{ $p->nama_pengguna }} </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Sales</b>
                        <select name="sale_id" class="form-control" required>
                            <option value="" selected disabled>-Pilih Sales-</option>
                            @foreach ($pengguna as $p)
                                <option value="{{ $p->id }}"
                                    @if (isset($pembayaran_services)) @if ($pembayaran_services->sale_id == $p->id) selected @endif
                                    @endif>
                                    {{ $p->nama_pengguna }} </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Teknisi</b>
                        <select name="teknisi_id" class="form-control" required>
                            <option value="" selected disabled>-Pilih Teknisi-</option>
                            @foreach ($pengguna as $t)
                                <option
                                    value="{{ $t->id }}"@if (isset($datas)) @if ($datas->teknisi_id == $t->id) selected @endif
                                    @endif>
                                    {{ $t->nama_pengguna }} </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- ketika create --}}
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-line">
                            @if (isset($pembayaran_services))
                                <button type="submit" style="display:none;" class="btn btn-success">Tambahkan
                                    Pembayaran</button>
                            @else
                                <button type="submit" class="btn btn-success">Tambahkan Pembayaran</button>

                            @endif
                        </div>
                    </div>
                </div>
                {{-- ketika edit --}}
                @if (isset($pembayaran_services))
                    @if (\Helper::hakAkses('service', 'edit_pembayaran'))
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-line">
                                    <button type="submit" class="btn btn-success">Ubah Pembayaran</button>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning">
                            <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
                            Membutuhkan akses untuk mengubah Pembayaran!
                        </div>
                    @endif
                @endif
            </div>

        </div>
    </div>
    <!-- #END# Task Info -->

    <div class="col-xs-12 col-sm-12 col-md-6">
        <div class="card">
            <div class="header">
                <p style="font-weight:bold;">Histori Pembayaran</p>
            </div>
            <div class="body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Uang Muka</th>
                            <th>Total Transaksi</th>
                            <th>Sales</th>
                            <th>Bukti Transfer</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (isset($pembayaran_services))
                            <tr>
                                <td> {{ date('Y-m-d', strtotime($pembayaran_services->created_at)) }}</td>
                                <td>
                                    <p>Rp. {{ number_format($pembayaran_services->uang_muka) }}</p>
                                </td>
                                <td>
                                    <p>Rp. {{ number_format($pembayaran_services->total_bayar) }}</p>
                                </td>
                                <td>
                                    <p> {{ $pembayaran_services->pengguna->nama_pengguna }}</p>
                                </td>
                                <td>
                                    @if (isset($pembayaran_services->bukti_transfer))
                                        <a href="{{ asset('images/Bukti_transfer/' . $pembayaran_services->bukti_transfer) }}"
                                            target="_blank" class="btn btn-success"> Bukti Transfer</a>
                                    @endif
                                </td>
                            </tr>

                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <hr>
    </div>
</div>
<div class="row" style="margin-bottom: 50px;">
    <div class="col-md-12" style="text-align: right;">
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var metode_bayar = document.getElementById('metode_bayar');
        var buktiTransferRow = document.getElementById('bukti_transfer_row');
        if (metode_bayar.value === 'transfer') {
            buktiTransferRow.classList.add('show');
            buktiTransferRow.classList.remove('hide');
        };

    });
    document.getElementById('metode_bayar').addEventListener('change', function() {
        var buktiTransferRow = document.getElementById('bukti_transfer_row');
        if (this.value === 'transfer') {
            buktiTransferRow.classList.add('show');
            buktiTransferRow.classList.remove('hide');
        } else {
            buktiTransferRow.classList.add('hide');
            buktiTransferRow.classList.remove('show');
        }
    });
</script>