@extends('tenant.settings.warehouses.warehouses-settings-tabs')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.warehouse_settings')  => route('tenant.settings.warehouses.bonds.index'),
            __('breadcrumb.purchase_invoice_settings')  => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.warehouses.purchase-invoices'])
@endsection

@section('warehouses-settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <form action="{{ route('tenant.settings.warehouses.purchase-invoices.save') }}" method="post"
            id="purchaseInvoicesSettingForm">
            @csrf

            <div>
                <label for="days" class="fw-bold rs">@lang('settings/warehouses/purchase-invoices/index.allowed_purchase_invoice_date_before_days_count')</label>
                <div>
                    <input type="number" name="allowed_purchase_invoice_date_before_days_count" id="days"
                        class="form-control w-25" value="{{ $allowed_purchase_invoice_date_before_days_count }}"
                        placeholder="{{__('settings/warehouses/purchase-invoices/index.days_count')}}" required>
                </div>
            </div>

            <div class="my-4">
                <h6>@lang('settings/warehouses/purchase-invoices/index.purchase_invoice_expenses')</h6>
                <div>
                    <table class="table table-bordered table-striped without-herotable" id="expenses-items">
                        <thead>
                            <tr>
                                <th class="xs-td">#</th>
                                <th class="md-td">@lang('general.name')</th>
                                <th class="md-td">@lang('settings/warehouses/purchase-invoices/index.account')</th>
                                <th class="sm-td">@lang('general.procedures')</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr style="display: none">
                                <td class="xs-td"></td>
                                <td class="md-td">
                                    <input type="hidden" value="4">
                                    <input type="text" class="form-control expenses-item-name" value="">
                                </td>
                                <td class="xs-td">
                                    <div class="selectize-control expenses-item-account w-100 single rtl">
                                        <div class="selectize-input items required invalid not-full has-options"><input
                                                type="select-one" autocomplete="off" tabindex=""
                                                placeholder="{{__('settings/warehouses/purchase-invoices/index.select_account')}}" style="width: 72.6806px;"></div>
                                        <div class="selectize-dropdown single expenses-item-account w-100"
                                            style="display: none;">
                                            <div class="selectize-dropdown-content"></div>
                                        </div>
                                    </div>
                                </td>

                                <td class="sm-td">
                                    <button type="button"
                                        class="btn btn-outline-danger btn-sm rounded-pill delete-expenses-item-btn"
                                        data-index="2" title="{{__('general.delete')}}">
                                        @lang('general.delete') <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>

                            @foreach ($standard_purchase_expenses as $expenses)
                                <tr>
                                    <td class="xs-td">{{ $loop->iteration }}</td>

                                    <td class="md-td">
                                        <input type="hidden" name="expenses[{{ $loop->index }}][id]"
                                            value="{{ $expenses->id }}">
                                        <input type="text" name="expenses[{{ $loop->index }}][name]"
                                            class="form-control expenses-item-name" value="{{ $expenses->name }}" required>
                                    </td>

                                    <td class="xs-td">
                                        <select name="expenses[{{ $loop->index }}][account_id]"
                                            class="expenses-item-account w-100" required>
                                            <option value=""> @lang('settings/warehouses/purchase-invoices/index.select_account')</option>
                                            @foreach ($accounts as $account)
                                                <option value="{{ $account->id }}"
                                                    {{ $expenses->account_id == $account->id ? 'selected' : '' }}>
                                                    {{ $account->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>

                                    <td class="sm-td">
                                        <button type="button"
                                            class="btn btn-outline-danger btn-sm rounded-pill delete-expenses-item-btn"
                                            data-index="{{ $loop->index }}" title="{{__('general.delete')}}">
                                            @lang('general.delete') <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            @if ($standard_purchase_expenses->isEmpty())
                                <tr class="empty-message">
                                    <td colspan="100%" class="bg-white">
                                        @lang('settings/warehouses/purchase-invoices/index.there_are_no_invoice_expenses_yet')
                                    </td>
                                </tr>
                            @else
                                <tr class="empty-message"style="display: none">
                                    <td colspan="100%" class="bg-white">
                                        @lang('settings/warehouses/purchase-invoices/index.there_are_no_invoice_expenses_yet')
                                    </td>
                                </tr>
                            @endif

                            <tr>
                                <td>
                                    <button type="button"
                                        class="btn orange-btn add-expenses-item-btn">
                                        @lang('settings/warehouses/purchase-invoices/index.add_new')
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <div class="text-center">
                <button class="btn orange-btn">@lang('general.save')</button>
            </div>
        </form>
    </div>
@endsection


@push('script')
    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

        $(() => {
            $('#purchaseInvoicesSettingForm').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('purchaseInvoicesSettingForm', {
                    type: 'green'
                });
            });

            $("body").on("click", ".delete-expenses-item-btn", function() {
                const index = $(this).attr("data-index");
                const iteration = +index + 1;
                $(`#expenses-items tbody tr:eq(${iteration})`).remove();

                const items = $("#expenses-items tbody tr");
                items.map((i, item) => {
                    $(item).find("td").first().text(i + 1);
                    $(item).find(".delete-expenses-item-btn").attr("data-index", i - 1);
                });
                if (items.length == 1 || items.length == 0) {
                    $('.empty-message').show();
                }
            });

            $(".add-expenses-item-btn").on("click", function() {
                const index = $("#expenses-items tbody tr").length;
                const copiedItem = $("#expenses-items tbody tr").first().clone();
                copiedItem.css("display", "");
                copiedItem.find("td").first().text(index + 1);
                copiedItem.find("td").first().find();
                copiedItem.find(".expenses-item-name").first().attr("value", "");
                copiedItem.find(".expenses-item-name").first().prop("name", `expenses[${index}][name]`);
                copiedItem.find(".expenses-item-name").first().prop("required", true);
                copiedItem.find(".delete-expenses-item-btn").attr("data-index", index);

                const accountsList = @json($accounts);
                let accountsSelect =
                    `<select name="expenses[${index}][account_id]" class="expenses-item-account w-100" required>`;
                accountsSelect += `<option value="">اختيار الحساب</option>`;
                accountsList.forEach((account) => {
                    accountsSelect += `<option value="${account.id}">${account.name}</option>`;
                });
                accountsSelect += "</select>";
                copiedItem.find(".expenses-item-account").parent().html(accountsSelect);
                $("#expenses-items tbody").append(copiedItem);
                copiedItem.find(".expenses-item-account").selectize();
                $(".empty-message").hide();
            });
        });
    </script>
@endpush