<!-- create edit file for the following code to update it. -->



<?php $__env->startSection('title', 'Khan Motors'); ?>

<?php $__env->startSection('content'); ?>
<style>
    .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;
    }
    .form-group {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }
    .form-group label {
        flex: 0 0 40%;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .form-group input,
    .form-group textarea {
        flex: 0 0 60%;
        padding: 10px;
        font-size: 14px;
        border-radius: 5px;
        border: 2px solid gray;    }
    .rating-section {
        margin-top: 30px;
        border-top: 1px solid #ddd;
        padding-top: 20px;
    }
    .rating-group {
        margin-bottom: 10px;
    }
    .rating-group label {
        display: inline-block;
        width: 250px;
        font-weight: bold;
    }
    .rating-group input[type=number] {
        width: 80px;
    }
    .comments-section {
        margin-top: 20px;
    }
    .sketch-section {
        margin-top: 30px;
    }
    button[type="submit"] {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }
</style>

<div class="form-container">
    <h2>Car Inspection Report</h2>
    <form action="<?php echo e(route('cars.store')); ?>" method="POST" enctype="multipart/form-data" onsubmit="saveSketchData()">
        <?php echo csrf_field(); ?>

        
        <div class="form-group">
            <label for="make">Make:</label>
            <input type="text" id="make" name="make">
        </div>

        <div class="form-group">
            <label for="model">Model:</label>
            <input type="text" id="model" name="model">
        </div>

        <div class="form-group">
            <label for="reg_year">Reg Year:</label>
            <input type="text" id="reg_year" name="reg_year">
        </div>

        <div class="form-group">
            <label for="varient">Varient:</label>
            <input type="text" id="varient" name="varient">
        </div>

        <div class="form-group">
            <label for="engine_capacity">Engine Capacity:</label>
            <input type="text" id="engine_capacity" name="engine_capacity">
        </div>

        <div class="form-group">
            <label for="mileage">Mileage:</label>
            <input type="text" id="mileage" name="mileage">
        </div>

        <div class="form-group">
            <label for="fuel_type">Fuel Type:</label>
            <input type="text" id="fuel_type" name="fuel_type">
        </div>

        <div class="form-group">
            <label for="inspection_date">Inspection Date:</label>
            <input type="date" id="inspection_date" name="inspection_date">
        </div>

        <div class="form-group">
            <label for="chassis_no">Chassis No:</label>
            <input type="text" id="chassis_no" name="chassis_no">
        </div>

        <div class="form-group">
            <label for="engine_no">Engine No:</label>
            <input type="text" id="engine_no" name="engine_no">
        </div>

        <div class="form-group">
            <label for="registration_no">Registration No:</label>
            <input type="text" id="registration_no" name="registration_no">
        </div>

        <div class="form-group">
            <label for="location">Location:</label>
            <input type="text" id="location" name="location">
        </div>

        <div class="form-group">
            <label for="registered_city">Registered City:</label>
            <input type="text" id="registered_city" name="registered_city">
        </div>

        <div class="form-group">
            <label for="transmission">Transmission Type:</label>
            <select id="transmission" name="transmission" class="form-group-lg">
                <option value="">Select Transmission</option>
                <?php $__currentLoopData = $transmissionTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($type->transmission_type); ?>"><?php echo e($type->transmission_type); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </div>


        <div class="form-group">
            <label for="color">Color:</label>
            <input type="text" id="color" name="color">
        </div>

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

        <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="form-group">
            <label for="demond">Demand:</label>
            <input type="text" id="demond" name="demond">
        </div>

        

        
        <div class="comments-section">
            <label for="inspector_comments">Inspector Comments:</label>
            <textarea name="inspector_comments" id="inspector_comments" rows="1" class="form-control"></textarea>
        </div>

        
        <div class="sketch-section">
            <label for="exterior_sketch">Exterior Condition (Sketch):</label>
            <div id="sketch-area-container" style="border:1px solid #ccc; width:100%; height:300px;">
                <canvas id="sketch-area" width="700" height="300"></canvas>
            </div>
            <input type="hidden" name="exterior_sketch_data" id="exterior_sketch_data">
        </div>
        <br><br>

        
        
        <div class="form-control">
            <label style="width: 100%; font-weight: bold;">Upload Pictures:</label>

            <div class="row">
                
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture1" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture2" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture3" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture4" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture5" class="form-control-file">
                        <small>image</small>
                    </div>
                
                
            </div>

            <div class="row">
                
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture6" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture7" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture8" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture9" class="form-control-file">
                        <small>image</small>
                    </div>
                    <div class="col-md-2 mb-3">
                        <input type="file" name="picture10" class="form-control-file">
                        <small>image</small>
                    </div>

                
            </div>
        </div>


        <button type="submit">Submit Report</button>
    </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>

<!-- Style for option menu -->
<style>
    #optionMenu {
        position: absolute;
        background-color: white;
        border: 1px solid #ccc;
        z-index: 9999;
        padding: 5px;
        display: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    #optionMenu button {
        display: block;
        width: 100%;
        background: none;
        border: none;
        padding: 5px 10px;
        text-align: left;
        cursor: pointer;
    }

    #optionMenu button:hover {
        background-color: #f0f0f0;
    }
</style>

<!-- Custom dropdown menu for labels -->
<div id="optionMenu">
    <button onclick="addLabel('S')">S</button>
    <button onclick="addLabel('SF')">SF</button>
    <button onclick="addLabel('MS')">MS</button>
    <button onclick="addLabel('P')">P</button>
    <button onclick="addLabel('D')">D</button>
</div>

<script>
    const canvas = new fabric.Canvas('sketch-area', {
        isDrawingMode: false
    });

    // Load background image (e.g., car outline)
    fabric.Image.fromURL('/car-outline.png', function(img) {
        img.set({
            selectable: false,
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height
        });
        canvas.add(img);
        canvas.sendToBack(img);
    });

    let clickPos = null;
    const optionMenu = document.getElementById('optionMenu');
    let menuVisible = false;

    // Show menu on canvas click
    canvas.on('mouse:down', function (options) {
        const pointer = canvas.getPointer(options.e);
        clickPos = pointer;

        optionMenu.style.left = (options.e.pageX + 5) + 'px';
        optionMenu.style.top = (options.e.pageY + 5) + 'px';
        optionMenu.style.display = 'block';
        menuVisible = true;

        options.e.preventDefault();
        options.e.stopPropagation();
    });

    // Add selected label to canvas
    function addLabel(label) {
        const text = new fabric.Text(label, {
            left: clickPos.x,
            top: clickPos.y,
            fill: 'red',
            fontSize: 16,
            fontWeight: 'bold',
            selectable: true
        });
        canvas.add(text);
        optionMenu.style.display = 'none';
        menuVisible = false;
    }

    // Hide menu when clicking outside
    window.addEventListener('mousedown', function(e) {
        if (menuVisible && !optionMenu.contains(e.target)) {
            setTimeout(() => {
                optionMenu.style.display = 'none';
                menuVisible = false;
            }, 100); // slight delay allows menu click
        }
    });

    function saveSketchData() {
    document.getElementById('exterior_sketch_data').value = JSON.stringify(canvas.toJSON());
    }    

    // Save canvas JSON on form submit
    // document.querySelector('form').addEventListener('submit', function(e) {
    //     document.getElementById('exterior_sketch_data').value = JSON.stringify(canvas.toJSON());
    // });
</script>


<?php $__env->stopSection(); ?>
<?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/create.blade.php ENDPATH**/ ?>