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

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.accounting_settings') => route('tenant.settings.accounting.taxes.index', ['type' => 'taxes']),
            __('breadcrumb.taxes') => '#',
        ],
    ])
@endsection

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

@section('accounting-settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="col col-lg-10 mx-auto">
            <div class="d-flex justify-content-between align-items-center">
                <h4>@lang('settings/accounting/taxes.taxes_settings')</h4>

                @can('accountingSettings-taxes-add')
                    <button class="btn btn-sm orange-btn" type="button" data-bs-toggle="modal" data-bs-target="#addTaxModal">
                        <i class="fas fa-plus-circle"></i> @lang('settings/accounting/taxes.add_new_taxes')
                    </button>
                @endcan
            </div>

            {{-- Taxes List --}}
            <div class="m-auto mt-3">
                <table class="table table-bordered table-striped without-herotable">
                    <thead>
                        <tr>
                            <th class="xs-td">#</th>
                            <th class="xs-td">@lang('settings/accounting/taxes.tax_ratio')</th>
                            <th class="md-td">@lang('settings/accounting/taxes.account_name')</th>
                            <th class="xs-td">@lang('settings/accounting/taxes.default')</th>
                            <th class="sm-td">@lang('settings/accounting/taxes.status')</th>
                            <th class="xs-td">@lang('settings/accounting/taxes.procedures')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($taxes as $tax)
                            <tr>
                                <td class="xs-td">{{ $loop->iteration }}</td>
                                <td class="xs-td">{{ $tax->value }} %</td>
                                <td class="md-td">{{ $tax->account->name }}</td>
                                <td class="xs-td">
                                    {{ $tax->is_default ? __('settings/accounting/taxes.default'): '' }}
                                </td>
                                <td class="sm-td">
                                    <div class="d-flex">
                                        <span class="status-badge {{ $tax->status ? 'green-status' : 'red-status' }}">
                                            {{ $tax->status_as_string }}
                                        </span>

                                        @can('accountingSettings-taxes-activate')
                                            <div class="form-check form-switch">
                                                <form
                                                    action="{{ route('tenant.settings.accounting.taxes.change-status', ['id' => $tax->id]) }}"
                                                    method="post">
                                                    @csrf
                                                    <input type="checkbox" class="custom-checkbox change-tax-status"
                                                        name="status" value="1" id="statusSwitch{{ $loop->index }}"
                                                        {{ $tax->status == 1 ? 'checked' : '' }}>
                                                </form>
                                            </div>
                                        @endcan
                                    </div>
                                </td>
                                <td class="xs-td">
                                    <x-operations-btn>
                                        <li>
                                            <button class="btn show-edit-modal-btn" data-taxInfo="{{ json_encode($tax) }}">
                                                <i class="fas fa-edit"></i> @lang('settings/accounting/taxes.edit')
                                            </button>
                                        </li>
                                    </x-operations-btn>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">@lang('settings/accounting/taxes.no_taxes_yet')</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>


        {{-- Add New Tax Modal --}}
        <div class="modal fade" id="addTaxModal" tabindex="-1" role="dialog" aria-labelledby="addTaxModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addTaxModalLabel">@lang('settings/accounting/taxes.add_new_taxes')</h5>
                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <form action="{{ route('tenant.settings.accounting.taxes.store') }}" method="post"
                            id="addTaxForm">
                            @csrf

                            <div class="from-group">
                                <label for="taxValue" class="rs">@lang('settings/accounting/taxes.tax_ratio')</label>
                                <input type="number" min="0" step=".001" name="value" id="taxValue"
                                    class="form-control" placeholder="{{__('settings/accounting/taxes.tax_ratio')}}" required>
                            </div>

                            <div class="from-group mt-3">
                                <label for="account_id" style="max-width:100%; width: 100%;">
                                    <span class="rs">@lang('settings/accounting/taxes.link_to_accounting')</span> <br>

                                    <select name="account_id" id="account_id" style="max-width:100%; width: 100%;" required>
                                        <option value="" selected disabled> @lang('settings/accounting/taxes.select_account')</option>
                                        @foreach ($leaf_accounts as $account)
                                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>

                            <div class="from-group mt-3">
                                <label for="isDefault">@lang('settings/accounting/taxes.default')</label>
                                <input type="checkbox" name="is_default" id="isDefault" class="custom-checkbox"
                                    value="1">
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" form="addTaxForm" class="btn orange-btn form-btn">@lang('general.add')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('general.cancel')</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Edit Tax Modal --}}
        <div class="modal fade" id="editTaxModal" tabindex="-1" role="dialog" aria-labelledby="editTaxLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editTaxModalLabel">@lang('settings/accounting/taxes.edit_tax')</h5>
                        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <form action="#" method="post" id="editTaxForm">
                            @csrf
                            @method('PUT')

                            <div class="from-group">
                                <label for="editTaxValue" class="rs">@lang('settings/accounting/taxes.tax_ratio')</label>
                                <input type="number" min="0" step="0.001" name="value" id="editTaxValue"
                                    class="form-control" placeholder="{{__('settings/accounting/taxes.tax_ratio')}}" required>
                            </div>

                            <div class="from-group mt-3">
                                <label for="edit_account_id" style="max-width:100%; width: 100%;">
                                    <span class="rs">@lang('settings/accounting/taxes.link_to_accounting')</span> <br>

                                    <select name="account_id" id="edit_account_id" style="max-width:100%; width: 100%;"
                                        required>
                                        <option value=""> @lang('settings/accounting/taxes.select_account')</option>
                                        @foreach ($leaf_accounts as $account)
                                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>

                            <div class="from-group mt-3">
                                <label for="editIsDefault">@lang('settings/accounting/taxes.default')</label>
                                <input type="checkbox" name="is_default" id="editIsDefault" class="custom-checkbox"
                                    value="1">
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" form="editTaxForm"
                            class="btn orange-btn form-btn">@lang('settings/accounting/taxes.edit')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('settings/accounting/taxes.close')</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

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

            $('.change-tax-status').on('change', function(e) {
                setTimeout(() => {
                    $(this).closest('form').trigger('submit');
                }, 0);
            });

            $('.show-edit-modal-btn').on('click', function() {
                const tax = JSON.parse($(this).attr('data-taxInfo'));
                $('#editTaxValue').val(tax.value);
                $('#editIsDefault').prop('checked', tax.is_default);

                const selectize = $(`#edit_account_id`)[0].selectize;
                selectize.destroy();
                $(`#edit_account_id option[value="${tax.account_id}"]`).attr('selected', 'selected');
                $(`#edit_account_id`).selectize();

                $('#editTaxModal #editTaxForm').prop('action', `/settings/accounting/taxes/${tax.id}`);

                $('#editTaxModal').modal('show');
            });
        });
    </script>
@endpush