@extends('layouts.app')
@section('style')
    <style>
        .sticky-rows {
            top: 0px;
            position: sticky;
            z-index: 1;
            right: 0;
            background-color: #F5F5F5;
        }

        /* Styles for the new header */
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
        }

        .header-container .logo {
            flex: 0 0 120px;
            text-align: center;
        }

        .header-container .logo img {
            max-height: 100px;
            max-width: 100px;
            width: auto;
        }

        .header-container .company-info {
            text-align: center;
            flex-grow: 1;
        }

        .header-container .company-info h1 {
            font-size: 1.5rem;
            margin: 0;
            font-weight: bold;
        }

        .header-container .company-info p {
            font-size: 0.9rem;
            margin: 0;
            line-height: 1.4;
        }
    </style>
@endsection

@section('content')
    <div class="col-12">

    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="title mb-0">Billings</h5>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb"style="background-color: white; padding-left: 2px">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('billing.new') }}">Billings</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Preview</li>
                    </ol>
                </nav>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 text-right pr-3">
                        <div class="dropdown ml-auto " style="width: 100px">
                            <button class="btn btn-sm btn-primary  ml-auto" type="button" id="dropdownMenuButton"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                style="font-size: 14px !important">
                                <i class="now-ui-icons loader_gear"></i>
                            </button>
                            <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="{{ route('billing.newshow', ['id' => $billing->id]) }}">Type
                                    A</a>
                                <button class="dropdown-item" onclick="window.print()">Print</button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- NEW HEADER --}}
                <div class="header-container">
                    <div class="logo">
                        <img src="{{ asset('img/dk-logo.png') }}" alt="Dragon Knights Logo">
                    </div>
                    <div class="company-info">
                        <h1>Dragon Knights SECURITY SERVICES CORPORATION</h1>
                        <p>Ground Floor AMWSLAI Building, Mayor PN Roa Street, Patag, Cagayan de Oro City</p>
                        <p>Tel No. (088) 557-7351 / Cel No. 0917009341 / email ad: dknights702@gmail.com</p>
                    </div>
                    <div class="logo">
                        {{-- Placeholder for a potential right-side logo if needed --}}
                    </div>
                </div>

                <div class="row mt-5 pt-5">
                    <div class="col-12 text-right">
                        <b style="font-size: 16px">Date: {{ $billing->billing_date }}</b>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 text-center">
                        <h4><b>STATEMENT OF ACCOUNT</b></h4>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        Account with:
                    </div>
                    <div class="col-12 mt-5">
                        <b>{{ $client->company_name }}</b>
                    </div>
                    <div class="col-12">
                        {{ $client->company_address }}
                    </div>
                </div>

                <div class="row mt-5">
                    <div class="col-12" style="text-align: justify; text-justify: inter-word;">
                        <p>Payment for Security Services rendered at your establishment for the period covered from
                            {{ $billing->start_date . ' to ' . $billing->end_date }} for 2 Security Guard at 12 hours duty
                            daily in the amount of <b style="text-transform: uppercase;"><u>{{ $grandTotalInWords }}
                                    (PHP{{ number_format($grandTotal, 2) }})</b></u></p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 pl-5 mt-3">
                        <b>ARREARS:</b>
                    </div>

                    @forelse ($arrear as $ar)
                        <div class="col-1"></div>
                        <div class="col-3">
                            {{ $ar->description }}
                        </div>
                        <div class="col-2 text-right">
                            {{ number_format($ar->amount, 2) }}
                        </div>
                        <div class="col-6"></div>
                    @empty
                        <div class="col-1"></div>
                        <div class="col-3">
                            -
                        </div>
                        <div class="col-2 text-right">
                            0
                        </div>
                        <div class="col-6"></div>
                    @endforelse

                </div>

                <div class="row">
                    <div class="col-6 text-right mt-4">
                        <b style="font-size: 16px">TOTAL:&nbsp;&nbsp;
                            <u>&nbsp;&nbsp;{{ number_format($grandTotalWithAr, 2) }}</u></b>
                    </div>
                    <div class="col-6"></div>
                </div>

                {{-- UPDATED SIGNATORIES --}}
                <div class="row mt-5 pt-3">
                    <div class="col-6 pl-5 ">
                        <b>Prepared by:</b>
                    </div>
                    <div class="col-6">
                        <b>Approved by:</b>
                    </div>
                </div>

                <div class="row mt-5 pt-3">
                    <div class="col-1"></div>
                    <div class="col-4 text-center">
                        <b>VANESSA E. TOLENTINO</b>
                    </div>
                    <div class="col-1"></div>

                    <div class="col-1"></div>
                    <div class="col-4 text-center">
                        <b>LIEZEL MAE A. BALAOD, CSMS</b>
                    </div>
                    <div class="col-1"></div>

                    <div class="col-1"></div>
                    <div class="col-4 text-center" style="border-top: 1px solid black; padding-top: 5px;">
                        HR Payroll
                    </div>
                    <div class="col-1"></div>

                    <div class="col-1"></div>
                    <div class="col-4 text-center" style="border-top: 1px solid black; padding-top: 5px;">
                        Vice President
                    </div>
                    <div class="col-1"></div>
                </div>

                <div class="row mt-5 pt-3">
                    <div class="col-6 pl-5 ">
                        <b>Received By:</b>
                    </div>
                </div>

                <div class="row mt-5 pt-3">
                    <div class="col-12"></div>

                    <div class="col-1"></div>
                    <div class="col-4 text-center" style="border-top: 1px solid black">
                        <small>(NAME &amp; SIGNATURE - DATE)</small>
                    </div>
                    <div class="col-1"></div>
                </div>


            </div>
            <div class="card-footer">
            </div>
        </div>
    </div>



    @section('script')
        <script>
            $(document).ready(function() {

            });
        </script>
    @endsection
    @section('print')
        <div id="print"
            style="width: 100% !important; font-size: 12px;  color: black !important; padding: 50px; font-family: Arial, sans-serif;">

            {{-- NEW PRINT HEADER --}}
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="flex: 0 0 120px; text-align: center;">
                    <img src="{{ asset('img/dk-logo.png') }}" style="max-height: 100px; max-width: 100px; width: auto;"
                        alt="Dragon Knights Logo">
                </div>
                <div style="text-align: center; flex-grow: 1;">
                    <p style="font-size: 1.5rem; margin: 0; font-weight: bold;">Dragon Knights SECURITY SERVICES CORPORATION
                    </p>
                    <p style="font-size: 0.9rem; margin: 0; line-height: 1.4;">Ground Floor AMWSLAI Building, Mayor PN Roa
                        Street, Patag, Cagayan de Oro City</p>
                    <p style="font-size: 0.9rem; margin: 0; line-height: 1.4;">Tel No. (088) 557-7351 / Cel No. 0917009341 /
                        email ad: dknights702@gmail.com</p>
                </div>
                <div style="flex: 0 0 120px;">
                    {{-- Placeholder for a potential right-side logo if needed --}}
                </div>
            </div>

            <div class="row mt-5 pt-5">
                <div class="col-12 text-right">
                    <b style="font-size: 16px">Date: {{ $billing->billing_date }}</b>
                </div>
            </div>

            <div class="row">
                <div class="col-12 text-center">
                    <h4><b>STATEMENT OF ACCOUNT</b></h4>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    Account with:
                </div>
                <div class="col-12 mt-5">
                    <b>{{ $client->company_name }}</b>
                </div>
                <div class="col-12">
                    {{ $client->company_address }}
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-12" style="text-align: justify; text-justify: inter-word;">
                    <p>Payment for Security Services rendered at your establishment for the period covered from
                        {{ $billing->start_date . ' to ' . $billing->end_date }} for 2 Security Guard at 12 hours duty daily in
                        the amount of <b style="text-transform: uppercase;"><u>{{ $grandTotalInWords }}
                                (PHP{{ number_format($grandTotal, 2) }})</b></u></p>
                </div>
            </div>

            <div class="row">
                <div class="col-12 pl-5 mt-3">
                    <b>ARREARS:</b>
                </div>

                @forelse ($arrear as $ar)
                    <div class="col-1"></div>
                    <div class="col-3">
                        {{ $ar->description }}
                    </div>
                    <div class="col-2 text-right">
                        {{ number_format($ar->amount, 2) }}
                    </div>
                    <div class="col-6"></div>
                @empty
                    <div class="col-1"></div>
                    <div class="col-3">
                        -
                    </div>
                    <div class="col-2 text-right">
                        0
                    </div>
                    <div class="col-6"></div>
                @endforelse

            </div>

            <div class="row">
                <div class="col-6 text-right mt-4">
                    <b style="font-size: 16px">TOTAL:&nbsp;&nbsp;
                        <u>&nbsp;&nbsp;{{ number_format($grandTotalWithAr, 2) }}</u></b>
                </div>
                <div class="col-6"></div>
            </div>

            {{-- UPDATED PRINT SIGNATORIES --}}
            <div class="row mt-5 pt-3">
                <div class="col-6 pl-5 ">
                    <b>Prepared by:</b>
                </div>
                <div class="col-6">
                    <b>Approved by:</b>
                </div>
            </div>

            <div class="row mt-5 pt-3">
                <div class="col-1"></div>
                <div class="col-4 text-center">
                    <b>VANESSA E. TOLENTINO</b>
                </div>
                <div class="col-1"></div>

                <div class="col-1"></div>
                <div class="col-4 text-center">
                    <b>LIEZEL MAE A. BALAOD, CSMS</b>
                </div>
                <div class="col-1"></div>

                <div class="col-1"></div>
                <div class="col-4 text-center" style="border-top: 1px solid black; padding-top: 5px;">
                    HR Payroll
                </div>
                <div class="col-1"></div>

                <div class="col-1"></div>
                <div class="col-4 text-center" style="border-top: 1px solid black; padding-top: 5px;">
                    Vice President
                </div>
                <div class="col-1"></div>
            </div>

            <div class="row mt-5 pt-3">
                <div class="col-6 pl-5 ">
                    <b>Received By:</b>
                </div>
            </div>

            <div class="row mt-5 pt-3">
                <div class="col-12"></div>

                <div class="col-1"></div>
                <div class="col-4 text-center" style="border-top: 1px solid black">
                    <small>(NAME &amp; SIGNATURE - DATE)</small>
                </div>
                <div class="col-1"></div>
            </div>
        </div>
    @endsection
@endsection