@extends('template.app')

@section('meta')
@endsection

@section('title')
Create Manage sales
@endsection

@section('styles')


<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
     .col-sm-3{
        font-size: 15px;
    }
    .form-control{
        height: 32px;
        font-size: 14px;
    }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Manage Sales</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('sales') }}" class="text-muted">Manage Sales</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Create</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('sales.insert') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                        <div class="row">

                            <div class="form-group col-sm-3">
                                <label for="car_name">Car Model</label>
                                <select class="form-control" name="car_name" id="car_name">
                                    <option value="">Select Car Model</option>
                                    @if(isset($Carmodel_arr))
                                    @foreach($Carmodel_arr as $car_model)
                                    <option value="{{ $car_model->id }}"> {{ $car_model->name }}</option>
                                    @endforeach
                                    @endif
                                </select>

                                <span class="kt-form__help error car_name"></span>
                            </div>

                            <div class="form-group col-sm-3" id="fule_type">
                                <label for="fule_type">Fuel Type</label>
                                <select class="form-control" name="fuel_type" id="fuel_type">
                                    <option value="">Select Fuel Type</option>
                                    @if(isset($fuel_type))
                                    @foreach($fuel_type as $fuel)
                                    <option value="{{ $fuel->id }}"> {{ $fuel->title }}</option>
                                    @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error fule_type"></span>
                            </div>

                            <div class="form-group col-sm-3">
                                <label for="car_name">Car Veriant</label>
                                <select class="form-control" name="veriant" id="veriant">
                                </select>
                                <span class="kt-form__help error car_name"></span>
                            </div>



                            <div class="form-group col-sm-3">
                                <label for="name">Select Car Color</label>
                                <select class="form-control" name="name" id="name" onchange="car_mveriant(this);">
                                </select>
                                <span class="kt-form__help error branch_id"></span>
                            </div>

                            <div class="form-group col-sm-3">
                                <label for="exterior_color">Exterior Color</label><br>
                                <input type="text" class="form-control" name="exterior_color" id="exterior_color" readonly>
                                <span class="kt-form__help error exterior_color"></span>
                            </div>

                            <div class="form-group col-sm-3">
                                <label for="interior_color">Interior Color</label><br>
                                <input type="text" class="form-control" name="interior_color" id="interior_color" readonly>
                                <span class="kt-form__help error interior_color"></span>
                            </div>



                            <div class="form-group col-sm-3" id="fule_type">
                                <label for="fule_type">Team</label>
                                <select class="form-control" name="team" id="team">
                                    <option value="">Select Team</option>
                                    @if(isset($team_master))
                                    @foreach($team_master as $team)
                                    <option value="{{ $team->id }}"> {{ $team->team_name }}</option>
                                    @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error team"></span>
                            </div>







                            <div class="form-group col-md-3">
                                <label class="control-label">Date</label>
                                <input type="text" name="created_date" id="created_date" class="form-control" placeholder="dd-mm-yyyy">


                                <span class="kt-form__help error created_date"></span>
                            </div>


                            <div class="form-group col-sm-3">
                                <label for="monthly_target">Monthly Target</label>
                                <input type="text" name="monthly_target" id="monthly_target" class="form-control" placeholder="Enter Monthly Target">
                                <span class="kt-form__help error monthly_target"></span>
                            </div>

                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-primary">Submit</button>
                            <a href="{{ route('inventory') }}" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-secondary">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>
    $(document).ready(function() {
        var form = $('#form');
        $('.kt-form__help').html('');
        form.submit(function(e) {
            $('.help-block').html('');
            $('.m-form__help').html('');
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: new FormData($(this)[0]),
                dataType: 'json',
                async: false,
                processData: false,
                contentType: false,
                success: function(json) {
                    return true;
                },
                error: function(json) {
                    if (json.status === 422) {
                        e.preventDefault();
                        var errors_ = json.responseJSON;
                        $('.kt-form__help').html('');
                        $.each(errors_.errors, function(key, value) {
                            $('.' + key).html(value);
                        });
                    }
                }
            });
        });
    });

    function car_mveriant(e) {
        var id = e.value;
        $.ajax({
            url: "{{ url('inventory/carvarient/') }}",
            data: {
                'id': id
            },
            type: 'get',
            dataType: 'json',

            success: function(resp) {


                var html = ihtml = ehtml = phtml = vhtml = '';

                jQuery.each(resp.data, function(key, val) {
                    /* html = val.car_name;
                     vhtml = val.varient_name;*/
                    ehtml = val.exterior_color;
                    ihtml = val.interior_color;
                    phtml = val.ex_showroom_price;
                });
                jQuery("#exterior_color").val(ehtml);
                jQuery("#interior_color").val(ihtml);
                jQuery("#ex_showroom_price").val(phtml);
                /*jQuery("#veriant").val(vhtml);
                jQuery("#car_name").val(html);*/
            }
        });

    }

    function car_name_new(car_model, fuel_type, option_check) {
        $.ajax({
            url: "{{ url('inventory/car_varient_asper_fueltype') }}",
            data: {
                'car_model': car_model,
                'fuel_type': fuel_type,
                'option_check': option_check
            },
            type: 'get',
            dataType: 'json',
            success: function(resp) {
                var html = '';
                var e_row = resp.data.Carvarient_arr;
                //console.log(e_row);
                html = '';
                html += '<option value="">Select Veriant</option>';
                jQuery.each(e_row, function(key, val) {
                    html += '<option value="' + val.id + '">' + val.name + '</option>';
                });
                console.log(html);
                jQuery("#veriant").empty();
                jQuery("#veriant").html(html);
            }
        });
    }
    jQuery(document).on('change', '#fuel_type', function(e) {
        //var id = $('#car_name').val();
        var option_check = 'Carvarient';
        var fuel_type = $('#fuel_type').val();
        var car_model = $('#car_name').val();
        // alert('1');
        car_name_new(car_model, fuel_type, option_check);
    });

    function car_list_new(id, option_check) {
        $.ajax({
            url: "{{ url('obf/car_drop_down_get/') }}",
            data: {
                'id': id,
                'option_check': option_check
            },
            type: 'get',
            dataType: 'json',
            success: function(resp) {
                var html = '';
                var e_row = resp.data.carname_arr;
                console.log(e_row);
                html = '';
                html += '<option value="">Select Car</option>';
                jQuery.each(e_row, function(key, val) {
                    //+ val.car_name + ' | ' + val.varient_name + ' | ' 
                    html += '<option value="' + val.id + '">' + val.exterior_color + ' | ' + val.interior_color + '</option>';
                });
                console.log(html);
                jQuery("#name").empty();
                jQuery("#name").html(html);
            }
        });
    }
    jQuery(document).on('change', '#veriant', function(e) {
        var id = $('#veriant').val();
        var option_check = 'carname';
        // alert('1');
        car_list_new(id, option_check);
    });

    jQuery(document).on('keyup', '#purchase_price', function(e) {
        var ex_showroom_price = $('#ex_showroom_price').val();
        var purchase_price = $('#purchase_price').val();
        var kin_margin = ex_showroom_price - purchase_price;
        $('#kin_margin').val(kin_margin);
    });

    $(function() {
        $("#created_date").datepicker({
            dateFormat: 'dd-mm-yy'
        });

    });
</script>
@endsection