@extends('layout.master')
@section('title', 'Add Transaction')
@section('content')

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">

                <div class="py-3 d-flex align-items-center justify-content-between">
                    <h4 class="fs-18 fw-semibold m-0">Add transaction</h4>
                    <a href="{{ route('client-package.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
                </div>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('transaction.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="client_package_id" id="client_package_id">

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label class="form-label">Client</label>
                                    <select id="client_id" class="form-select" required>
                                        <option value="">-- Select client --</option>
                                        @foreach ($clients as $client)
                                            <option value="{{ $client->id }}">{{ $client->name }}</option>
                                        @endforeach
                                    </select>
                                    <small id="clientError" class="text-danger"></small>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Package</label>
                                    <input type="text" id="package_name" class="form-control" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Total amount</label>
                                    <input type="text" id="total_amount" class="form-control" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Paid so far</label>
                                    <input type="text" id="paid_amount" class="form-control" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Remaining balance</label>
                                    <input type="text" id="remaining_balance" class="form-control" readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Amount to pay now</label>
                                    <input type="number" step="0.01" name="amount" class="form-control" required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Transaction date</label>
                                    <input type="date" name="transaction_date" class="form-control" required>
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label">Description (optional)</label>
                                    <textarea name="description" class="form-control" rows="3"></textarea>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Payment proof (optional)</label>
                                    <input type="file" name="proof" class="form-control" accept=".jpg,.jpeg,.png,.pdf">
                                </div>

                            </div>

                            <button type="submit" class="btn btn-primary mt-4" id="submitBtn" disabled>Save
                                transaction</button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        const clientInfoUrlTemplate = "{{ route('transaction.client-info', ['id' => 999999]) }}";

        document.getElementById('client_id').addEventListener('change', function() {
            const clientId = this.value;
            const errorBox = document.getElementById('clientError');
            const submitBtn = document.getElementById('submitBtn');
            errorBox.textContent = '';
            submitBtn.disabled = true;

            if (!clientId) return;

            const url = clientInfoUrlTemplate.replace('999999', clientId);

            fetch(url, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(res => {
                    if (!res.ok) {
                        return res.json().then(data => {
                            throw new Error(data.error || 'Request failed');
                        });
                    }
                    return res.json();
                })
                .then(data => {
                    document.getElementById('client_package_id').value = data.client_package_id;
                    document.getElementById('package_name').value = data.package_name;
                    document.getElementById('total_amount').value = data.total_amount;
                    document.getElementById('paid_amount').value = data.paid_amount;
                    document.getElementById('remaining_balance').value = data.remaining_balance;
                    submitBtn.disabled = false;
                })
                .catch((err) => {
                    errorBox.textContent = err.message || 'Something went wrong, please try again.';
                    document.getElementById('client_package_id').value = '';
                });
        });
    </script>
@endsection