@extends('layouts.nav')
@section('title')
Chart Of Accounts Report
@endsection
@section('content')


<div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Chart Of Accounts Report</h1>
                      </div>
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"   id="formHeader">Chart Of Accounts</h6>
                        </div>
                        @if (session('success'))
                            <div class="alert alert-success" id="successMessage"  style="margin: 20px;">
                                {{ session('success') }}
                            </div>
                        @endif
                        @if ($errors->any())
                                  <div class="form-group"  id="successMessage"  style="margin: 20px;">
                                        <div class="card bg-warning text-white shadow">
                                            <div class="card-body">

                                                @foreach ($errors->all() as $error)
                                                <div style="color: red; ">{{ $error }}</div>
                                                @endforeach

                                            </div>
                                        </div>
                                    </div>
                                    @endif
                            <form class="card-body" action="{{route('fetchChartOfAccounts')}}" method="post"  id="accountTypeForm">
                            @csrf
                                <div class="form-group row">
                                    <div class="col-sm-4 mb-3 mb-sm-0">
                                    <select class="form-control form-control-user" id="account" name="account"  value="{{ old('account') }}"  required>
                                        <option value="All" disabled selected>Account Type</option>

                                        @foreach ($Accounts as $Account)

                                        <option value="{{ $Account->ID }}">{{ $Account->Name }}</option>

                                        @endforeach
                                    </select>
                                    </div>
                                </div>

                               <div style="display: flex;">
                               <input type="submit" style="width: 100px;height: 40px; margin-right: 10px; margin-top: 6px" value="View" class="btn btn-primary btn-user btn-block" id="submitButton"/>

                                <input style="width: 100px;"    type="reset" value="Refresh" class="btn btn-secondary btn-user btn-block"  onclick="hideMessages()"/>

                               </div>

                                <hr>
                             </form>

                        <div class="card-body">
                            <div class="table-responsive">
                            <button id="download-pdf" style="float: right; margin: 5px;" class="btn btn-primary">Download PDF</button>

                             <div>
                            <div class="py-4">
                            <div class="px-14 py-6">
                                <table class="w-full border-collapse border-spacing-0">
                                <tbody>
                                    <tr>
                                    <td class="w-full align-top">
                                    <div style="display: flex;">
                                            <img style="width: 100px; height: 100px;" src="{!! asset('img/logo.png') !!}" class="h-12" />
                                            <p class="whitespace-nowrap font-bold text-main text-10xl ml-4" style="margin-top: 30px; font: 30px;">{{$type}} Accounts</p>
                                        </div>
                                    </td>

                                    <td class="align-top">
                                        <div class="text-sm">
                                        <table class="border-collapse border-spacing-0">
                                            <tbody>
                                            <tr>
                                                <td class="border-r pr-4">
                                                <div>
                                                    <p class="whitespace-nowrap text-slate-400 text-right">Date</p>
                                                    @php
                                                    use Carbon\Carbon;
                                                    $todayLongDate = Carbon::now()->format(' F j, Y');
                                                    @endphp
                                                    <p class="whitespace-nowrap font-bold text-main text-right">{{$todayLongDate}}</p>
                                                </div>
                                                </td>
                                                <td class="pl-4">
                                                <div>
                                                    <p class="whitespace-nowrap text-slate-400 text-right">Account Type</p>
                                                    <p class="whitespace-nowrap font-bold text-main text-right">{{$type}} Accounts</p>
                                                </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>

                            <div class="bg-slate-100 px-14 py-6 text-sm">
                                <table class="w-full border-collapse border-spacing-0">
                                <tbody>
                                    <tr>
                                    <td class="w-1/2 align-top">
                                        <div class="text-sm text-neutral-600">
                                        </div>
                                    </td>
                                    <td class="w-1/2 align-top text-right">
                                        <div class="text-sm text-neutral-600">

                                        </div>
                                    </td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>

                            <div class="px-14 py-10 text-sm text-neutral-700">
                                <table class="w-full border-collapse border-spacing-0">
                                <thead>
                                    <tr>

                                    <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Code </td>
                                    <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Description </td>
                                    <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Accounts Type</td>

                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($Accs as $acc)
                                    <tr>
                                    <td class="border-b py-3 pl-2">{{$acc->AccCode}}</td>
                                    <td class="border-b py-3 pl-2">{{$acc->AccName}}</td>
                                    <td class="border-b py-3 pl-2">{{$acc->Mname}}</td>
                                    </tr>
                                    @endforeach
                                    <tr>
                                    <td colspan="9">
                                        <table class="w-full border-collapse border-spacing-0">
                                        <tbody>
                                            <tr>
                                            <td class="w-full"></td>
                                            <td>
                                                <table class="w-full border-collapse border-spacing-0">
                                                <tbody>
                                                </tbody>
                                                </table>
                                            </td>
                                            </tr>
                                        </tbody>
                                        </table>
                                    </td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>
                            </div>
                            </div>

                            </div>
                        </div>
                    </div>
                    <script>
                    document.getElementById('download-pdf').addEventListener('click', function () {
                        var element = document.querySelector('.py-4'); // Select the specific section you want to print
                        var opt = {
                            margin:       -0.3,
                            filename:     'ChartOfAccount.pdf',
                            image:        { type: 'jpeg', quality: 0.98 },
                            html2canvas:  { scale: 2 },
                            jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
                        };
                        html2pdf().from(element).set(opt).save();
                    });
                    </script>

                    @endsection