@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            <x-section-header action="create" :icon="$icon" :label="$label" hr-class="mb-4" />

            <div class="row">
                <div class="col-sm-6">
                    <table class="table-padding">
                        <tr>
                            <td>Termin</td>
                            <td class="divide">:</td>
                            <td>{{ $payment->termin }}</td>
                        </tr>
                        <tr>
                            <td>No. Invoice</td>
                            <td class="divide">:</td>
                            <td>{{ $payment->invoice->number }}</td>
                        </tr>
                        <tr>
                            <td>Tgl. Jatuh Tempo</td>
                            <td class="divide">:</td>
                            <td>{{ Common::dateFormat($payment->duedate, 'dd mmmm yyyy') }}</td>
                        </tr>
                        <tr>
                            <td>Total Biaya</td>
                            <td class="divide">:</td>
                            <td>{{ 'Rp. ' . number_format($payment->total, 0, '', '.') }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-sm-6">
                    <table class="table-padding">
                        <tr>
                            <td>Nama Pelanggan</td>
                            <td class="divide">:</td>
                            <td>{{ @$payment->invoice->customer->name }}</td>
                        </tr>

                        <tr>
                            <td>Keterangan</td>
                            <td class="divide">:</td>
                            <td></td>
                        </tr>
                    </table>

                    {{ $payment->invoice->description }}
                </div>
            </div>
            <hr>

            <form method="post" action="{{ route('order.payment.update', $payment->encrypted_id) }}" class="form-block"
                enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <x-form.select name="payment_method" label="Metode Pembayaran" id="method" :option="['1' => 'Tunai', '2' => 'Transfer', '3' => 'Giro']"
                            :old="old('payment_method', 1)" />
                    </div>
                    <div class="col-sm-4 col-md-3" id="form-bank">
                        <x-form.select name="payment_account" label="Rekening Bank" :option="$accounts" :old="old('payment_account', 1)" />
                    </div>
                    <div class="col-sm-4 col-md-3" id="form-number">
                        <x-form.input-text name="payment_number" label="No. Referensi" :old="old('payment_number')" />
                    </div>


                </div>
                <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <x-form.date-picker name="payment_date" label="Tanggal Bayar" picker-type="date"
                            :old="old('payment_date', date('d-m-Y'))" />
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <x-form.input-group-mask name="payment_amount" label="Jumlah Bayar" mask="nominal" addon="Rp"
                            :old="old('payment_amoun', $payment->total)" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <x-form.input-file name="photo" label="Bukti Pembayaran"  info="Gunakan file jpg, jpeg atau png. Ukuran file maksimal 2 MB" :optional="true"/>
                    </div>
                </div>

                <x-form.button-submit :cancel-route="route('order.invoice.detail', $payment->invoice->encrypted_id)" />
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>

        $(document).ready(function() {


            $("#form-bank").hide()
            $("#form-number").hide()
            $(".nominal-mask").inputmask({
                alias: "nominal"
            })

            $("#method").change(function() {
                if ($(this).val() == 1){
                    $("#form-bank").hide()
                    $("#form-number").hide()
                }else{
                    $("#form-bank").show()
                    $("#form-number").show()
                }

                if($(this).val() == 3){
                    $("#form-number label").html("Nomor Giro");

                }else{
                    $("#form-number label").html("No. Referensi");
                }
                $("#form-bank select").val("").trigger("change")
            })
        })
    </script>
@endpush