@extends('layouts.sidebar')
@section('title', 'Payroll')
@section('content')
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-6">Edit Department</h1>
        <form id="edit-department-form" action="{{ route('departments.update', $department->id) }}" class="w-full space-y-6"
            method="POST">
            @csrf
            @method('PUT')

            <!-- Client Dropdown -->
            <div>
                <label for="client_id" class="block text-sm font-medium text-gray-700">Company:</label>
                <select name="client_id" id="client_id"
                    class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="" disabled>Select Company</option>
                    @foreach ($company as $client)
                        <option value="{{ $client->id }}" {{ $department->client_id == $client->id ? 'selected' : '' }}>
                            {{ $client->business_name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Department Name -->
            <div>
                <label for="department_name" class="block text-sm font-medium text-gray-700">Client Name:</label>
                <input type="text" name="department_name" id="department_name" value="{{ $department->department_name }}"
                    class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    placeholder="Enter Department Name">
            </div>

            <!-- Hidden First ID -->
            <input type="hidden" name="first_id" value="{{ $charges->id }}">

            <!-- Service Charge Type -->
            <div class="mb-4">
                <label class="block mb-2 font-bold text-gray-700" for="service_charge_type">Service Charge Type</label>
                <select name="service_charge_type" id="service_charge_type"
                    class="w-full px-3 py-2 mb-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none"
                    onchange="toggleServiceChargeInput()" required>
                    <option value="amount" {{ $charges->service_charge_type == 'amount' ? 'selected' : '' }}>Amount</option>
                    <option value="percentage" {{ $charges->service_charge_type == 'percentage' ? 'selected' : '' }}>
                        Percentage</option>
                </select>
            </div>

            <!-- Service Charge Amount Field -->
            <div class="mb-4" id="service_charge_amount_container"
                style="display: {{ $charges->service_charge_type == 'amount' ? 'block' : 'none' }};">
                <label class="block mb-2 font-bold text-gray-700" for="charge_amount">Service Charge (Amount)</label>
                <input type="number" name="charge_amount" id="service_charge_amount"
                    value="{{ isset($charges->charge_amount) ? $charges->charge_amount : '0' }}"
                    class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none"
                    placeholder="Enter service charge amount" required>
            </div>

            <!-- Service Charge Percentage Field -->
            <div class="mb-4" id="service_charge_percentage_container"
                style="display: {{ $charges->service_charge_type == 'percentage' ? 'block' : 'none' }};">
                <label class="block mb-2 font-bold text-gray-700" for="service_charge">Service Charge (Percentage)</label>
                <input type="number" name="service_charge" id="service_charge"
                    value="{{ isset($charges->service_charge) ? $charges->service_charge : '0' }}"
                    class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none"
                    placeholder="Enter service charge percentage" required>
            </div>

            <!-- VAT -->
            <div class="mb-4">
                <label class="block mb-2 font-bold text-gray-700" for="vat">VAT</label>
                <input type="number" name="vat" id="vat" value="{{ $charges->vat }}"
                    class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none"
                    placeholder="Enter VAT" required>
            </div>

            <!-- Withholding Tax -->
            <div class="mb-4">
                <label class="block mb-2 font-bold text-gray-700" for="withholding_tax">Withholding Tax</label>
                <input type="number" name="withholding_tax" id="withholding_tax" value="{{ $charges->withholding_tax }}"
                    class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none"
                    placeholder="Enter withholding tax" required>
            </div>


            <div class="mb-4">
                <label class="block mb-2 font-bold text-gray-700" for="convert_inminute">Convert to Minute</label>
                <input type="checkbox" name="convert_inminute" id="convert_inminute" value="1"
                    class="mr-2 leading-tight" {{ old('convert_inminute', $charges->convert_inminute) ? 'checked' : '' }}>
                <span class="text-gray-700">Convert Decimal Part As Minute</span>
            </div>

            <!-- Submit Button -->
            <div>
                <button type="submit"
                    class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Update
                </button>
            </div>
        </form>

        <script>
            // Function to toggle between the Amount and Percentage inputs
            function toggleServiceChargeInput() {
                var serviceChargeType = document.getElementById('service_charge_type').value;
                var amountContainer = document.getElementById('service_charge_amount_container');
                var percentageContainer = document.getElementById('service_charge_percentage_container');

                if (serviceChargeType === 'amount') {
                    amountContainer.style.display = 'block';
                    percentageContainer.style.display = 'none';
                } else if (serviceChargeType === 'percentage') {
                    amountContainer.style.display = 'none';
                    percentageContainer.style.display = 'block';
                }
            }
        </script>
    </div>
@endsection