@extends('layout.admin.master')

@section('content')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="section-body">
                <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                        <div class="card">
                            <form action="{{ route('expense.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="card-header">
                                    <h4>{{ __('messages.add_expense') }}</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>{{ __('messages.expense_type') }}</label>
                                        <select name="expense_type" id="expense_type" class="form-control" required>
                                            <option selected disabled value="">
                                                {{ __('messages.select_expense_type') }}</option>
                                            @forelse ($expenseType as $type)
                                                <option value="{{ $type->id }}"
                                                    {{ old('expense_type') == $type->id ? 'selected' : '' }}>
                                                    {{ $type->type }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_expense_type') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('expense_type'))
                                            <div class="text-danger">{{ $errors->first('expense_type') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group" id="salary_dependent">
                                        <label>{{ __('messages.date') }}</label>
                                        <input name="date" type="date" class="form-control"
                                            value="{{ old('date') }}">

                                        @if ($errors->has('date'))
                                            <div class="text-danger">{{ $errors->first('date') }}</div>
                                        @endif
                                    </div>

                                    <div id="booking-wrapper" class="form-group" style="display: none;">
                                        <label>{{ __('messages.outsource_booking_payment') }}</label>
                                        <select name="booking_id" id="booking" class="form-control">
                                            <option selected disabled value="">{{ __('messages.select_booking') }}
                                            </option>
                                            @forelse ($bookings as $booking)
                                                <option value="{{ $booking->id }}"
                                                    {{ old('booking_id') == $booking->id ? 'selected' : '' }}>
                                                    {{ $booking->id . ' - ' . $booking->partner->company . ' - ' . $booking->passenger_name }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_bookings_available') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('booking_id'))
                                            <div class="text-danger">{{ $errors->first('booking_id') }}</div>
                                        @endif
                                    </div>

                                    <div id="created-at-wrapper" class="form-group" style="display: none;">
                                        <label>{{ __('messages.created_at') }}</label>
                                        <input name="created_at" type="date" class="form-control"
                                            value="{{ old('created_at', now()->format('Y-m-d')) }}">

                                        @if ($errors->has('created_at'))
                                            <div class="text-danger">{{ $errors->first('created_at') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.account') }}</label>
                                        <select name="account_id" id="account" class="form-control" required>
                                            <option selected disabled value="">{{ __('messages.select_account') }}
                                            </option>
                                            @forelse ($accounts as $account)
                                                <option value="{{ $account->id }}"
                                                    {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                                    {{ $account->title . '  --  ' . $account->type }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_accounts_available') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('account_id'))
                                            <div class="text-danger">{{ $errors->first('account_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.employee') }}</label>
                                        <select name="employee_id" id="employee" class="form-control">
                                            <option value="" selected>{{ __('messages.select_employee') }}</option>
                                            @forelse ($employees as $employee)
                                                <option value="{{ $employee->id }}"
                                                    {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                                    {{ $employee->fname . ' ' . $employee->lname . '  --  ' . $employee->type }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_employee_available') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('employee_id'))
                                            <div class="text-danger">{{ $errors->first('employee_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.vehicle') }}</label>
                                        <select name="vehicle_id" id="vehicle" class="form-control">
                                            <option value="" selected>{{ __('messages.select_vehicle') }}</option>
                                            @forelse ($vehicles as $vehicle)
                                                <option value="{{ $vehicle->id }}"
                                                    {{ old('vehicle_id') == $vehicle->id ? 'selected' : '' }}>
                                                    {{ $vehicle->name . '  --  ' . $vehicle->type }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_vehicle_available') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('vehicle_id'))
                                            <div class="text-danger">{{ $errors->first('vehicle_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.expense') }}</label>
                                        <input name="expense" type="number" class="form-control"
                                            value="{{ old('expense') }}">

                                        @if ($errors->has('expense'))
                                            <div class="text-danger">{{ $errors->first('expense') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.description') }}</label>
                                        <textarea class="form-control" name="description" id="" cols="30" rows="10">{{ old('description') }}</textarea>

                                        @if ($errors->has('description'))
                                            <div class="text-danger">{{ $errors->first('description') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.document') }}</label>
                                        <input name="document" type="file" class="form-control"
                                            value="{{ old('document') }}">

                                        @if ($errors->has('document'))
                                            <div class="text-danger">{{ $errors->first('document') }}</div>
                                        @endif
                                    </div>

                                </div>
                                <div class="card-footer text-right">
                                    <p>{{ __('messages.account_balance') }}: <span id="balance">0</span></p>
                                    <p>{{ __('messages.outsource_balance') }}: <span id="outsource_balance">0</span></p>
                                    <p id="salary_dependent">{{ __('messages.salary') }}: <span id="Salary">0</span></p>
                                    <button class="btn btn-primary">{{ __('messages.submit') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const expenseTypeSelect = document.getElementById('expense_type');
            const bookingWrapper = document.getElementById('booking-wrapper');
            const createdAtWrapper = document.getElementById('created-at-wrapper');
            const salaryDependentWrapper = document.getElementById('salary_dependent'); // Salary-dependent fields
            const employeeSelect = document.getElementById('employee');
            const salarySpan = document.getElementById('Salary'); // span to show employee gross salary
            const employees = @json($employees->pluck('gross_salary', 'id'));

            function toggleFields() {
                const selectedExpenseTypeText = expenseTypeSelect.options[expenseTypeSelect.selectedIndex].text;

                if (selectedExpenseTypeText == 'outsource') {
                    bookingWrapper.style.display = 'block';
                    createdAtWrapper.style.display = 'block';
                } else {
                    bookingWrapper.style.display = 'none';
                    createdAtWrapper.style.display = 'none';
                }

                // Show/hide salary-dependent fields
                if (selectedExpenseTypeText == 'SALARY') {
                    salaryDependentWrapper.style.display = 'block';
                } else {
                    salaryDependentWrapper.style.display = 'none';
                }
            }

            // Display employee gross salary
            function displayGrossSalary(employeeId) {
                const grossSalary = employees[employeeId] || 0; // Get the gross salary from the employees object or default to 0
                salarySpan.textContent = grossSalary;
            }

            // Event listener for employee selection change
            employeeSelect.addEventListener('change', function() {
                displayGrossSalary(this.value);
            });

            // Run on initial load
            toggleFields();

            // Attach event listener to expense type dropdown
            expenseTypeSelect.addEventListener('change', toggleFields);

            // Fetch account balance
            const accountSelect = document.getElementById('account');
            const balanceSpan = document.getElementById('balance');

            function fetchAndDisplayBalance(accountId) {
                if (accountId) {
                    fetch(`/accounts/${accountId}/count_balance`)
                        .then(response => response.json())
                        .then(data => {
                            balanceSpan.textContent = data;
                        })
                        .catch(error => console.error('Error fetching balance:', error));
                } else {
                    balanceSpan.textContent = '0';
                }
            }

            accountSelect.addEventListener('change', function() {
                fetchAndDisplayBalance(this.value);
            });

            if (accountSelect.value) {
                fetchAndDisplayBalance(accountSelect.value);
            }

            // Fetch outsource balance
            const bookingSelect = document.getElementById('booking');
            const outsourceBalanceSpan = document.getElementById('outsource_balance');

            function fetchAndDisplayOutsourceBalance(bookingId) {
                if (bookingId) {
                    fetch(`/bookings/${bookingId}/count_balance`)
                        .then(response => response.json())
                        .then(data => {
                            outsourceBalanceSpan.textContent = data;
                        })
                        .catch(error => console.error('Error fetching balance:', error));
                } else {
                    outsourceBalanceSpan.textContent = '0';
                }
            }

            bookingSelect.addEventListener('change', function() {
                fetchAndDisplayOutsourceBalance(this.value);
            });

            if (bookingSelect.value) {
                fetchAndDisplayOutsourceBalance(bookingSelect.value);
            }
        });
    </script>
@endsection