<?php $__env->startSection('title', 'Sell Car'); ?>

<?php $__env->startSection('content'); ?>
<div class="form-container">
    <h2 class="mb-4">Sell Car <br> <?php echo e($car->make); ?> <?php echo e($car->varient); ?> <br> <?php echo e($car->registration_no); ?> </h2>

    <form action="<?php echo e(route('save.sale.info')); ?>" method="POST">
        <?php echo csrf_field(); ?>

        
        
    <div class="mb-3">
        <label for="date">Date of Sale</label>
        <input type="date" name="date" id="date" class="form-control" value="<?php echo e(\Carbon\Carbon::now()->toDateString()); ?>" required>
    </div>
        <input type="hidden" name="car_id" value="<?php echo e($car->id); ?>">
        <input type="hidden" name="make" value="<?php echo e($car->make); ?>">
        <input type="hidden" name="model" value="<?php echo e($car->model); ?>">
        <input type="hidden" name="reg_year" value="<?php echo e($car->reg_year); ?>">
        <input type="hidden" name="chassis_no" value="<?php echo e($car->chassis_no); ?>">
        <input type="hidden" name="engine_no" value="<?php echo e($car->engine_no); ?>">
        <input type="hidden" name="registered_city" value="<?php echo e($car->registered_city); ?>">
        <input type="hidden" name="transmission" value="<?php echo e($car->transmission); ?>">
        <input type="hidden" name="color" value="<?php echo e($car->color); ?>">
        <input type="hidden" name="registration_no" value="<?php echo e($car->registration_no); ?>">
        



        <h4>Seller Information</h4>
        <div class="mb-3">
            <label>Seller Name</label>
            <input type="text" name="seller_name" value="Ishfaq Khan" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Seller CNIC</label>
            <input type="text" name="seller_cnic" value="17101-7475622-9" class="form-control cnic-format" required>
        </div>
        <div class="mb-3">
            <label>Seller Phone</label>
            <input type="text" name="seller_phone" value="0301-3024617" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Seller Address</label>
            <!-- <textarea name="seller_address" value="0301-3024617" class="form-control" required></textarea> -->
            <input type="text" name="seller_address" value="Tooth kely p/o Sardehri Wardaga tehsil & district Charsadda" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Witness Name</label>
            <input type="text" name="seller_witness_name" value="Junaid Ullah" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Witness CNIC</label>
            <input type="text" name="seller_witness_cnic" value="17101-8218773-1" class="form-control cnic-format" required>
        </div>

        <h4>Buyer Information</h4>
        <div class="mb-3">
            <label>Buyer Name</label>
            <input type="text" name="buyer_name" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Buyer CNIC</label>
            <input type="text" name="buyer_cnic" class="form-control  cnic-format" required>
        </div>
        <div class="mb-3">
            <label>Buyer Phone</label>
            <input type="text" name="buyer_phone" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Buyer Address</label>
            <textarea name="buyer_address" class="form-control" required></textarea>
        </div>
        <div class="mb-3">
            <label>Witness Name</label>
            <input type="text" name="buyer_witness_name" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Witness CNIC</label>
            <input type="text" name="buyer_witness_cnic" class="form-control cnic-format" required>
        </div><br>

        <div class="form-group">
            <label for="khan_motors">Khan Motors Car:</label>
            <input type="checkbox" id="khan_motors" name="khan_motors" value="1">
        </div>

        <div class="mb-3">
            <label for="purchase_price">Purchase Price:</label>
            <input type="text" id="purchase_price" name="purchase_price" class="form-control" required>
        </div>


        <div class="mb-3">
            <label>Soled Price</label>
            <input type="number" id="soled_price" name="soled_price" class="form-control" required>
        </div>

        <div class="mb-3">
            <label>Received Amount</label>
            <input type="number" id="received_amount" name="received_amount" class="form-control" required>
        </div>



<script>
    const soledPriceInput = document.getElementById('soled_price');
    const receivedAmountInput = document.getElementById('received_amount');
    const remainingPaymentInput = document.getElementById('remaining_payment');

    function updateRemaining() {
        const soled = parseFloat(soledPriceInput.value) || 0;
        const received = parseFloat(receivedAmountInput.value) || 0;
        const remaining = soled - received;
        remainingPaymentInput.value = remaining >= 0 ? remaining : 0;
    }

    soledPriceInput.addEventListener('input', updateRemaining);
    receivedAmountInput.addEventListener('input', updateRemaining);
</script>


        <button type="submit" class="btn btn-primary">Save Sale Info</button>
    </form>
</div>
<?php $__env->stopSection(); ?>

<style>

.form-group {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
        margin-top: 15px;
        width: 50%;
    }
    .form-group label {
        flex: 0 0 40%;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .form-group input {
        flex: 0 0 60%;
        padding: 10px;
        font-size: 14px;
        border-radius: 5px;
        border: 4px solid gray;    }


    .form-control {
    border: 2px solid gray;
    }

    .mb-3 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    }
    .form-container {
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        max-width: 800px;
        margin: 30px auto;
        font-family: Arial, sans-serif;
        border-style: groove;
    }
    .form-container h2 {
        text-align: center;
        margin-bottom: 25px;
    }  
</style>




<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.cnic-format').forEach(function (input) {
            input.addEventListener('input', function (e) {
                let value = e.target.value.replace(/\D/g, ''); // Remove non-digits

                if (value.length >= 5 && value.length <= 12) {
                    value = value.slice(0, 5) + '-' + value.slice(5);
                }
                if (value.length > 12) {
                    value = value.slice(0, 5) + '-' + value.slice(5, 12) + '-' + value.slice(12, 13);
                }

                e.target.value = value;
            });
        });
    });
</script>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/laravel-app1/resources/views/cars/sell.blade.php ENDPATH**/ ?>