@extends('layouts.master')
@section('title', 'Payments')
@section('content')

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Create Payment</h5>

            <a href="{{ route(
                ([
                    1 => 'admin',
                    2 => 'manager',
                    3 => 'account',
                    4 => 'user',
                ][auth()->user()->role] ??
                    'user') .
                    '.payment.list',
            ) }}"
                class="btn btn-danger btn-sm">Manage Payment</a>

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
        </div>

        <div class="card-body">
            <form action="{{ route('payment.store') }}" method="POST" class="form" enctype="multipart/form-data">
                @csrf

                @if (in_array(auth()->user()->role, [1, 2, 3]))
                    <div class="row row-cols-md-2">
                        <div class="form-group">
                            <label for="agency_id">Select Agency <span class="text-danger">*</span></label>
                            <select name="agency_id" id="agency_id" class="form-control" required>
                                <option value="" disabled selected>Select Agency</option>
                                @foreach ($agencies as $agency)
                                    <option value="{{ $agency->id }}">{{ $agency->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="user_id">Select User <span class="text-danger">*</span></label>
                            <select name="user_id" id="user_id" class="form-control" required>
                                <option value="" disabled selected>Select User</option>
                            </select>
                        </div>
                    </div>
                @endif
                <div class="row row-cols-md-2">
                    <div class="form-group">
                        <label for="payment_type">Payment Type <span class="text-danger">*</span></label>
                        <select class="form-control" name="type" id="payment_type" required>
                            <option>-- Select Payment Type --</option>
                            <option value="cash">Bank Cash</option>
                            <option value="check">Bank Check</option>
                            <option value="iban">Bank IBAN</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="">Bank Name</label>
                        <input type="text" name="bank_name" class="form-control">
                    </div>
                </div>

                <div class="row row-cols-md-2">

                    <div class="form-group">
                        <label for="">Amount (BDT) <span class="text-danger">*</span></label>
                        <input type="number" name="amount" class="form-control" step="0.01" required>
                    </div>

                    <div class="form-group">
                        <label for="currency">Currency <span class="text-danger">*</span></label>
                        <select class="form-control" name="currency" required>
                            <option value="BDT" selected>BDT</option>
                            <option value="SAR">SAR</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="">Transaction id / Check Number <span class="text-danger">*</span></label>
                        <input type="text" name="transaction_id" class="form-control" id="amount">
                    </div>

                    <div class="form-group">
                        <label for="">Payment Date<span class="text-danger">*</span></label>
                        <input type="date" name="paid" class="form-control" required>
                    </div>

                    <div class="form-group" style="display: none;">
                        <label for="">Currency rate (SAR to BDT)<span class="text-danger">*</span></label>
                        <input type="number" name="currency_rate" class="form-control" step="0.01">
                    </div>

                    <div class="form-group" style="display: none;">
                        <label for="">Total Amount</label>
                        <input type="number" name="total_amount" id="total_amount" class="form-control" step="0.01"
                            readonly>
                    </div>

                </div>


                <div class="form-group">
                    <label for="">Proof of Payment</label>
                    <input type="file" name="proof" class="form-control" id="">
                </div>
                <div class="form-group">
                    <label for="">Additional Info</label>
                    <textarea name="additional" class="form-control" rows="5" id=""></textarea>
                </div>


                <button type="submit" class="btn btn-primary mt-3">Submit</button>
            </form>
        </div>
    </div>

    <script>
        const paymentType = document.getElementById('payment_type');
        const currencyRate = document.querySelector('input[name="currency_rate"]');
        const amountInput = document.querySelector('input[name="amount"]');
        const totalAmount = document.querySelector('input[name="total_amount"]');
        const currencyRateGroup = currencyRate.closest('.form-group');
        const totalAmountGroup = totalAmount.closest('.form-group');

        function toggleFields() {
            if (paymentType.value === 'iban') {
                currencyRateGroup.style.display = 'block';
                totalAmountGroup.style.display = 'block';
                currencyRate.setAttribute('required', 'required');
            } else {
                currencyRateGroup.style.display = 'none';
                currencyRate.removeAttribute('required');
                currencyRate.value = '';
            }
            calculateTotalAmount(); // Always calculate on toggle
        }

        function calculateTotalAmount() {
            const amount = parseFloat(amountInput.value) || 0;
            const rate = parseFloat(currencyRate.value) || 0;

            if (paymentType.value === 'iban') {
                if (rate > 0) {
                    totalAmount.value = (amount / rate).toFixed(2);
                } else {
                    totalAmount.value = '';
                }
            } else {
                totalAmount.value = amount.toFixed(2);
            }

            // Always show total amount field if there's any amount
            if (amount > 0) {
                totalAmountGroup.style.display = 'block';
            } else {
                totalAmountGroup.style.display = paymentType.value === 'iban' ? 'block' : 'none';
            }
        }

        // Event listeners
        paymentType.addEventListener('change', toggleFields);
        amountInput.addEventListener('input', calculateTotalAmount);
        currencyRate.addEventListener('input', calculateTotalAmount);

        window.addEventListener('DOMContentLoaded', () => {
            toggleFields();
        });
    </script>

    <script>
        document.getElementById('agency_id').addEventListener('change', function() {
            let agencyId = this.value;
            let userSelect = document.getElementById('user_id');
            userSelect.innerHTML = '<option>Loading...</option>';

            fetch(`/admin/payment/get-users/${agencyId}`)
                .then(res => res.json())
                .then(data => {
                    userSelect.innerHTML = '';
                    if (data.length > 0) {
                        userSelect.innerHTML = '<option value="">Select User</option>';
                        data.forEach(user => {
                            userSelect.innerHTML +=
                                `<option value="${user.id}">${user.name} (${user.phone ?? ''})</option>`;

                        });
                    } else {
                        userSelect.innerHTML = '<option>No users found</option>';
                    }
                })
                .catch(() => {
                    userSelect.innerHTML = '<option>Error loading users</option>';
                });
        });
    </script>
@endsection