@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_request_terms') => '#',
        ],
    ])
@endsection

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

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

            <div>
                <h4>@lang('settings/warehouses/purchase-order-conditions/index.arabic_purchase_request_terms')</h4>

                <table class="table table-bordered table-striped without-herotable">
                    <thead>
                        <tr>
                            <th class="md-td">#</th>
                            <th class="lg-td">@lang('settings/warehouses/purchase-order-conditions/index.term')</th>
                            <th class="sm-td">@lang('general.procedures')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($ar_purchase_order_conditions as $puchase_order_condition)
                            <tr>
                                <td class="md-td">{{ $loop->iteration }}</td>
                                <td class="md-td">
                                    <input type="text" class="form-control" name="ar_purchase_order_conditions[]"
                                        value="{{ $puchase_order_condition }}" required>
                                </td>
                                <td class="sm-td">
                                    <button class="btn btn-outline-danger rounded-pill delete-condition-btn" title="{{__('general.delete')}}">
                                        <i class="fas fa-trash-alt"></i> @lang('general.delete')
                                    </button>
                                </td>
                            </tr>.
                        @empty
                            <tr>
                                <td colspan="100%">
                                    @lang('settings/warehouses/purchase-order-conditions/index.no_conditions_yet')
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan="100%">
                                <button type="button" class="btn orange-btn add-ar-condition-btn">
                                    @lang('settings/warehouses/purchase-order-conditions/index.add_new_term')
                                </button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="mt-5">
                <h4> @lang('settings/warehouses/purchase-order-conditions/index.english_purchase_request_terms')</h4>

                <table class="table table-bordered table-striped without-herotable">
                    <thead>
                        <tr>
                            <th class="md-td">#</th>
                            <th class="lg-td">@lang('settings/warehouses/purchase-order-conditions/index.term')</th>
                            <th class="sm-td">@lang('general.procedures')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($en_purchase_order_conditions as $puchase_order_condition)
                            <tr>
                                <td class="md-td">{{ $loop->iteration }}</td>
                                <td class="md-td">
                                    <input type="text" class="form-control" name="en_purchase_order_conditions[]"
                                        value="{{ $puchase_order_condition }}" required>
                                </td>
                                <td class="sm-td">
                                    <button class="btn btn-outline-danger rounded-pill delete-condition-btn" title="{{__('general.delete')}}">
                                        <i class="fas fa-trash-alt"></i> @lang('general.delete')
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%">
                                    @lang('settings/warehouses/purchase-order-conditions/index.no_conditions_yet')
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan="100%">
                                <button type="button" class="btn orange-btn add-en-condition-btn">
                                    @lang('settings/warehouses/purchase-order-conditions/index.add_new_term')
                                </button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </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';

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

            $('body').on('click', '.delete-condition-btn', function() {
                const tbody = $(this).closest('table').find('tbody');
                $(this).closest('tr').remove();
                tbody.find('tr').map((index, tr) => {
                    $(tr).find('td').first().text(index + 1);
                });
            });

            $('body').on('click', '.add-ar-condition-btn', function() {
                const tbody = $(this).closest('table').find('tbody');
                const current_items_count = tbody.find('tr').length;
                tbody.append(buildConditionItem("ar", current_items_count));
            });

            $('body').on('click', '.add-en-condition-btn', function() {
                const tbody = $(this).closest('table').find('tbody');
                const current_items_count = tbody.find('tr').length;
                tbody.append(buildConditionItem("en", current_items_count));
            });

            function buildConditionItem(lang, current_items_count) {
                const newItem = `<tr>
                <td class="md-td">${current_items_count + 1}</td>
                <td class="md-td">
                    <input type="text" class="form-control" name="${lang}_purchase_order_conditions[]" value="" required>
                </td>
                <td class="sm-td">
                    <button class="btn btn-outline-danger rounded-pill delete-condition-btn" title="حذف">
                        <i class="fas fa-trash-alt"></i> حذف
                    </button>
                </td>
            </tr>`;

                return newItem;
            }
        });
    </script>
@endpush