@extends('layouts.dnp')
@section('title','GIMS')
@section('styles')
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css') }}">

<style>
    .button {
        background-color: #3077bb;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .button:hover {
        background-color: #e68524;
    }

    .buttond {
        background-color: #db1709;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .buttond:hover {
        background-color: #e68524;
    }

    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
        border-color: #80d8ff;
    }
</style>
@endsection
@section('script')
<script src="{{ asset('js/jquery.sweetalert2.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script>
    $('.btnrefresh').click(function(e) {

        e.preventDefault(); // do not submit form
        document.location.href = "{{ route('vehicleinspection.create') }}";

    });

    $('#vehicles').change(function() {
        var identificationcode = $(this).val();


        $.ajax({
            url: "{{ route('get-dvehicledetails')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                identificationcode: identificationcode
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                $('#regono').val(response.data[0].vehicle_number);
                $('#pcost').val(response.data[0].cost);
                $('#vehicletype').val(response.data[0].asset_category.asset_category_name);
                $('#chassisno').val(response.data[0].chasis_no);
                $('#modelno').val(response.data[0].vehiclemodel);
                $('#engineno').val(response.data[0].engine_no);
                $('#purchaseyear').val(response.data[0].purchase_order_date);
                $('#condition').val(response.data[0].vcondition.conditions);


            }
        });
    });


    //attaching "change" event to the file upload button
    document.getElementById("file_path").addEventListener("change", validateFile)

    function validateFile() {
        const allowedExtensions = ['pdf', 'jpeg', 'jpg', 'png'],
            sizeLimit = 5000000; // 5 megabyte

        // destructuring file name and size from file object
        const {
            name: fileName,
            size: fileSize
        } = this.files[0];

        /*
         * if the filename is apple.png, we split the string to get ["apple","png"]
         * then apply the pop() method to return the file extension (png)
         *
         */
        const fileExtension = fileName.split(".").pop();

        /* 
          check if the extension of the uploaded file is included 
          in our array of allowed file extensions
        */
        if (!allowedExtensions.includes(fileExtension)) {
            alert("Please upload only pdf, jpg, jpeg and png files.");
            this.value = null;
        } else if (fileSize > sizeLimit) {
            alert("File size too large.")
            this.value = null;
        }
    }
</script>

@endsection
@section('content')
<div class="page-content fade-in-up">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">Vehicle Inspection Form</div>
                </div>
                <div class="ibox-body">

                    {{ Form::open(['url'=>route('disposalinspection.store'), 'id'=>'equipment-form', 'files'=>'true'] )}}

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Vehicle Identification Code<span class="required">*</span>: </label>
                                <div class="col-sm-8">
                                    <select name="vehicles" required id="vehicles" class="form-control form-control-sm">
                                        <option value="" selected disabled>--Select Any One--</option>
                                        @if($vehicledetail)
                                        @foreach($vehicledetail as $type)
                                        <option value="{{ $type->identification_code }}">{{ $type->identification_code }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">

                            <div class="form-group row">
                                <label for="" class="col-sm-4">Registration No: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="regono" class="form-control form-control-sm text-success" readonly id="regono">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Purchase Cost: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="pcost" class="form-control form-control-sm text-success" readonly id="pcost">
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">

                            <div class="form-group row">
                                <label for="" class="col-sm-4">Vehicle Type : </label>
                                <div class="col-sm-8">
                                    <input type="text" name="vehicletype" class="form-control form-control-sm text-success" readonly id="vehicletype">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Chassis No: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="chassisno" class="form-control form-control-sm text-success" readonly id="chassisno">
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Model / Year: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="modelno" class="form-control form-control-sm text-success" readonly id="modelno">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Engine No: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="engineno" class="form-control form-control-sm text-success" readonly id="engineno">
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Purchase Year: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="purchaseyear" class="form-control form-control-sm text-success" readonly id="purchaseyear">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="form-group row">
                                <label for="" class="col-sm-4">Condition: </label>
                                <div class="col-sm-8">
                                    <input type="text" name="condition" class="form-control form-control-sm text-success" id="condition">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1"></div>
                    <div class="col-5">
                        <div class="form-group row">
                            <label for="" class="col-sm-4">Tools available <span class="required">*</span>:</label>
                            <div class="col-sm-8">
                                <textarea name="toolsa" required id="toolsa" rows="5" style="resize: none;" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="col-5">
                        <div class="form-group row">
                            <label for="" class="col-sm-4">Accessories available <span class="required">*</span>:</label>
                            <div class="col-sm-8">
                                <textarea name="accessories" required id="accessories" rows="5" style="resize: none;" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-1"></div>
                    <div class="col-5">
                        <div class="form-group row">
                            <label for="" class="col-sm-4">Parts damaged <span class="required">*</span>:</label>
                            <div class="col-sm-8">
                                <textarea name="partdamaged" required id="partdamaged" rows="5" style="resize: none;" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="col-5">
                        <div class="form-group row">
                            <label for="" class="col-sm-4">Parts missing<span class="required">*</span>:</label>
                            <div class="col-sm-8">
                                <textarea name="partsmissing" id="partsmissing" rows="5" style="resize: none;" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-3"></div>
                            <div class="col-3"> <button class="yyy btn button" type="submit"><i class="fa fa-paper-plane"></i> Submit</button></div>
                            <div class="col-3"> <button class="btn  buttond btncancel" type="reset"><i class="fa fa-trash"></i> Cancel </button></div>
                            <div class="col-3"></div>
                        </div>

                    </div>
                </div>

                {{ Form::close() }}
            </div>
        </div>
    </div>
</div>


@endsection