<?php if (isset($component)) { $__componentOriginal4619374cef299e94fd7263111d0abc69 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal4619374cef299e94fd7263111d0abc69 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.app-layout','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('title', null, []); ?> Installment Plans <?php $__env->endSlot(); ?>
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Generate Installment Plan</h1>
            <p class="text-sm text-gray-500 mt-1">Create a new payment schedule for a customer.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="<?php echo e(route('installment-plans.index')); ?>" class="text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
                &larr; Back to Plans
            </a>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden" x-data="installmentCalculator()">
        <form action="<?php echo e(route('installment-plans.store')); ?>" method="POST" class="p-6 sm:p-8">
            <?php echo csrf_field(); ?>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Customer & Property Selection -->
                <div class="col-span-1 md:col-span-2">
                    <h3 class="text-lg font-medium text-gray-900 border-b border-gray-100 pb-2 mb-4">Assignment</h3>
                </div>
                
                <div>
                    <label for="customer_id" class="block text-sm font-medium text-gray-700">Customer *</label>
                    <select name="customer_id" id="customer_id" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Select a customer</option>
                        <?php $__currentLoopData = $customers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $customer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($customer->id); ?>"><?php echo e($customer->name); ?> (<?php echo e($customer->cnic ?? $customer->phone); ?>)</option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                
                <div>
                    <label for="property_id" class="block text-sm font-medium text-gray-700">Property / Plot *</label>
                    <select name="property_id" id="property_id" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Select a property</option>
                        <?php $__currentLoopData = $properties; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $property): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($property->id); ?>">Plot <?php echo e($property->plot_number); ?> (<?php echo e($property->status); ?>)</option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>

                <!-- Financial Details -->
                <div class="col-span-1 md:col-span-2 mt-4">
                    <h3 class="text-lg font-medium text-gray-900 border-b border-gray-100 pb-2 mb-4">Financial Details</h3>
                </div>
                
                <div>
                    <label for="total_amount" class="block text-sm font-medium text-gray-700">Total Amount (PKR) *</label>
                    <input type="number" name="total_amount" id="total_amount" x-model="total" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="e.g. 5000000">
                </div>
                
                <div>
                    <label for="down_payment" class="block text-sm font-medium text-gray-700">Down Payment (PKR) *</label>
                    <input type="number" name="down_payment" id="down_payment" x-model="downpayment" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="e.g. 1000000">
                </div>

                <div>
                    <label for="plan_type" class="block text-sm font-medium text-gray-700">Plan Type *</label>
                    <select name="plan_type" id="plan_type" x-model="planType" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="Monthly">Monthly Installments</option>
                        <option value="Construction Milestones">Construction Milestones (Linked)</option>
                    </select>
                </div>
                
                <div x-show="planType === 'Monthly'">
                    <label for="duration_months" class="block text-sm font-medium text-gray-700">Duration (Months) *</label>
                    <select name="duration_months" id="duration_months" x-model="months" :required="planType === 'Monthly'" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="12">12 Months (1 Year)</option>
                        <option value="24">24 Months (2 Years)</option>
                        <option value="36">36 Months (3 Years)</option>
                        <option value="48">48 Months (4 Years)</option>
                        <option value="60">60 Months (5 Years)</option>
                    </select>
                </div>
                
                <div x-show="planType === 'Monthly'">
                    <label for="start_date" class="block text-sm font-medium text-gray-700">First Installment Date *</label>
                    <input type="date" name="start_date" id="start_date" :required="planType === 'Monthly'" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <!-- Milestones Section (Visible if Construction Milestones) -->
                <div class="col-span-1 md:col-span-2 mt-4" x-show="planType === 'Construction Milestones'">
                    <h3 class="text-lg font-medium text-gray-900 border-b border-gray-100 pb-2 mb-4">Construction Milestones</h3>
                    <div class="space-y-3">
                        <template x-for="(milestone, index) in milestones" :key="index">
                            <div class="flex items-end gap-3">
                                <div class="flex-1">
                                    <label class="block text-xs font-medium text-gray-700 mb-1">Milestone Name</label>
                                    <input type="text" x-model="milestone.name" :name="'milestones['+index+'][name]'" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="e.g. Foundation Completed" :required="planType === 'Construction Milestones'">
                                </div>
                                <div class="flex-1">
                                    <label class="block text-xs font-medium text-gray-700 mb-1">Amount (PKR)</label>
                                    <input type="number" x-model="milestone.amount" :name="'milestones['+index+'][amount]'" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Amount" :required="planType === 'Construction Milestones'">
                                </div>
                                <div>
                                    <button type="button" @click="removeMilestone(index)" class="px-3 py-2 border border-red-200 text-red-600 rounded-md hover:bg-red-50 text-sm">Remove</button>
                                </div>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="addMilestone()" class="mt-3 text-sm text-primary-600 hover:text-primary-800 font-medium">+ Add Milestone</button>
                    
                    <div class="mt-4 p-3 rounded-md bg-yellow-50 text-yellow-800 text-sm border border-yellow-200" x-show="!isMilestoneBalanced">
                        <strong>Warning:</strong> The sum of your milestones (<span x-text="formatCurrency(totalMilestonesAmount)"></span>) must equal the Remaining Balance (<span x-text="formatCurrency(remainingBalance)"></span>).
                    </div>
                </div>
                
                <!-- Calculation Preview -->
                <div class="col-span-1 md:col-span-2 mt-4 bg-gray-50 p-6 rounded-lg border border-gray-200">
                    <h4 class="text-md font-medium text-gray-900 mb-4">Schedule Preview</h4>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                        <div>
                            <p class="text-xs text-gray-500 uppercase">Remaining Balance</p>
                            <p class="text-lg font-bold text-gray-900" x-text="formatCurrency(remainingBalance)"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 uppercase">Monthly Installment</p>
                            <p class="text-lg font-bold text-primary-600" x-text="formatCurrency(monthlyInstallment)"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 uppercase">Total Installments</p>
                            <p class="text-lg font-bold text-gray-900" x-text="months"></p>
                        </div>
                    </div>
                </div>

            </div>

            <div class="mt-8 pt-5 border-t border-gray-200 flex justify-end">
                <button type="submit" class="inline-flex justify-center py-2 px-6 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    Generate Installment Plan
                </button>
            </div>
        </form>
    </div>

    <script>
        function installmentCalculator() {
            return {
                planType: 'Monthly',
                total: 0,
                downpayment: 0,
                months: 24,
                milestones: [
                    { name: 'Mobilization & Excavation', amount: 0 }
                ],
                get remainingBalance() {
                    let r = Number(this.total) - Number(this.downpayment);
                    return r > 0 ? r : 0;
                },
                get monthlyInstallment() {
                    if(this.months > 0 && this.remainingBalance > 0) {
                        return this.remainingBalance / this.months;
                    }
                    return 0;
                },
                get totalMilestonesAmount() {
                    return this.milestones.reduce((acc, curr) => acc + Number(curr.amount), 0);
                },
                get isMilestoneBalanced() {
                    return Math.abs(this.totalMilestonesAmount - this.remainingBalance) < 1; // Tolerance for floating point
                },
                addMilestone() {
                    this.milestones.push({ name: '', amount: 0 });
                },
                removeMilestone(index) {
                    this.milestones.splice(index, 1);
                },
                formatCurrency(value) {
                    return 'PKR ' + Number(value).toLocaleString('en-PK', { maximumFractionDigits: 0 });
                }
            }
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal4619374cef299e94fd7263111d0abc69)): ?>
<?php $attributes = $__attributesOriginal4619374cef299e94fd7263111d0abc69; ?>
<?php unset($__attributesOriginal4619374cef299e94fd7263111d0abc69); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal4619374cef299e94fd7263111d0abc69)): ?>
<?php $component = $__componentOriginal4619374cef299e94fd7263111d0abc69; ?>
<?php unset($__componentOriginal4619374cef299e94fd7263111d0abc69); ?>
<?php endif; ?>
<?php /**PATH C:\wamp64\www\my-project\resources\views/installment-plans/create.blade.php ENDPATH**/ ?>