@extends('layouts.sidebar')
@section('title', 'Users')
@section('content')

    <div class="min-h-screen p-6 text-gray-800 bg-white">
        <div class="flex flex-col w-full h-full p-6 border rounded-lg shadow-md">

            <!-- Header -->
            <div class="mb-6">
                <h1 class="text-3xl font-bold text-center">Payroll Reports</h1>
                <p class="mt-1 text-sm text-center text-gray-600">Internal System - Generate Payroll Report</p>
            </div>

            <!-- Main Content -->
            <div class="flex flex-1 gap-6 overflow-hidden">

                <!-- Sidebar: Reports List -->
                <div class="w-1/4 p-4 overflow-y-auto border rounded-lg">
                    <h2 class="mb-4 text-lg font-semibold">Choose a Report</h2>
                    <ul class="space-y-2 text-sm">
                        <li class="p-2 border rounded cursor-pointer hover:bg-gray-100">01. Transaction (Trx) Summary</li>
                        <li class="p-2 border rounded cursor-pointer hover:bg-gray-100">02. Payroll Summary</li>
                        <li class="p-2 border rounded cursor-pointer hover:bg-gray-100">03. Payslips</li>
                        <li class="p-2 border rounded cursor-pointer hover:bg-gray-100">04. Payroll Register</li>
                        <li class="p-2 border rounded cursor-pointer hover:bg-gray-100">05. Contribution Lists</li>
                        <li class="p-2 border rounded cursor-pointer hover:bg-gray-100">06. Remittance Disk</li>
                        <li class="p-2 border rounded cursor-pointer hover:bg-gray-100">07. History of Payroll</li>
                        <!-- Add more items as needed -->
                    </ul>
                </div>

                <!-- Main Panel: Options and Settings -->
                <div class="flex flex-col flex-1 space-y-6 overflow-y-auto">

                    <!-- General Options -->
                    <section class="p-6 border rounded-lg bg-gray-50">
                        <h2 class="mb-4 text-lg font-semibold">General Options</h2>

                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">

                            <div>
                                <label class="block mb-1 text-sm font-medium">Scope (From - To)</label>
                                <div class="flex gap-2">
                                    <input type="date" class="w-1/2 px-2 py-1 text-sm border rounded" />
                                    <input type="date" class="w-1/2 px-2 py-1 text-sm border rounded" />
                                </div>
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Scope of Premiums (From - To)</label>
                                <div class="flex gap-2">
                                    <input type="date" class="w-1/2 px-2 py-1 text-sm border rounded" />
                                    <input type="date" class="w-1/2 px-2 py-1 text-sm border rounded" />
                                </div>
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">13th Month Scope</label>
                                <div class="flex gap-2">
                                    <input type="date" class="w-1/2 px-2 py-1 text-sm border rounded" />
                                    <input type="text" class="w-1/2 px-2 py-1 text-sm border rounded"
                                        placeholder="13TH MONTH" />
                                </div>
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Employee</label>
                                <input type="text" class="w-full px-2 py-1 text-sm border rounded"
                                    placeholder="Employee Name" />
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Area</label>
                                <input type="text" class="w-full px-2 py-1 text-sm border rounded" placeholder="Area" />
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Bank</label>
                                <select class="w-full px-2 py-1 text-sm border rounded">
                                    <option>AUB</option>
                                    <option>BDO</option>
                                    <option>Metrobank</option>
                                </select>
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Payroll Category</label>
                                <input type="text" class="w-full px-2 py-1 text-sm border rounded"
                                    placeholder="Trainee, Regular, etc." />
                            </div>

                        </div>
                    </section>

                    <!-- Remittance Options -->
                    <section class="p-6 border rounded-lg bg-gray-50">
                        <h2 class="mb-4 text-lg font-semibold">Remittance Settings</h2>

                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">

                            <div class="flex flex-wrap gap-4">
                                <div class="flex items-center gap-2">
                                    <input type="checkbox" class="w-4 h-4" id="sss" />
                                    <label for="sss" class="text-sm">SSS R3/Loan</label>
                                </div>
                                <div class="flex items-center gap-2">
                                    <input type="checkbox" class="w-4 h-4" id="phic" />
                                    <label for="phic" class="text-sm">PHIC</label>
                                </div>
                                <div class="flex items-center gap-2">
                                    <input type="checkbox" class="w-4 h-4" id="pagibig" />
                                    <label for="pagibig" class="text-sm">Pag-ibig ITW</label>
                                </div>
                                <div class="flex items-center gap-2">
                                    <input type="checkbox" class="w-4 h-4" id="diskette" />
                                    <label for="diskette" class="text-sm">Diskette</label>
                                </div>
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Filename</label>
                                <input type="text" class="w-full px-2 py-1 text-sm border rounded"
                                    placeholder="C:\payroll.dat" />
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Credit Date</label>
                                <input type="date" class="w-full px-2 py-1 text-sm border rounded" />
                            </div>

                            <div>
                                <label class="block mb-1 text-sm font-medium">Batch No.</label>
                                <input type="text" class="w-full px-2 py-1 text-sm border rounded" placeholder="01" />
                            </div>

                            <div>
                            <label class @endsection