@extends('tenant.settings.general.all-general-settings')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.general_settings') => route('tenant.settings.general.show-page', ['type' => 'company-information']),
            __('breadcrumb.customer_banks') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.general.general-banks'])
@endsection

@section('settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="d-flex align-items-center justify-content-between">
            <h4>@lang('settings/general/general-banks.customer_banks')</h4>

            <button class="btn btn-sm orange-btn" type="button" title="{{__('general.add')}}" data-bs-toggle="modal"
                data-bs-target="#addBankModal">
                <i class="fas fa-plus-circle"></i> @lang('settings/general/general-banks.add_client_bank')
            </button>
        </div>

        <div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th class="xs-td">#</th>
                        <th class="md-td">@lang('settings/general/general-banks.bank_name')</th>
                        <th class="md-td">@lang('settings/general/general-banks.status')</th>
                        <th class="sm-td"></th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($general_banks as $general_bank)
                        <tr>
                            <td class="xs-td">{{ $loop->iteration }}</td>
                            <td class="md-td">{{ $general_bank->name }}</td>
                            <td class="md-td">
                                <span
                                    class="status-badge {{ $general_bank->active_status ? 'green-status' : 'red-status' }}">
                                    {{ $general_bank->active_status ? trans('settings/general/general-banks.active') : trans('settings/general/general-banks.not_active') }}
                                </span>

                                <input type="checkbox" id="activeStatusToggle{{ $general_bank->id }}"
                                    class="custom-checkbox activeStatusToggle"
                                    {{ $general_bank->active_status ? 'checked' : '' }}
                                    data-bankId="{{ $general_bank->id }}">
                            </td>

                            <td class="sm-td">
                                <x-operations-btn>
                                    <li>
                                        <button class="btn edit-bank-btn" type="button"
                                            data-bank="{{ json_encode($general_bank) }}" data-bs-toggle="modal"
                                            data-bs-target="#editBankModal">
                                            <i class="fas fa-edit"></i> @lang('settings/general/general-banks.edit')
                                        </button>
                                    </li>

                                    <li>
                                        <button class="btn delete-bank-btn" type="button">
                                            <i class="fas fa-trash-alt"></i> @lang('settings/general/general-banks.delete')
                                        </button>

                                        <form
                                            action="{{ route('tenant.settings.general.general-banks.destroy', ['general_bank' => $general_bank->id]) }}"
                                            method="post" class="delete-bank-form">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </li>
                                </x-operations-btn>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%">
                                @lang('settings/general/general-banks.there_are_no_client_banks_yet')
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Add new bank modal --}}
        <div class="modal fade" id="addBankModal" tabindex="-1" role="dialog" aria-labelledby="addBankModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addBankModalLabel">@lang('settings/general/general-banks.add_new_bank')</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.general.general-banks.store') }}" method="post"
                            id="addBankForm">
                            @csrf

                            <div>
                                <label for="bankName" class="rs">@lang('settings/general/general-banks.bank_name')</label>
                                <input type="text" name="name" id="bankName" class="form-control"
                                    placeholder="{{__('settings/general/general-banks.bank_name')}}" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" form="addBankForm"
                            class="btn orange-btn form-btn">@lang('settings/general/general-banks.add')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('settings/general/general-banks.close')</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Edit the bank modal --}}
        <div class="modal fade" id="editBankModal" tabindex="-1" role="dialog" aria-labelledby="editBankModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editBankModalLabel">@lang('settings/general/general-banks.edit_bank')</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="editBankForm">
                            @csrf
                            @method('PUT')

                            <div>
                                <label for="editBankName" class="rs">@lang('settings/general/general-banks.bank_name')</label>
                                <input type="text" name="name" id="editBankName" class="form-control"
                                    placeholder="{{__('settings/general/general-banks.bank_name')}}" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" form="editBankForm"
                            class="btn orange-btn form-btn">@lang('settings/general/general-banks.edit')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('settings/general/general-banks.close')</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Change the bank status form --}}
        <form action="" method="post" id="changeBankStatusForm">
            @csrf
            <input type="hidden" name="status" id="statusColumn" value="">
        </form>
    </div>
@endsection

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

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

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

            $('.activeStatusToggle').on('change', function(e) {
                $.confirm({
                    title: $lang('settings.general.general-banks.are_you_sure_you_want_to_change_the_banks_status'),
                    content: '',
                    type: 'red',
                    buttons: {
                        ok: {
                            text: $lang('settings.general.general-banks.yes'),
                            btnClass: 'btn orange-btn',
                            keys: ['enter'],
                            action: () => {
                                let bankId = $(this).attr('data-bankId');
                                let newStatus = e.target.checked;

                                $('#changeBankStatusForm #statusColumn').val((newStatus ==
                                    true) ? 1 : 0);
                                $('#changeBankStatusForm').attr('action',
                                    "/settings/general/general-banks/" + bankId +
                                    "/change-status");
                                $('#changeBankStatusForm').trigger('submit');
                            }
                        },
                        cancel: {
                            text: $lang('settings.general.general-banks.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc'],
                            action: () => {
                                const oldStatus = !$(this).prop('checked');
                                $(this).prop('checked', oldStatus);
                            }
                        }
                    }
                });
            });

            $('.edit-bank-btn').on('click', function() {
                const bank = JSON.parse($(this).attr('data-bank'));
                const link = `/settings/general/general-banks/${bank.id}`;
                $('#editBankModal form').prop('action', link);
                $('#editBankModal form #editBankName').val(bank.name);
            });

            $('.delete-bank-btn').on('click', function() {
                $.confirm({
                    title: $lang('settings.general.general-banks.are_you_sure_you_want_to_delete_the_bank'),
                    content: '',
                    type: 'red',
                    buttons: {
                        ok: {
                            text: $lang('settings.general.general-banks.yes'),
                            btnClass: 'btn orange-btn',
                            keys: ['enter'],
                            action: () => {
                                $(this).closest('li').find('form.delete-bank-form').trigger(
                                    'submit');
                            }
                        },
                        cancel: {
                            text: $lang('settings.general.general-banks.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc']
                        }
                    }
                });
            });
        });
    </script>
@endpush