@extends('layout.app')
@section('title', 'Balance Sheet Report')
@push('header_script')

<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<style>
    /* ===============================
           PROFIT & LOSS – TABLE BASE
           =============================== */

    table.table-bordered {
        border-collapse: collapse;
        width: 100%;
        font-size: 13px;
        color: #000;
    }

    /* ===============================
           HEADER STYLE
           =============================== */

    table.table-bordered thead th {
        background: #D9E1F2 !important;
        color: #000 !important;
        font-weight: bold;
        text-align: center;
        padding: 6px 8px;
        border: 1px solid #4472C4 !important;
    }

    /* ===============================
           BODY CELL STYLE
           =============================== */

    table.table-bordered tbody td {
        background: #DBDBDB !important;
        color: #000 !important;
        padding: 4px 8px;
        line-height: 1.4;
        vertical-align: middle;
        border: 1px solid #4472C4 !important;
    }

    /* ===============================
           TABLE BORDER CONSISTENCY
           =============================== */

    .table-bordered>tbody>tr>td,
    .table-bordered>tbody>tr>th,
    .table-bordered>tfoot>tr>td,
    .table-bordered>tfoot>tr>th,
    .table-bordered>thead>tr>td,
    .table-bordered>thead>tr>th {
        border: 1px solid #4472C4 !important;
    }

    /* ===============================
           HIERARCHY STYLING
           =============================== */

    /* Level 1 : Income / Expense */
    tr.lvl-1 td {
        font-weight: bold;
        font-size: 14px;
        background: #C9D5F0 !important;
    }

    /* Level 2 : Group */
    tr.lvl-2 td {
        padding-left: 15px !important;
        font-weight: bold;
    }

    /* Level 3 : Account Group */
    tr.lvl-3 td {
        padding-left: 30px !important;
        font-weight: normal;
    }

    /* Level 4 : Ledger */
    tr.lvl-4 td {
        padding-left: 45px !important;
        font-size: 12.5px;
    }

    /* ===============================
           NET PROFIT / LOSS ROW
           =============================== */

    tr.net-result td {
        font-weight: bold;
        background: #B4C6E7 !important;
        font-size: 14px;
    }

    /* ===============================
           ARROW ICON (EXPAND / COLLAPSE)
           =============================== */

    .arrow {
        border: solid black;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 4px;
        margin-left: 4px;
        cursor: pointer;
    }

    .up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    /* ===============================
           ROW HOVER (OPTIONAL BUT NICE)
           =============================== */

    table.table-bordered tbody tr:hover td {
        background: #E6EEF9 !important;
    }

    /* ===============================
           BUTTON AREA
           =============================== */

    .pl-actions {
        margin-top: 6px;
    }

    .pl-actions .btn {
        padding: 3px 8px;
        font-size: 12px;
    }

    /* ===================================
           RESPONSIVE – INDEX PAGE
        =================================== */
    @media (max-width: 768px) {
        table.table-bordered {
            font-size: 11.5px;
        }

        table.table-bordered thead th {
            padding: 4px 5px;
            font-size: 11.5px;
        }

        table.table-bordered tbody td {
            padding: 3px 5px;
        }

        tr.lvl-1 td {
            font-size: 12px;
        }

        tr.lvl-2 td {
            padding-left: 8px !important;
        }

        tr.lvl-3 td {
            padding-left: 18px !important;
        }

        tr.lvl-4 td {
            padding-left: 26px !important;
            font-size: 11px;
        }

        tr.net-result td {
            font-size: 12px;
        }

        .card-body {
            padding: 0.5rem !important;
        }
    }

    @media (max-width: 480px) {
        table.table-bordered {
            font-size: 10.5px;
        }

        table.table-bordered thead th {
            font-size: 10.5px;
            padding: 3px 4px;
        }

        table.table-bordered tbody td {
            padding: 2px 4px;
        }

        tr.lvl-2 td {
            padding-left: 6px !important;
        }

        tr.lvl-3 td {
            padding-left: 12px !important;
        }

        tr.lvl-4 td {
            padding-left: 18px !important;
            font-size: 10px;
        }

        tr.net-result td {
            font-size: 11px;
        }

        .card-body {
            padding: 0.25rem !important;
        }
    }
</style>
@section('content')

{{-- PAGE HEADER --}}
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Balance Sheet</a>
        </li>
    </ol>
</div>

<div class="app-body">
    <div class="row gx-3">

        {{-- DATE RANGE FILTER --}}
        <div class="col-sm-2">
            <label class="form-label" for="date_period">Period</label>
            <select id="date_period" class="form-select">
                <option value="all" selected>All</option>
                <option value="today">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="last_7">Last 7 Days</option>
                <option value="last_30">Last 30 Days</option>
                <option value="this_month">This Month</option>
                <option value="last_month">Last Month</option>
                <option value="custom">Custom Range</option>
            </select>
        </div>
        <div class="col-sm-2">
            <label class="form-label" for="from_date">From Date</label>
            <input type="text" id="from_date" class="form-control datepicker" value="{{ $financial_year_start }}">
        </div>
        <div class="col-sm-2">
            <label class="form-label" for="to_date">To Date</label>
            <input type="text" id="to_date" class="form-control datepicker" value="{{ date('d-m-Y') }}">
        </div>

        <div class="col-sm-4">
            <label class="form-label">&nbsp;</label>
            <div>
                <button type="button" class="btn btn-success" onclick="exportExcel()">
                    <i class="ri-file-excel-2-line"></i> Export to Excel
                </button>
            </div>
        </div>

    </div>

    {{-- RESULT --}}
    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="balance_sheet_table">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>

<script>
    $(document).ready(function() {
        $('#from_date, #to_date').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: true,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('#date_period').on('change', function() {
            var val = $(this).val();
            var start, end;
            
            switch(val) {
                case 'today':
                    start = moment();
                    end = moment();
                    break;
                case 'yesterday':
                    start = moment().subtract(1, 'days');
                    end = moment().subtract(1, 'days');
                    break;
                case 'last_7':
                    start = moment().subtract(6, 'days');
                    end = moment();
                    break;
                case 'last_30':
                    start = moment().subtract(29, 'days');
                    end = moment();
                    break;
                case 'this_month':
                    start = moment().startOf('month');
                    end = moment().endOf('month');
                    break;
                case 'last_month':
                    start = moment().subtract(1, 'month').startOf('month');
                    end = moment().subtract(1, 'month').endOf('month');
                    break;
                case 'all':
                    start = moment("{{ $financial_year_start }}", "DD-MM-YYYY");
                    end = moment();
                    break;
                default:
                    return;
            }
            
            $('#from_date').data('daterangepicker').setStartDate(start);
            $('#from_date').data('daterangepicker').setEndDate(start);
            $('#from_date').val(start.format('DD-MM-YYYY'));
            
            $('#to_date').data('daterangepicker').setStartDate(end);
            $('#to_date').data('daterangepicker').setEndDate(end);
            $('#to_date').val(end.format('DD-MM-YYYY'));
            
            loadBS();
        });

        $('#from_date, #to_date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            $('#date_period').val('custom');
            loadBS();
        });

        $('#from_date, #to_date').on('change', function() {
            loadBS();
        });

        // Initial load
        loadBS();
    });

    function loadBS() {
        $.ajax({
            url: "{{ route('balance-sheet-report.getData') }}",
            type: "GET",
            data: {
                from_date: $('#from_date').val(),
                to_date: $('#to_date').val()
            },
            success: function(res) {
                $('#balance_sheet_table').html(res);
            }
        });
    }

    function exportExcel() {
        let start_date = $('#from_date').val();
        let end_date = $('#to_date').val();
        window.location.href = "{{ route('balance-sheet-report.export-excel') }}?from_date=" + start_date + "&to_date=" + end_date;
    }
</script>
@endpush