@extends('layouts.master')

@push('css')
<style>
    .acc-wrap { overflow-x: auto; }

    .acc-header { text-align: center; margin-bottom: 10px; }
    .acc-header .co-name { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
    .acc-header .co-sub  { font-size: 14px; font-weight: 600; }
    .acc-header .co-date { font-size: 12px; color: #555; }

    .acc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        white-space: nowrap;
    }
    .acc-table thead th {
        border: 1px solid #888;
        padding: 7px 10px;
        text-align: center;
        background: #fff;
        font-weight: 700;
    }
    .acc-table thead th.th-account { text-align: right; min-width: 200px; }
    .acc-table thead th.th-code    { text-align: right; width: 110px; }

    .acc-table tbody td {
        border-left: 1px solid #ccc; border-right: 1px solid #ccc;
        border-top: none; border-bottom: 1px dashed #bbb;
        padding: 6px 10px; vertical-align: middle;
    }
    .acc-table td.td-account { text-align: right; }
    .acc-table td.td-code    { text-align: right; font-size: 11px; color: #555; }
    .acc-table td.td-num     { text-align: center; }

    /* Main account / section heading */
    .acc-table tr.row-main td.heading-cell {
        background: #fff; font-weight: 900; font-size: 13px;
        color: #1a56db; border-bottom: none !important;
        border-top: 1px solid #ccc !important;
        padding-top: 14px; text-align: right;
    }
    /* Control account subtotal */
    .acc-table tr.row-control td {
        background: #f8f8f8; font-weight: 700;
        border-top: 1px solid #aaa !important;
        border-bottom: 1px solid #aaa !important;
    }
    /* Main account total */
    .acc-table tr.row-ma-total td {
        background: #eef2ff; font-weight: 800; color: #1a56db;
        border-top: 2px solid #aaa !important;
        border-bottom: 2px solid #aaa !important;
    }
    /* Leaf row indent */
    .acc-table tr.row-tacc td.td-account { padding-right: 24px; }

    .neg { color: #c00; }
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header">
        <h3>Accounts Comparison Report — مابوار کھاتہ موازنہ</h3>
    </div>
    <div class="card-body">

        <form class="row" method="GET" action="{{ route('account-comparison.index') }}">
            <div class="col-md-3">
                <div class="form-group mt-3">
                    <label>Start Date</label>
                    <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
                </div>
            </div>
            <div class="col-md-9 d-flex align-items-end mt-3 gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-search"></i> دیکھیں
                </button>
                @if($reportData)
                    <a href="{{ route('account-comparison.print', ['start_date' => $startDate]) }}"
                       target="_blank" class="btn btn-warning">
                        <i class="fa fa-print"></i> پرنٹ
                    </a>
                @endif
            </div>
        </form>

        <hr />

        @if($reportData)
            <div class="acc-wrap">
                @include('reports.account_comparison_table', ['reportData' => $reportData])
            </div>
        @endif

    </div>
</div>
@endsection