@extends('admin.cars._layout')

@section('panel-option')
    <ul class="nav nav-pills">
        <li class="nav-item"><a href="#info" class="nav-link active" id="tab-info" data-toggle="tab" role="button" aria-expanded="false">Info Dasar</a></li>
        <li class="nav-item"><a href="#ads" class="nav-link" id="tab-ads" data-toggle="tab" role="button" aria-expanded="false">Data Iklan</a></li>
        @if ($product->condition == "bekas")
        <li class="nav-item"><a href="#warranty" class="nav-link" id="tab-inspect" data-toggle="tab" role="button" aria-expanded="false">Data Garansi</a></li>
        @endif
        {{-- <li class="nav-item"><a href="#bursa" class="nav-link" id="tab-bursa" data-toggle="tab" role="button" aria-expanded="false">Bursa</a></li> --}}
    </ul>
@endsection

@section('panel-body')
    <div class="tab-content">
        <div id="info" class="tab-pane fade in active show">
            @include('admin.cars.components.cars_info', ["action" => $action])
        </div>
        <div id="ads" class="tab-pane fade">
            @include('admin.cars.components.cars_ads', ["action" => $action])
        </div>
        @if ($product->condition == "bekas")
        <div id="warranty" class="tab-pane fade">
            @include('admin.cars.components.cars_inspect', ["action" => $action])
        </div>
        @endif
        {{-- <div id="bursa" class="tab-pane fade">
            @include('admin.cars.components.bursa')
        </div> --}}
    </div>
@endsection



@push('stack-script')
    <script>
        $(function(){
            if(window.location.hash) {
                var hash = window.location.hash;
                $(hash).click();
            }
        });

    </script>
@endpush


@section('javascript')

<script>
    function ShowForm() {
        if ($('#condition').val() == "bekas") {
            $('.form-bekas').show();
            $('.form-baru').hide();
        } else {
            $('.form-bekas').hide();
            $('.form-baru').show();
        }
    }

</script>

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var showroomPreview = function(el) {
            let id = $(el).val();
            console.log(id);
            let url = '/api/get/showroom/' + id;
            $('#showroom_preview').html(`...`)
            $.get(url)
                .done((res) => {
                    let data = res.result;
                    $('#showroom_preview').html(`
                <div id="previewed">
                    <h4>${data.name}</h4>(${data.owner_name})
                    <small>${data.owner_phone}</small>
                    <p>${data.full_address}</p>
                </div>
            `);
                })
        }
    $(function() {
            showroomPreview($('select#store_id'));
            $('select#store_id').change(function(event) {
                showroomPreview(event.target);
            })
            // kosongkan image
            $('#userfile').val("");
            ShowForm();
        })

    function createProductName() {
            let brand_val = $('#brand_id').val();
            let type_val = $('#car_type_id').val();
            let varian_val = $('#varian_id').val();
            var transmisi_val = $('#transmisi').val();
            console.log(brand_val, type_val, varian_val, transmisi_val);
            var brand_name = $('#brand_id option:selected').text().trim();
            var type_name = " " + $('#car_type_id option:selected').text().trim();
            var varian_name = " " + $('#varian_id option:selected').text().trim();
            var transmisi_name = " " + $('#transmisi option:selected').text().trim();
            console.log(brand_name, type_name, varian_name, transmisi_name);
            if (brand_val == "" | brand_val == null) {
                brand_name = "";
                type_name = "";
                varian_name = "";
            }
            if (type_val == "" | type_val == null) {
                type_name = "";
                varian_name = "";
            }
            if (varian_val == "" | varian_val == null) {
                varian_name = "";
            }
            if (transmisi_val == '') {
                transmisi_name = "";
            }
            console.log(brand_val, type_val, varian_val, transmisi_val);
            console.log(brand_name, type_name, varian_name, transmisi_name);
            $('#name').val(`${brand_name}${type_name}${varian_name}${transmisi_name}`);
        }

        //  dropdown json car type
        function GetListCartype() {
            // bila cartype id kosong
            $('#car_type_id').empty();

            $('#car_type_id').append(`<option value="">--Pilih--</option>`);

            if ($('#brand_id').val() == "") {
                return false;
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: "{{ url('api/car-params/types') }}/" + $('#brand_id').val(),
                type: 'GET',
                beforeSend: function() {
                    $.LoadingOverlay("show");
                },
                complete: function() {
                    $.LoadingOverlay("hide");
                },
                success: function(json) {
                    $.LoadingOverlay("hide");
                    console.log(json);
                    if (json.status == "success") {
                        var result = json.result;
                        for (let i = 0; i < result.length; i++) {
                            const el = result[i];
                            $('#car_type_id').append(`<option value="${el.id}">${el.name}</option>`);
                        }

                        createProductName();

                    } else {
                        toastr["error"](json.error_message)
                    }

                },
                error: function(error) {
                    $.LoadingOverlay("hide");
                    console.log(error.responseJSON.message);
                    swal({
                        type: 'error',
                        html: error.responseJSON.message,
                    })
                }
            })
        }

        //  dropdown json car varian
        function GetListCarvarian() {
            console.log("===GetListCarvarian====");
            // bila cartype id kosong
            $('#varian_id').empty();

            $('#varian_id').append(`<option value="">--Pilih--</option>`);

            if ($('#car_type_id').val() == "") {
                return false;
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: "{{ url('api/car-params/varians') }}/" + $('#brand_id').val() + '/' + $('#car_type_id')
                    .val(),
                type: 'GET',
                beforeSend: function() {
                    $.LoadingOverlay("show");
                },
                complete: function() {
                    $.LoadingOverlay("hide");
                },
                success: function(json) {
                    $.LoadingOverlay("hide");
                    console.log(json);
                    if (json.status == "success") {
                        var result = json.result;
                        for (let i = 0; i < result.length; i++) {
                            const el = result[i];
                            $('#varian_id').append(`<option value="${el.id}">${el.name}</option>`);
                        }

                        createProductName();

                    } else {
                        toastr["error"](json.error_message)
                    }

                },
                error: function(error) {
                    $.LoadingOverlay("hide");
                    console.log(error.responseJSON.message);
                    swal({
                        type: 'error',
                        html: error.responseJSON.message,
                    })
                }
            })
        }

        $(function() {
            // $("#form1").submit(function(event) {
            //     event.preventDefault();
            //     ajaxSubmit();
            // });
        })

        function clearErrorValidation() {
            var form1 = $('#form1').serializeArray();
            var fields = [];
            for (let i = 0; i < form1.length; i++) {
                const el = form1[i];
                fields = [...fields, el.name];
            }
            for (let j = 0; j < fields.length; j++) {
                if (fields[j] != "filename[]") { //exclude ini karna error
                    $("#" + fields[j] + "_error").text("");
                    $("#" + fields[j]).removeClass("is-invalid");
                }

            }

        }
    let timeout = null;

    $('input#nomor_rangka').keyup(function() {
        let q = $(this).val();


        let query = window.location.origin + '/admin/api/cek_nomor_rangka?no_rangka=' + q;
        $('#no_rangka_loading').html("... mencari no. rangka")
        $('#no_rangka_success').html("")
        $('#no_rangka_error').html("")

        clearTimeout(timeout);
        timeout = setTimeout(function () {
            if (q == '') {
                $('#no_rangka_loading').html("")
                $('#no_rangka_success').html("")
                $('#no_rangka_error').html("")
                return true;
            }
            $.get(query)
                .then((res) => {
                    $('#no_rangka_success').html("No. Rangka terkonfirmasi WPlus")
                    $('#no_rangka_loading').html("")
                    $('#no_rangka_error').html("")
                })
                .fail((err) => {
                    $('#no_rangka_error').html("No. Rangka tidak terkonfirmasi")
                    $('#no_rangka_loading').html("")
                    $('#no_rangka_success').html("")
                })
        }, 500);
    });

    $('input#showroom_search').change(function() {
        console.log("Halo");
    })

    var showroomPreview = function(el) {
        let id = $(el).val();
        console.log(id);
        let url = '/api/get/showroom/' + id;
        $('#showroom_preview').html(`...`)
        $.get(url)
        .done((res) => {
            let data = res.result;
            $('#showroom_preview').html(`
                <div id="previewed">
                    <h4>${data.name}</h4>(${data.owner_name})
                    <small>${data.owner_phone}</small>
                    <p>${data.full_address}</p>
                </div>
            `);
        })
    }
</script>
@endsection