@extends('layouts.app')

@section('title', 'Sell Car')

@section('content')
<div class="form-container">
    <h2 class="mb-4">Sell Car <br> {{ $car->make }} {{ $car->varient }} <br> {{ $car->registration_no }} </h2>

    <form action="{{ route('save.sale.info') }}" method="POST">
        @csrf

        
        {{-- Date Field --}}
    <div class="mb-3">
        <label for="date">Date of Sale</label>
        <input type="date" name="date" id="date" class="form-control" value="{{ \Carbon\Carbon::now()->toDateString() }}" required>
    </div>
        <input type="hidden" name="car_id" value="{{ $car->id }}">
        <input type="hidden" name="make" value="{{ $car->make }}">
        <input type="hidden" name="model" value="{{ $car->model }}">
        <input type="hidden" name="varient" value="{{ $car->varient }}">
        <input type="hidden" name="reg_year" value="{{ $car->reg_year }}">
        <input type="hidden" name="chassis_no" value="{{ $car->chassis_no }}">
        <input type="hidden" name="engine_no" value="{{ $car->engine_no }}">
        <input type="hidden" name="registered_city" value="{{ $car->registered_city }}">
        <input type="hidden" name="transmission" value="{{ $car->transmission }}">
        <input type="hidden" name="color" value="{{ $car->color }}">
        <input type="hidden" name="registration_no" value="{{ $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>Sold Price</label>
    <input type="text" id="soled_price" name="soled_price" class="form-control" required>
</div>

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

<div class="mb-3">
    <label>Remaining Payment</label>
    <input type="text" id="remaining_payment" name="remaining_payment" class="form-control" readonly>
</div>

<script>
function formatNumberInput(input) {
    input.addEventListener('input', function(e) {
        let value = e.target.value.replace(/,/g, ''); // remove commas
        if (!isNaN(value) && value !== '') {
            e.target.value = Number(value).toLocaleString();
        }
    });
}

// Apply formatting to fields
formatNumberInput(document.getElementById('purchase_price'));
formatNumberInput(document.getElementById('soled_price'));
formatNumberInput(document.getElementById('received_amount'));

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

function updateRemaining() {
    // remove commas before parsing
    const soled = parseFloat(soledPriceInput.value.replace(/,/g, '')) || 0;
    const received = parseFloat(receivedAmountInput.value.replace(/,/g, '')) || 0;
    const remaining = soled - received;
    remainingPaymentInput.value = remaining >= 0 ? remaining.toLocaleString() : "0";
}

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



        <button type="submit" class="btn btn-primary">Save Sale Info</button>
    </form>
</div>
@endsection

<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>