@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>No. Order</td>
                        <td class="divide">:</td>
                        <td>{{ $workorder->number }}</td>
                    </tr>
                    <tr>
                        <td>Tanggal</td>
                        <td class="divide">:</td>
                        <td>{{ Common::dateFormat($workorder->setdate, 'dd mmmm yyyy') }}</td>
                    </tr>
                    <tr>
                        <td>Nama Pelanggan</td>
                        <td class="divide">:</td>
                        <td>{{ $workorder->sales->customer->name }}</td>
                    </tr>
                    <tr>
                        <td>Total Biaya</td>
                        <td class="divide">:</td>
                        <td>{{ 'Rp. ' . number_format($workorder->total, 0, '', '.') }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-sm-6">
                <table class="table-padding">
                    <tr>
                        <td>Tipe Bahan</td>
                        <td class="divide">:</td>
                        <td>{{ $workorder->sales->material->name }}</td>
                    </tr>
                    <tr>
                        <td>Keterangan</td>
                        <td class="divide">:</td>
                        <td></td>
                    </tr>
                </table>

                {{ $workorder->sales->material_descr }}
            </div>
        </div>
        <hr>

        <form method="post" action="{{ route('order.work.store.invoice', $workorder->encrypted_id) }}" class="form-block">
            @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>
            <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 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>
            <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="$workorder->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.work.invoice')" />
        </form>
    </div>
</div>
@endsection

@push('scripts')
<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