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

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

            <div class="row mt-3">
                <div class="col-sm-6">
                    <table class="table-padding">
                        <tr>
                            <td>No. Invoice</td>
                            <td class="divide">:</td>
                            <td>{{ $invoice->number }}</td>
                        </tr>
                        <tr>
                            <td>Tanggal</td>
                            <td class="divide">:</td>
                            <td>{{ Common::dateFormat($invoice->setdate, 'dd mmmm yyyy') }}</td>
                        </tr>
                        <tr>
                            <td>Nama Pelanggan</td>
                            <td class="divide">:</td>
                            <td>{{ $invoice->customer->name }}</td>
                        </tr>
                        <tr>
                            <td>Total Biaya</td>
                            <td class="divide">:</td>
                            <td>{{ 'Rp. ' . number_format($invoice->total, 0, '', '.') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <hr />

            <form method="post" action="{{ route('order.payment.store') }}" class="form-block">
                @csrf
                <input type="hidden" value="{{$invoice->id}}" name="id_invoice"/>
                <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <x-form.input-mask name="termin" label="Termin" mask="nominal" id="termin" :old="old('termin', 1)" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="table-responsive">
                            <table class="table" id="table-termin">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Tanggal Jatuh Tempo</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $old = old('termins', []);
                                        $duedate = [];
                                        $no = 1;
                                    @endphp

                                    @if (empty($old))
                                        <tr>
                                            <td>1</td>
                                            <td>
                                                <x-form.date-picker name="termins[duedate][]" id="duedate1"
                                                    picker-type="date" />
                                            </td>
                                            <td>
                                                <x-form.input-group-mask name="termins[total][]" mask="nominal"
                                                    addon="Rp" :old="$invoice->total" />
                                            </td>
                                        </tr>
                                    @else
                                        @foreach ($old['duedate'] as $index => $d)
                                            <tr>
                                                <td>{{ $no }}</td>
                                                <td>
                                                    <x-form.date-picker name="termins[duedate][]"
                                                        id="duedate{{ $no }}" picker-type="date"
                                                        :old="$d" />
                                                </td>
                                                <td>
                                                    <x-form.input-group-mask name="termins[total][]" mask="nominal"
                                                        addon="Rp" :old="str_replace('.', '', $old['total'][$index])" />
                                                </td>
                                            </tr>

                                            @php
                                                array_push($duedate, $d);
                                                $no++;
                                            @endphp
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <x-form.button-submit :cancel-route="route('order.invoice.index')" />
            </form>

        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript">
    </script>
    <script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"
        type="text/javascript"></script>

    <script>
        var error =
            "@isset($errors->all()[0]) {{ $errors->all()[0] }} @endisset"

        $(document).ready(function() {
            if (error != "")
                setNotiffail(error)

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

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

                $("#form-bank select").val("").trigger("change")
            })

            $("#termin").blur(function() {
                var termin = parseInt($(this).val())

                if (termin < 1) {
                    swal("FAILED", "Termin minimal 1 kali", "error")
                    return false
                }

                $("#table-termin tbody").empty()

                for (i = 1; i <= termin; i++) {
                    $("#table-termin tbody").append(`<tr>
                        <td>${i}</td>
                        <td>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <small><i class="mdi mdi-calendar-today"></i></small>
                                    </div>
                                </div>
                                <input type="text" name="termins[duedate][]" id="duedate${i}" class="form-control date-picker" placeholder="....." autocomplete="off" readonly="readonly" style="cursor: pointer; background: white;">
                            </div>
                        </td>
                        <td>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text text-dark">
                                        <small>Rp</small>
                                    </div>
                                </div>
                                <input type="text" name="termins[total][]" class="form-control nominal-mask" placeholder="....." autocomplete="off">
                            </div>
                        </td>
                    </tr>`)

                    $(".nominal-mask").inputmask({
                        alias: "nominal"
                    })
                    setDatePicker("#duedate" + i)
                }
            })
        })
    </script>
@endpush