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

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

        <form method="post" action="{{ route('parameter.update.package', $parameter->encrypted_id) }}" class="form-block">
            @csrf
            @method('put')

            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <x-form.input-text
                        name="name"
                        label="Nama"
                        :old="old('name', $parameter->name)"
                    />
                </div>
                <div class="col-sm-6 col-md-4">
                    <x-form.input-group-mask
                        name="value3"
                        label="Jumlah User"
                        mask="nominal"
                        addon="User"
                        addon-position="right"
                        :old="old('value3', $parameter->value3)"
                    />
                </div>
            </div>

            <x-form.text-area
                name="description"
                label="Deskripsi"
                :old="old('description', $parameter->description)"
            />

            <x-section-form
                label="Harga Tahunan"
                icon="mdi mdi-checkbook"
                class="mb-3"
            />
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <x-form.input-group-mask
                        name="yearly"
                        label="Harga"
                        mask="nominal"
                        addon="Rp"
                        :old="old('yearly', $price->yearly->price)"
                    />
                </div>
                <div class="col-sm-6 col-md-4">
                    <x-form.input-group-mask
                        name="yearly_discount_rp"
                        label="Nominal Diskon"
                        mask="nominal"
                        addon="Rp"
                        :old="old('yearly_discount_rp', $price->yearly->discount_rp)"
                    />
                </div>
                <div class="col-sm-6 col-md-2">
                    <x-form.input-group-mask
                        name="yearly_discount_percent"
                        label="Persentase Diskon"
                        mask="decimal"
                        addon="%"
                        addon-position="right"
                        :old="old('yearly_discount_percent', $price->yearly->discount_percent)"
                    />
                </div>
            </div>

            <x-section-form
                label="Harga Bulanan"
                icon="mdi mdi-checkbook"
                class="mb-3"
            />
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <x-form.input-group-mask
                        name="monthly"
                        label="Harga"
                        mask="nominal"
                        addon="Rp"
                        :old="old('monthly', $price->monthly->price)"
                    />
                </div>
                <div class="col-sm-6 col-md-4">
                    <x-form.input-group-mask
                        name="monthly_discount_rp"
                        label="Nominal Diskon"
                        mask="nominal"
                        addon="Rp"
                        :old="old('monthly_discount_rp', $price->monthly->discount_rp)"
                    />
                </div>
                <div class="col-sm-6 col-md-2">
                    <x-form.input-group-mask
                        name="monthly_discount_percent"
                        label="Persentase Diskon"
                        mask="decimal"
                        addon="%"
                        addon-position="right"
                        :old="old('monthly_discount_percent', $price->monthly->discount_percent)"
                    />
                </div>
            </div>

            <x-section-form
                label="Fitur Aplikasi"
                icon="mdi mdi-post-outline"
                class="mb-2"
            />

            <table class="table-feature">
                @foreach ($features as $f)
                    <tr>
                        <td>{{ $f->name }}</td>
                        <td class="pl-4">
                            <x-form.checkbox
                                :name="'feature[' . $f->id . ']'"
                                value="1"
                                :old="old('feature[' . $f->id . ']', (in_array($f->id, $package_features)) ? 1 : 0)"
                            />
                        </td>
                    </tr>
                @endforeach
            </table>

            <x-form.button-submit :cancel-route="route('parameter.index', 'package')" />
        </form>
    </div>
</div>
@endsection

@push('styles')
<style>
    .table-feature td {
        border-bottom: 1px dashed #d3d7db;
    }
</style>
@endpush

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

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

    $(".nominal-mask").inputmask({ "alias": "nominal" })
    $(".decimal-mask").inputmask({ "alias": "decimal" })
})
</script>
@endpush