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

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

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

@section('warehouses-settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="d-flex justify-content-between">
            <h4>@lang('settings/warehouses/units/index.defintion_unit')</h4>

            <button class="btn btn-sm orange-btn" data-bs-toggle="modal" data-bs-target="#addNewUnitModal">
                <i class="fas fa-plus-circle"></i> @lang('settings/warehouses/units/index.add_new_unit')
            </button>
        </div>

        <div>
            @include('tenant.settings.warehouses.units.create')

            @include('tenant.settings.warehouses.units.edit')

            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th class="xs-td">#</th>
                        <th class="md-td">@lang('general.name')</th>
                        <th class="xs-td">@lang('settings/warehouses/units/index.decimal_value')</th>
                        <th class="sm-td">@lang('settings/warehouses/units/index.sub_units')</th>
                        <th class="sm-td">@lang('general.procedures')</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($units as $unit)
                        <tr>
                            <td class="xs-td">{{ $loop->iteration }}</td>
                            <td class="md-td">{{ $unit->name }}</td>
                            <td class="xs-td">{{ $unit->is_decimal ? __('settings/warehouses/units/index.yes') : __('settings/warehouses/units/index.no') }}</td>
                            <td class="sm-td">
                                @if ($unit->sub_units->count() > 0)
                                    <div class="accordion" id="accordionExample">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingTwo{{ $loop->iteration }}">
                                                <button class="accordion-button collapsed me-auto" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#collapseTwo{{ $loop->iteration }}"
                                                    aria-expanded="false" aria-controls="collapseTwo">
                                                    @lang('settings/warehouses/units/index.show_sub_units')
                                                </button>
                                            </h2>
                                            <div id="collapseTwo{{ $loop->iteration }}" class="accordion-collapse collapse"
                                                aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <table class="table">
                                                        @foreach ($unit->sub_units as $sub_unit)
                                                            <tr class="my-1">
                                                                <td>
                                                                    <span>{{ $sub_unit->name }}</span>
                                                                </td>
                                                                <td>
                                                                    <button
                                                                        class="btn btn-sm rounded-circle btn-outline-primary edit-unit-btn"
                                                                        data-unitData="{{ json_encode($sub_unit) }}"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#editUnitModal" title="{{__('general.edit')}}">
                                                                        <i class="fas fa-edit"></i>
                                                                    </button>
                                                                    <button
                                                                        class="btn btn-sm rounded-circle btn-outline-danger delete-unit-btn"
                                                                        data-unitId="{{ $sub_unit->id }}" title="{{__('general.delete')}}">
                                                                        <i class="fas fa-trash-alt"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    ---
                                @endif
                            </td>

                            <td class="sm-td">
                                <x-operations-btn>
                                    <li>
                                        <button class="btn edit-unit-btn" data-unitData="{{ json_encode($unit) }}"
                                            data-bs-toggle="modal" data-bs-target="#editUnitModal" title={{ __('settings/warehouses/units/index.edit') }}>
                                            <i class="fas fa-edit"></i> @lang('general.edit')
                                        </button>
                                    </li>
                                    <li>
                                        <button class="btn delete-unit-btn" data-unitId="{{ $unit->id }}"
                                            title="حذف">
                                            <i class="fas fa-trash-alt"></i> @lang('general.delete')
                                        </button>
                                    </li>
                                </x-operations-btn>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

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

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

            $('#editUnitForm').on('submit', function(event) {
                event.preventDefault();
                confirmAndSubmit('editUnitForm', {
                    type: 'green'
                });
            });

            $('.edit-unit-btn').on('click', function() {
                const unit_data = JSON.parse($(this).attr('data-unitData'));
                $('#editUnitModal form').attr('action', `/settings/warehouses/units/${unit_data.id}`);
                $('#editUnitModal input[name="name"]').val(unit_data.name);
                $('#editUnitModal input[name="is_decimal"]').attr('checked', unit_data.is_decimal ? true :
                    false);

                let $select = $('#editUnitModal #edit_unit_id').selectize();
                let selectize = $select[0].selectize;
                selectize.setValue(unit_data.unit_id);

                $('#editUnitModal #edit_unit_id').trigger('change')
                $('#editUnitModal input[name="unit_count"]').val(unit_data.unit_count);

                if (unit_data.unit_id == null) {
                    $('#editUnitModal #edit_unit_count').parent().hide();
                }
            });

            $('.modal select[name="unit_id"]').on('change', function() {
                const unit_count_parent = $(this).closest('.modal').find('input[name="unit_count"]')
                    .parent();
                if ($(this).val())
                    unit_count_parent.show();
                else
                    unit_count_parent.hide();
            });

            $('.delete-unit-btn').on('click', function() {
                let that = this;

                $.confirm({
                    title: $lang('settings.warehouses.units.index.are_you_sure_you_want_to_delete_the_unit'),
                    content: '',
                    type: 'red',
                    buttons: {
                        ok: {
                            text:$lang('general.yes'),
                            btnClass: 'btn orange-btn',
                            keys: ['enter'],
                            action: function() {
                                const unit_id = $(that).attr('data-unitId');
                                const csrf_token = $('meta[name="csrf-token"]').attr('content');

                                let deleteForm = `
                                <form action="/settings/warehouses/units/${unit_id}" method="POST" id="deleteUnitForm">
                                    <input type="hidden" name="_token" value="${csrf_token}">
                                    <input type="hidden" name="_method" value="DELETE">
                                </form>
                            `;

                                $('body').append(deleteForm);
                                $('#deleteUnitForm').trigger('submit');
                            }
                        },
                        cancel: {
                            text:$lang('general.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc']
                        }
                    }
                });
            });
        });
    </script>
@endpush