@extends('layouts.sidebar')

@section('content')
    <style>
        @media print {
            body * {
                visibility: hidden;
            }

            .print-content,
            .print-content * {
                visibility: visible;
                font-size: 10px;
            }

            .print-content {
                position: absolute;
                left: 0;
                top: 0;
                width: 210mm;
                height: 297mm;
                padding: 10mm;
                box-sizing: border-box;
            }

            .print-content table td,
            .print-content table th {
                padding: 2px;

            }
        }
    </style>
    <div class="p-6 ">
        <div class="flex justify-between">
            <h1 class="mb-4 text-2xl font-bold">Withholding Tax Report for {{ $year }}</h1>
            <div class="flex items-center gap-10 mb-10 "> <button onclick="window.print()"
                    class="w-32 h-10 px-4 text-sm font-medium text-center text-white bg-blue-500 border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500">
                    Print
                </button>

                <div class="relative flex flex-col items-end justify-end text-center">
                    <div>
                        <button type="button"
                            class="inline-flex justify-center w-32 px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500"
                            id="menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown()">
                            Menu
                            <!-- Dropdown icon -->
                            <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M5.23 7.21a.75.75 0 011.06 0L10 10.44l3.71-3.23a.75.75 0 111.04 1.08l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.08z"
                                    clip-rule="evenodd" />
                            </svg>
                        </button>
                        <div class="absolute right-0 z-10 hidden w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                            role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
                            id="dropdown-menu">
                            <div class="py-1" role="none">

                                <button onclick="showDiv1()" class="w-full px-4 py-2 mb-2 rounded hover:bg-gray-200 ">
                                    Report
                                </button>
                                <button onclick="showDiv2()" class="w-full px-4 py-2 mb-4 rounded hover:bg-gray-200 ">
                                    With Holding tax details
                                </button>
                            </div>
                        </div>
                    </div> <!-- Dropdown menu, show/hide based on menu state -->

                </div>
            </div>

        </div>

        <script>
            // Dropdown toggle
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        </script>
        <div class="space-y-4">


            <div class="grid grid-cols-1 md:grid-cols-4">
                <div class="max-w-3xl ">
                    <!-- Withholding Tax Report Form -->
                    <form method="GET" action="{{ route('withholding.tax.report') }}"
                        class="p-6 bg-white rounded shadow-md">
                        @csrf
                        <h2 class="mb-4 text-xl font-semibold text-center">Withholding Tax Report</h2>

                        <div class="mb-4">
                            <label for="year" class="block text-gray-700">Year</label>
                            <input type="number" name="year" id="year" value="{{ old('year', date('Y')) }}"
                                class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                        </div>

                        <div class="mb-4">
                            <label for="property_id" class="block text-gray-700">Property</label>
                            <select name="property_id" id="property_id"
                                class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">All Properties</option>
                                @foreach ($properties as $property)
                                    <option value="{{ $property->id }}"
                                        {{ old('property_id') == $property->id ? 'selected' : '' }}>
                                        {{ $property->property_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <button type="submit"
                            class="w-full px-4 py-2 text-white transition duration-200 bg-blue-500 rounded hover:bg-blue-700">Generate
                            Report</button>
                    </form>

                    <!-- Add Tax Form -->
                    <div class="p-6 bg-white rounded shadow-md">
                        <h2 class="mb-4 text-xl font-semibold text-center">Add Tax</h2>
                        <form action="{{ route('tax.store') }}" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label for="lease_id" class="block text-sm font-medium text-gray-700">Lease ID</label>
                                <select name="lease_id" id="lease_id"
                                    class="block w-full p-3 mt-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    required>
                                    <option value="" disabled selected>Select Lease</option>
                                    @foreach ($lease as $lease)
                                        <option value="{{ $lease->lease_id }}">
                                            {{ $lease->property->property_name }} {{ $lease->unit->unit_name }},
                                            Renters: {{ $lease->client->owners_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-4">
                                <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
                                <input type="date" name="date" id="date"
                                    class="block w-full p-3 mt-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    required>
                            </div>

                            <div class="mb-4">
                                <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label>
                                <input type="number" name="amount" id="amount" step="0.01" min="0"
                                    class="block w-full p-3 mt-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    required>
                            </div>

                            <button type="submit"
                                class="w-full px-4 py-2 font-bold text-white transition duration-200 bg-blue-500 rounded hover:bg-blue-700">Add
                                Tax</button>
                        </form>
                    </div>
                </div>
                <div id="div1" class="col-span-3 print-content">
                    <!-- Table for Withholding Tax Report -->
                    <table class="min-w-full text-sm bg-white border border-gray-300 rounded-lg shadow-md ">
                        <thead>
                            <tr class="text-left text-gray-600 ">
                                <th class="px-4 py-2">Areas</th>
                                <th class="px-4 py-2">Names</th>
                                @foreach (['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'] as $month)
                                    <th class="px-4 py-2">{{ $month }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($units as $unit)
                                @foreach ($unit->leases as $lease)
                                    <tr>
                                        <td class="px-4 py-2 border">
                                            {{ $unit->property->property_name }},{{ $unit->unit_name }}</td>

                                        <td class="px-4 py-2 border">
                                            {{ $lease->client->owners_name ?? 'N/A' }}
                                        </td>
                                        @foreach (['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'] as $month)
                                            @php
                                                $monthNumber = date('n', strtotime($month));
                                                $totalAmount = 0;

                                                foreach ($lease->tax as $payment) {
                                                    if (
                                                        $payment->date->format('n') == $monthNumber &&
                                                        $payment->date->format('Y') == $year
                                                    ) {
                                                        $totalAmount += is_numeric($payment->amount)
                                                            ? $payment->amount
                                                            : 0;
                                                    }
                                                }

                                            @endphp
                                            <td class="px-4 py-2 border">{{ number_format($totalAmount, 2) }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>

                </div>
                <div id="div2" class="hidden col-span-3 p-4 bg-white rounded ">
                    <table id="tax" class="min-w-full bg-white border border-gray-300">

                        <thead>
                            <tr class="text-sm leading-normal text-gray-700 uppercase bg-orange-500">
                                <th class="px-6 py-3 ">Property</th>
                                <th class="px-6 py-3 ">Unit</th>
                                <th class="px-6 py-3 ">Unit Renter</th>
                                <th class="px-6 py-3 ">Date</th>
                                <th class="px-6 py-3 ">Amount</th>

                                <th class="px-6 py-3 ">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm font-light text-center text-gray-600">
                            <!-- DataTables will populate this section -->
                        </tbody>

                    </table>
                </div>
                @foreach ($tax as $tax)
                    <div id="deleteModal{{ $tax->id }}"
                        class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
                        <!-- Modal dialog -->
                        <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                            <!-- Modal header -->
                            <div class="flex items-center justify-between px-4 py-2 bg-red-500">
                                <h5 class="font-bold text-white">Confirm Delete</h5>
                                <button onclick="closeModal('deleteModal{{ $tax->id }}')"
                                    class="text-white">&times;</button>
                            </div>

                            <!-- Modal body -->
                            <div class="px-4 py-4">
                                <p>Are you sure you want to delete this data?</p>
                            </div>

                            <!-- Modal footer -->
                            <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                                <button onclick="closeModal('deleteModal{{ $tax->id }}')"
                                    class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>

                                <!-- Form for delete -->
                                <form id="deleteForm{{ $tax->id }}" action="{{ route('tax.delete', $tax->id) }}"
                                    method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600">Delete</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
                <script>
                    // Open and close modal functions
                    function openModal(modalId) {
                        var modal = document.getElementById(modalId);
                        modal.classList.remove('hidden');
                    }

                    function closeModal(modalId) {
                        var modal = document.getElementById(modalId);
                        modal.classList.add('hidden');
                    }
                </script>
                <script>
                    function showDiv1() {
                        document.getElementById('div1').classList.remove('hidden');
                        document.getElementById('div2').classList.add('hidden');
                    }

                    function showDiv2() {
                        document.getElementById('div1').classList.add('hidden');
                        document.getElementById('div2').classList.remove('hidden');
                    }
                </script>
                <script>
                    $(document).ready(function() {
                        // Initialize DataTable for expenses with check numbers
                        var tableWithCheck = $('#tax').DataTable({
                            processing: true,
                            serverSide: true,
                            ajax: {
                                url: '{{ route('tax.index') }}', // Replace with your route
                                data: {
                                    table: 'check'
                                } // Send a parameter to identify the table
                            },
                            columns: [{
                                    data: 'lease.property.property_name',
                                    name: 'lease.property.property_name',
                                }, {
                                    data: 'lease.unit.unit_name',
                                    name: 'lease.unit.unit_name',
                                }, {
                                    data: 'lease.client.owners_name',
                                    name: 'lease.client.owners_name'
                                }, {
                                    data: 'date',
                                    name: 'date'
                                },
                                {
                                    data: 'amount',
                                    name: 'Amount'
                                },

                                {
                                    data: 'actions',
                                    name: 'actions',
                                    orderable: false,
                                    searchable: false
                                }
                            ],

                        });
                    });
                </script>

            </div>
        </div>
    </div>
@endsection