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

@section('style')
    <link rel="stylesheet" href="{{ asset('css/libraries/jstree/default/style.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/accounting/cost-centers/index.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">
@endsection

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.home') => '/',
            __('breadcrumb.accounting') => '/accounting/accounts',
            __('breadcrumb.cost_centers') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'accounting.cost-centers'])
@endsection

@section('content-field')

    <div>
        @can('accounting-costCenterTree-add')
            <div>
                <button type="button" class="btn btn-sm orange-btn" data-bs-toggle="modal" data-bs-target="#addCostCenterModal">
                    <i class="fas fa-plus-circle"></i>  @lang('accounting/cost-center.add_root_cost_center')
                </button>
            </div>
        @endcan

        {{-- Add Cost Center Form --}}
        <div class="modal fade" id="addCostCenterModal" tabindex="-1" role="dialog"
            aria-labelledby="addCostCenterModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addCostCenterModalLabel">@lang('accounting/cost-center.add_new_cost_center')</h5>
                        <button type="button" class="btn-close close-add-cost-center-layout mx-0"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('tenant.accounting.cost-centers.store') }}" method="post"
                            id="addCostCenterForm">
                            @csrf

                            <div class="row flex-column align-content-center">
                                <div class="mb-2">
                                    <label for="ar_name" class="rs">@lang('accounting/cost-center.arabic_name')</label>
                                    <input type="text" name="ar_name" id="ar_name" class="form-control" required>
                                </div>

                                <div class="mb-2">
                                    <label for="en_name" class="rs">@lang('accounting/cost-center.english_name')</label>
                                    <input type="text" name="en_name" id="en_name" class="form-control" required>
                                </div>
                            </div>

                            <input type="hidden" name="parent_id">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn orange-btn" form="addCostCenterForm">@lang('general.add')</button>
                        <button type="button" class="btn white-btn close-add-cost-center-layout"
                            data-bs-dismiss="modal">@lang('general.cancel')</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Delete Cost Center Form --}}
        <form action="#" method="post" class="delete-cost-center-form">
            @csrf
            @method('DELETE')
        </form>

        {{-- Edit Cost Center Form --}}
        <div class="modal fade" id="editCostCenterModal" tabindex="-1" role="dialog"
            aria-labelledby="editCostCenterModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editCostCenterModalLabel">@lang('accounting/cost-center.edit_cost_center')</h5>
                        <button type="button" class="btn-close mx-0 close-edit-cost-center-layout"></button>
                    </div>
                    <div class="modal-body">
                        <form action="#" method="post" id="editCostCenterForm">
                            @csrf
                            @method('PUT')

                            <div class="row flex-column align-content-center">
                                <div class="mb-2">
                                    <label for="ar_name" class="rs">@lang('accounting/cost-center.arabic_name')</label>
                                    <input type="text" name="ar_name" id="ar_name" class="form-control" required>
                                </div>

                                <div class="mb-2">
                                    <label for="en_name" class="rs"> @lang('accounting/cost-center.english_name')</label>
                                    <input type="text" name="en_name" id="en_name" class="form-control" required>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn orange-btn" form="editCostCenterForm"> @lang('general.edit')</button>
                        <button type="button" class="btn white-btn close-edit-cost-center-layout"
                            data-bs-dismiss="modal"> @lang('general.cancel')</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4 row">
            {{-- Cost-Centers Tree --}}
            <div class="col-3">
                <div id="cost-centers-tree">
                    <ul>
                        @foreach ($cost_centers as $cost_center)
                            @include('tenant.accounting.cost-centers.item-tree-template', [
                                'cost_center' => $cost_center,
                            ])
                        @endforeach
                    </ul>
                </div>
            </div>

            {{-- Cost-Centers Table --}}
            <div class="col-9">
                <h4>@lang('accounting/cost-center.cost_centers')</h4>
                <table class="table table-striped table-bordered w-100 without-herotable">
                    <thead>
                        <tr>
                            <th class="xs-td">#</th>
                            <th class="md-td">@lang('accounting/cost-center.arabic_name')</th>
                            <th class="md-td">@lang('accounting/cost-center.english_name')</th>
                            <th class="md-td">@lang('accounting/cost-center.belongs_to')</th>
                            <th class="sm-td">@lang('accounting/cost-center.status')</th>
                            <th class="sm-td">@lang('general.procedures')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($leaf_cost_centers as $cost_center)
                            <tr>
                                <td class="xs-td">{{ $loop->iteration }}</td>
                                <td class="md-td">{{ $cost_center->ar_name }}</td>
                                <td class="md-td">{{ $cost_center->en_name }}</td>
                                <td class="md-td">{{ $cost_center->parent ? $cost_center->parent->ar_name : '--' }}</td>
                                <td class="sm-td">
                                    @if ($cost_center->status)
                                        <form
                                            action="{{ route('tenant.accounting.cost-center.change-status', ['id' => $cost_center->id]) }}"
                                            method="POST" class="mt-2">
                                            @csrf
                                            <div class="row">
                                                <div class="col-6">
                                                    <span>{{ $cost_center->status_as_text }}</span>
                                                </div>
                                                <div class="col-4">

                                                    <a name="un-active">
                                                        <input type="checkbox" class="custom-checkbox change-tax-status"
                                                            name="un-active" value="1"
                                                            id="statusSwitch{{ $loop->index }}"
                                                            {{ $cost_center->status == 1 ? 'checked' : '' }}>
                                                    </a>
                                                </div>
                                            </div>
                                        </form>
                                    @else
                                        <form
                                            action="{{ route('tenant.accounting.cost-center.change-status', ['id' => $cost_center->id]) }}"
                                            method="POST" class="mt-2">
                                            @csrf
                                            <div class="row">
                                                <div class="col-6">
                                                    <span>{{ $cost_center->status_as_text }}</span>
                                                </div>
                                                <div class="col-4">
                                                    <a name="active">
                                                        <input type="checkbox" class="custom-checkbox change-tax-status"
                                                            name="active" value="1"
                                                            id="statusSwitch{{ $loop->index }}"
                                                            {{ $cost_center->status == 1 ? 'checked' : '' }}>
                                                    </a>
                                                </div>
                                            </div>
                                        </form>
                                    @endif
                                </td>

                                <td class="sm-td" data-costCenterData="{{ json_encode($cost_center) }}">
                                    <x-operations-btn>
                                        @can('accounting-costCenterTree-edit')
                                            <li>
                                                <button class="btn edit-costCenter-btn">
                                                    <i class="fas fa-edit"></i> @lang('general.edit')
                                                </button>
                                            </li>
                                        @endcan

                                        @can('accounting-costCenterTree-delete')
                                            <li>
                                                <button class="btn delete-costCenter-btn">
                                                    <i class="fas fa-trash-alt"></i> @lang('general.delete')
                                                </button>
                                            </li>
                                        @endcan
                                    </x-operations-btn>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">@lang('accounting/cost-center.no_cost_centers_yet')</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="my-2 text-center">
                    {!! $leaf_cost_centers->links() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        const addCostCenterPermission = "{{ Auth::user()->hasPermissionTo('accounting-costCenterTree-add') }}";
        const editCostCenterPermission = "{{ Auth::user()->hasPermissionTo('accounting-costCenterTree-edit') }}";
        const deleteCostCenterPermission = "{{ Auth::user()->hasPermissionTo('accounting-costCenterTree-delete') }}";
    </script>

    <script src="{{ asset('js/libraries/jstree.min.js') }}"></script>
    <script src="{{ asset('js/accounting/cost-centers/index.js') }}"></script>

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

        $(() => {
            $('#addCostCenterForm').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('addCostCenterForm', {
                    type: 'green'
                });
            });
            $('#editCostCenterForm').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('editCostCenterForm', {
                    type: 'green'
                });
            });
        });
    </script>
@endpush