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

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

@php
$activeTab = 'report-detailedCostCenterStatement';
@endphp

@section('style')
<link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/css/tom-select.min.css" rel="stylesheet">

<style media="print">
    .dsip {
        display: none !important;
    }

    table {
        border-collapse: separate;
        border-spacing: 0px;
    }

    table thead tr th,
    table tbody tr td {
        padding: 6px;
    }

    table thead tr th {
        border: 1px solid rgb(76, 76, 76) !important;
    }

    table tbody tr td {
        border: 1px solid rgba(204, 204, 204, 0.766) !important;
    }
</style>
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', [
        'activeItem' => 'accounting.reports.accounts.detailed-cost-center-statement',
    ])
@endsection

@section('content-field')
<div>
    <x-tenant.accounting.reports.accounts.DetailedCostCenterStatement :request="$request">
    </x-tenant.accounting.reports.accounts.DetailedCostCenterStatement>
</div>
@endsection

@push('script')
<script type="module">
    import printSection from '/tenancy/assets/js/print.js';
    $('body').on('click', '.print_report_btn', function() {
        let target = $('#printable-section').clone();
        let title = "كشف مراكز الكلف التفصيلي";
        const print_data = @json(Session::get('print_data'));
        printSection.print(target, print_data, title);
    });
</script>
{{-- add the tom-select library to delete the multiple select options --}}
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/js/tom-select.complete.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const selectIds = ['#action_types'];

        selectIds.forEach(function(selectId) {
            new TomSelect(selectId, {
                persist: false,
                create: false,
                plugins: ['remove_button'],
                render: {
                    item: function(data, escape) {
                        return `<div>${escape(data.text)} </div>`;
                    }
                }
            });
        });

        const outBondEntryUrl = "{{ route('tenant.warehouses.out-bonds.edit', ['out_bond' => '___ID___', 'mode' => 'show']) }}";

        $('body').on('click', '.open-outbond-entry', function() {
            const id = $(this).data('id');
            const url = outBondEntryUrl.replace('___ID___', id);

            window.open(url, '_blank');
        });

        const automatedEntryUrl = "{{ route('tenant.accounting.automated-entries.ajax-show', ['id' => '___ID___']) }}";

        $('body').on('click', '.open-automated-entry', function() {
            const id = $(this).data('id');
            const url = automatedEntryUrl.replace('___ID___', id) + '?is_check=0';

            axios.get(url)
                .then(response => {
                    if (response.data.status === 'success') {
                        $('#automated-entry-container').html(response.data.view).show();
                    } else {
                        alert(response.data.message);
                    }
                })
                .catch(() => {
                    alert('حدث خطأ أثناء جلب بيانات القيد الآلي');
                });
        });

        $('body').on('click', '#closeShowPage', function() {
            $('#automated-entry-container').html('').hide();
        });

        $('body').on('click', '.print-bond-btn', function() {
            let target = $('.printable-section').clone();
            $(target).find('.bond-as-bond').css('display', 'block');
            let title = "القيود الاّلية";
            const print_data = @json(Session::get('print_data'));
            let css_link = "/tenancy/assets/css/accounting/printing/bonds.css";
            printSection.print(target, print_data, title, css_link, true, {});
        });
    });
</script>
@endpush