@extends('backend.layouts.master')
@section('content')

<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Breadcrumb -->
        <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">پرداخت‌ها</a></li>
                        <li class="breadcrumb-item active" aria-current="page">ویرایش پرداخت</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- اطلاعات فاکتور -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card bg-light p-3">
                    <h5 class="mb-3">اطلاعات فاکتور</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <p>شماره فاکتور: <strong>{{ $sale->invoice_number }}</strong></p>
                            <p>مشتری: 
                                <strong>{{ $sale->customer->first_name }} {{ $sale->customer->last_name }}</strong>
                            </p>
                            <p>جمع کل: <strong>{{ number_format($sale->items->sum('total_price')) }} AFN</strong></p>
                            <p>تخفیف: <strong>{{ number_format($sale->discount ?? 0) }} AFN</strong></p>
                        </div>
                        <div class="col-md-6">
                            @php
                                $totalPrice = $sale->items->sum('total_price') - ($sale->discount ?? 0);
                                $totalPaidExcludingCurrent = $sale->payments->sum('amount') - $payment->amount;
                            @endphp
                            <p>نهایی: <strong>{{ number_format($totalPrice) }} AFN</strong></p>
                            <p>پرداخت شده قبل از این پرداخت: <strong>{{ number_format($totalPaidExcludingCurrent) }} AFN</strong></p>
                            <p>مقدار این پرداخت: <strong>{{ number_format($payment->amount) }} AFN</strong></p>
                            <p>باقی‌مانده بعد از ویرایش: 
                                <strong id="remaining_after">{{ number_format($totalPrice - $totalPaidExcludingCurrent - $payment->amount) }}</strong> AFN
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- فرم ویرایش پرداخت -->
        <div class="row">
            <div class="col-12">
                <div class="card custom-card">
                    <div class="card-body">
                        <form action="{{ route('customer_payment.update', $payment->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="sale_id" value="{{ $sale->id }}">
                            <input type="hidden" name="customer_id" value="{{ $sale->customer_id }}">

                            <div class="row gy-4">

                                <!-- مبلغ -->
                                <div class="col-md-6 col-sm-12">
                                    <label class="form-label">مبلغ پرداختی</label>
                                    <input type="text" id="amount" name="amount" class="form-control" value="{{ old('amount', $payment->amount) }}" required>
                                    @error('amount')
                                        <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- تاریخ پرداخت -->
                                <div class="col-md-6 col-sm-12">
                                    <label class="form-label">تاریخ پرداخت</label>
                                    <input type="date" name="payment_date" class="form-control" value="{{ old('payment_date', \Carbon\Carbon::parse($payment->payment_date)->format('Y-m-d')) }}" required>
                                    @error('payment_date')
                                        <p class="text-danger">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- یادداشت -->
                                <div class="col-md-12">
                                    <label class="form-label">یادداشت</label>
                                    <textarea name="remarks" class="form-control">{{ old('remarks', $payment->remarks) }}</textarea>
                                </div>

                                <!-- دکمه -->
                                <div class="col-12 text-center">
                                    <input type="submit" class="btn btn-primary" value="به‌روزرسانی پرداخت">
                                </div>

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

    </div>
</div>

@endsection

@section('script')
<script>
window.onload = function() {
    const amountInput = document.getElementById('amount');
    const remainingAfter = document.getElementById('remaining_after');
    const total = {{ $totalPrice }};
    const paidExcludingCurrent = {{ $totalPaidExcludingCurrent }};

    function convertToEnglishNumbers(str) {
        const persian = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
        const arabic  = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
        for (let i = 0; i < 10; i++) {
            str = str.replace(persian[i], i).replace(arabic[i], i);
        }
        return str;
    }

    amountInput.addEventListener('input', function() {
        let raw = convertToEnglishNumbers(amountInput.value);
        let payment_new = parseFloat(raw.replace(/,/g, '')) || 0;
        let remaining = total - paidExcludingCurrent - payment_new;
        remainingAfter.textContent = remaining.toLocaleString();
    });
}
</script>
@endsection