@extends('tenant.rentals.rentals-tabs')
@php
    $activeTab = 'monthly_revenues';
@endphp
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.home') => '/',
            __('breadcrumb.rentals') => '/rentals',
            __('breadcrumb.reports') => '#',
            __('breadcrumb.monthly_revenue') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'rentals.reports.monthly-revenues'])
@endsection

@section('style')
<link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css') }}">
    <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('content-field')

    <div>

        <x-tenant.rentals.reports.monthlyRevenues :request="$request">
        </x-tenant.rentals.reports.monthlyRevenues>

    </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'));
            const css_link = "/tenancy/assets/css/rentals/reports/monthly-revenues.css";

            $(target).addClass('w-100');
            $(target).find('.report-container').css('overflow', 'visible').addClass('w-50');
            $(target).find('.report-container table').addClass('w-100');

            printSection.print(target, print_data, title, css_link, true, {
                size: "landscape",
                font_size: "10px"
            });
        });
    </script>
@endpush