@extends("layouts.app")

@section("css")
    <link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        @media print {
            #trial-balance-list {
                overflow-y: hidden !important;
            }
        }
        #trial-balance-list {
            overflow: auto;
        }
    </style>
@endsection

@section("content")
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
          <span class="page-title-icon bg-gradient-primary text-white me-2">
            <i class="fa-solid fa-file-lines menu-icon"></i>
          </span> {{__('General Account Statement')}} {{ __('Fixed Assets') }}
            </h3>
        </div>


        <div class="row justify-content-md-center">
            <div id="daily-restrictions-report-container">
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="m-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div id="date_error" style="color: red;"></div>

                <form id="" method="POST" action="" class="row justify-content-center align-items-center">
                    @csrf
                    <input type="hidden" id="form-route" value="{{ route('dashboard.accounting.general-account-statement-for-fixedasset.index.data') }}">

                    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-4">
                        <label class="required">{{ __('validation.Select', ['attribute' => __('Account')]) }}</label>
                        <select id="supplierSelect" name="account" class="js-example-disabled-results  form-control">
                            <option value="0">{{ __('Select Account') }}</option>
                            @foreach($accounts as $account)
                                <option value="{{$account->id}}">{{$account->name.' ( ' .$account->serial_number.' ) '}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-4">
                        <label class="required">{{ __('From') }}</label>
                        <input  id="from_date" type="date" class="form-control" name="from_date" >
                    </div>
                    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-4">
                        <label class="required">{{ __('To') }}</label>
                        <input  id="to_date" type="date" class="form-control" name="to_date" >
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 col-xl-2 mt-3 mt-md-0">
                        <button class="btn btn-primary btn-block">{{__('Submit')}}</button>
                    </div>
                </form>
            </div>
        </div>
        <div id="trial-balance-list" class="">

            <div class="text-center">
                <h3 class="page-title">
                    {{__('General Account Statement')}}
                </h3>
            </div>
            <div class="row justify-content-between mt-5 ">
                <h5 class="page-title col-3 mx-3 ">
                    <span id="customer-name"></span>
                </h5>
                <div class="page-title col-2">
                    <p>{{__('From Date')}}: <span id="From-Date"></span></p>
                    <p>{{__('To Date')}}: <span id="To-Date"></span></p>
                    <p id="authenticated-user-id" style="font-size: 8px;"> 
                        {{ Auth::user()->id ?? __('Guest') }}
                    </p>
                </div>
            </div>
            <!-- Blade View -->
            <table style="width:100%" class="text-center trial-balance-table table mt-3" id="father-table">
                <thead>
                <tr>
                    <th ><strong>{{ __('Debit') }}</strong></th>
                    <th ><strong>{{ __('Credit') }}</strong></th>
                    <th ><strong>{{ __('Debit balance') }}</strong></th>
                    <th><strong>{{ __('credit balance') }}</strong></th>
                    <th><strong>{{ __('Statement') }}</strong></th>
                    <th ><strong>{{ __('Date') }}</strong></th>
                    <th ><strong>{{ __('Registration number') }}</strong></th>
                </tr>

                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
<button onclick="downloadCSV()" style="background-color: #8daf21;border-color: #8daf21;"> CSV</button>
    </div>


@endsection

@section("scripts")
    <script>
    function downloadCSV() {
        var table = document.querySelector('#father-table');
        var rows = table.querySelectorAll('tr');
        var csvContent = '\uFEFF'; // BOM for UTF-8

        rows.forEach(function(row) {
            var cols = row.querySelectorAll('td, th');
            var rowContent = Array.from(cols).map(function(col) {
                // Escape quotes and newlines
                return '"' + col.innerText.replace(/"/g, '""').replace(/\r?\n|\r/g, ' ') + '"';
            }).join(',');

            csvContent += rowContent + '\n';
        });

        var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        var url = URL.createObjectURL(blob);

        var link = document.createElement('a');
        link.setAttribute('href', url);
        link.setAttribute('download', 'general_account_statement.csv');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>
    <script src="{{asset('assets/js/pages/accounting/general-account-statement-for-fixedasset.js')}}"></script>
@endsection