@extends('layouts.app')

@section('title', 'Add Amount - ISP ERP System')

@section('page-title', 'Add Amount')

@section('styles')
<style>
.custom-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: none;
    overflow: hidden;
    margin-bottom: 1rem;
}

.custom-card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1rem;
    border: none;
}

.custom-card-body {
    padding: 1.5rem;
}

.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.btn-custom {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.client-info-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    border-left: 4px solid var(--primary-color);
}

.client-info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.client-info-label {
    font-weight: 600;
    color: #666;
}

.client-info-value {
    color: #333;
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-plus-circle me-2"></i>
                                Add Amount
                            </h3>
                            <p class="mb-0 opacity-75">Collect payment from clients and create bill records</p>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('add-amount.store') }}" method="POST" id="addAmountForm">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="employee_id" class="form-label">
                                        <i class="fas fa-user-tie me-1"></i>
                                        @if(auth()->user()->role === 'employee' || auth()->user()->role === 'collector')
                                            Select Employee
                                            <small class="text-muted">(Auto-selected for {{ auth()->user()->role }})</small>
                                        @else
                                            Select Collector
                                            <small class="text-muted">(Only collectors for {{ auth()->user()->role }})</small>
                                        @endif
                                    </label>
                                    <select name="employee_id" id="employee_id" class="form-select" required>
                                        <option value="">Choose a Collector...</option>
                                        @foreach($employees as $employee)
                                            <option value="{{ $employee->id }}" 
                                                    data-name="{{ $employee->name }}"
                                                    data-email="{{ $employee->email }}"
                                                    data-phone="{{ $employee->phone ?? 'N/A' }}"
                                                    data-personal-contact="{{ $employee->personal_contact_number ?? 'N/A' }}"
                                                    data-address="{{ $employee->address ?? 'N/A' }}"
                                                    data-position="{{ $employee->position ?? 'N/A' }}"
                                                    data-department="{{ $employee->department ? $employee->department->name : 'N/A' }}"
                                                    data-branch="{{ $employee->branch ? $employee->branch->name : 'N/A' }}"
                                                    data-salary="{{ $employee->salary ?? 'N/A' }}"
                                                    data-hire-date="{{ $employee->hire_date ? $employee->hire_date->format('Y-m-d') : 'N/A' }}"
                                                    data-isp-id="{{ $employee->isp_id }}"
                                                    {{ $currentEmployee && $currentEmployee->id == $employee->id ? 'selected' : '' }}>
                                                {{ $employee->name }} ({{ $employee->email }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('employee_id')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="paid_amount" class="form-label">
                                        <i class="fas fa-dollar-sign me-1"></i>Amount Paid
                                    </label>
                                    <input type="number" 
                                           name="paid_amount" 
                                           id="paid_amount" 
                                           class="form-control" 
                                           step="0.01" 
                                           min="0.01" 
                                           placeholder="Enter amount"
                                           required>
                                    @error('paid_amount')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="payment_method" class="form-label">
                                        <i class="fas fa-credit-card me-1"></i>Payment Method
                                    </label>
                                    <select name="payment_method" id="payment_method" class="form-select">
                                        <option value="">Select Payment Method</option>
                                        @foreach($paymentMethods as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                    @error('payment_method')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="transaction_id" class="form-label">
                                        <i class="fas fa-receipt me-1"></i>Transaction ID (Optional)
                                    </label>
                                    <input type="text" 
                                           name="transaction_id" 
                                           id="transaction_id" 
                                           class="form-control" 
                                           placeholder="Enter transaction ID or reference number">
                                    @error('transaction_id')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="payment_notes" class="form-label">
                                <i class="fas fa-sticky-note me-1"></i>Payment Notes (Optional)
                            </label>
                            <textarea name="payment_notes" 
                                      id="payment_notes" 
                                      class="form-control" 
                                      rows="3" 
                                      placeholder="Enter any additional notes about this payment..."></textarea>
                            @error('payment_notes')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Employee Information Display -->
                        <div id="employeeInfo" class="client-info-card" style="display: none;">
                            <h5 class="mb-3">
                                <i class="fas fa-info-circle me-2"></i>Employee Information
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="client-info-item">
                                        <span class="client-info-label">Name:</span>
                                        <span class="client-info-value" id="employeeName">-</span>
                                    </div>
                                    <div class="client-info-item">
                                        <span class="client-info-label">Email:</span>
                                        <span class="client-info-value" id="employeeEmail">-</span>
                                    </div>
                                    <div class="client-info-item">
                                        <span class="client-info-label">Phone:</span>
                                        <span class="client-info-value" id="employeePhone">-</span>
                                    </div>
                                    <div class="client-info-item">
                                        <span class="client-info-label">Personal Contact:</span>
                                        <span class="client-info-value" id="employeePersonalContact">-</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="client-info-item">
                                        <span class="client-info-label">Position:</span>
                                        <span class="client-info-value" id="employeePosition">-</span>
                                    </div>
                                    <div class="client-info-item">
                                        <span class="client-info-label">Department:</span>
                                        <span class="client-info-value" id="employeeDepartment">-</span>
                                    </div>
                                    <div class="client-info-item">
                                        <span class="client-info-label">Branch:</span>
                                        <span class="client-info-value" id="employeeBranch">-</span>
                                    </div>
                                    <div class="client-info-item">
                                        <span class="client-info-label">Salary:</span>
                                        <span class="client-info-value" id="employeeSalary">-</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-6">
                                    <div class="client-info-item">
                                        <span class="client-info-label">Address:</span>
                                        <span class="client-info-value" id="employeeAddress">-</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="client-info-item">
                                        <span class="client-info-label">Hire Date:</span>
                                        <span class="client-info-value" id="employeeHireDate">-</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex gap-2 mt-4">
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add Amount
                            </button>
                            <button type="reset" class="btn btn-secondary btn-custom" onclick="resetForm()">
                                <i class="fas fa-undo me-2"></i>Reset Form
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const employeeSelect = document.getElementById('employee_id');
    const employeeInfoCard = document.getElementById('employeeInfo');
    const employeeName = document.getElementById('employeeName');
    const employeeEmail = document.getElementById('employeeEmail');
    const employeePhone = document.getElementById('employeePhone');
    const employeePersonalContact = document.getElementById('employeePersonalContact');
    const employeeAddress = document.getElementById('employeeAddress');
    const employeePosition = document.getElementById('employeePosition');
    const employeeDepartment = document.getElementById('employeeDepartment');
    const employeeBranch = document.getElementById('employeeBranch');
    const employeeSalary = document.getElementById('employeeSalary');
    const employeeHireDate = document.getElementById('employeeHireDate');

    // Show employee information when employee is selected
            employeeSelect.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                
                if (this.value) {
            employeeName.textContent = selectedOption.dataset.name || '-';
            employeeEmail.textContent = selectedOption.dataset.email || '-';
            employeePhone.textContent = selectedOption.dataset.phone || '-';
            employeePersonalContact.textContent = selectedOption.dataset.personalContact || '-';
            employeeAddress.textContent = selectedOption.dataset.address || '-';
            employeePosition.textContent = selectedOption.dataset.position || '-';
            employeeDepartment.textContent = selectedOption.dataset.department || '-';
            employeeBranch.textContent = selectedOption.dataset.branch || '-';
            employeeSalary.textContent = selectedOption.dataset.salary || '-';
            employeeHireDate.textContent = selectedOption.dataset.hireDate || '-';
            employeeInfoCard.style.display = 'block';
        } else {
            employeeInfoCard.style.display = 'none';
        }
    });

    // Auto-display employee information if current employee is pre-selected
    if (employeeSelect.value) {
        employeeSelect.dispatchEvent(new Event('change'));
    }

    // Form validation
    document.getElementById('addAmountForm').addEventListener('submit', function(e) {
        const paidAmount = document.getElementById('paid_amount').value;
        
        if (!paidAmount || parseFloat(paidAmount) <= 0) {
            e.preventDefault();
            alert('Please enter a valid amount greater than 0.');
            return false;
        }
    });
});

function resetForm() {
    document.getElementById('addAmountForm').reset();
    document.getElementById('employeeInfo').style.display = 'none';
}
</script>
@endsection