@extends('tenant.layouts.master')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.rentals') => '/rentals',
            __('breadcrumb.contracts') => route('tenant.rentals.rental-contracts.index'),
            __('breadcrumb.view_contract') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'rentals.contracts'])
@endsection

@section('style')
    <style>
        .contract-layout {
            background: white;
            border-radius: 14px;
            box-shadow: 1px 1px 5px #d3d3d3;
            padding: 16px;
        }

        .title-label {
            font-size: 17px;
            padding: 8px;
        }

        .full-payment-invoice {
            background: #939393;
            opacity: 0.8;
        }

        .full-payment-invoice td {
            color: white !important;
        }

        .contract-info-section {
            position: sticky;
            background: white;
            width: 100%;
            top: -15px;
            z-index: 2;
            padding: 10px;
        }

        #invoicesTabContent .sticky-md-top {
            top: -14px;
        }
    </style>
@endsection

@section('content')
    <div class="position-relative">
        <div>
            @include('tenant.rentals.contracts.show-contract-content', [
                'contract' => $contract,
                'show_from' => 'blade',
            ])
        </div>
    </div>
@endsection

@push('script')
    <script type="module">
        import printSection from '/tenancy/assets/js/print.js';

        $(() => {
            $('body').on('click', '.print_contract_btn', function() {
                let target = $('#printable-contract-section').clone();
                target.css('box-shadow', '0px 0px 0px transparent');

                // Show the content of invoices when the show mode is detailed
                $(target).find('#invoicesTab').hide();
                $('<p>فواتير الإيجار</p>').insertBefore($(target).find('#rental-invoices'));
                $(target).find('#rental-invoices table').unwrap();
                $('<p>فواتير الخدمات</p>').insertBefore($(target).find('#services-invoices'));
                $(target).find('#services-invoices table').unwrap();
                $('<p>فواتير المعارف</p>').insertBefore($(target).find('#knowledges-invoices'));
                $(target).find('#knowledges-invoices table').unwrap();

                // Show the content of invoices when the show mode is total
                $(target).find('.general-contract-invoices-view .card-header button').addClass(
                'text-black');
                $(target).find('.general-contract-invoices-view .collapse').addClass('show');

                let title = "العقد {{ $contract->id }}";
                const print_data = @json(Session::get('print_data'));
                printSection.print(target, print_data, title);
            });

            $('.toggle-view-btn').on('click', function() {
                const target_view = $(this).attr('data-target-view');
                $('.toggle-view-btn').addClass('active-btn');
                $('.toggle-view-btn').not(this).removeClass('active-btn');

                if (target_view == 'general') {
                    $('.general-contract-invoices-view').show();
                    $('.detailed-contract-invoices-view').hide();
                } else {
                    $('.general-contract-invoices-view').hide();
                    $('.detailed-contract-invoices-view').show();
                }
            });
        });
    </script>
@endpush