@extends('layouts.main')
@include('admin.cars.form.ad_info')
@include('admin.cars.form.ad_status')
@include('admin.cars.form.ad_images')
@include('admin.cars.form.cars_basic')
@include('admin.cars.form.cars_owner')


@section('container')
    <form method="POST" cemes="form" class="row justify-content-around" action="{{ $action ?? route('admin.product.save') }}"
        data-index-url="{{ url()->current() }}" cemes-redirect="api">
        @csrf
        <input type="hidden" name="id" value="{{ old('id', $edit ? $product->id : '') }}">

        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-header">Data Mobil</div>
                <div class="card-body">
                    <div class="col-12">
                        @yield('cars-basic')
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">Kepemilikan</div>
                <div class="card-body">
                    <div class="col-12">
                        @yield('cars-owner')
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-header">Data Iklan</div>

                <div class="card-body">
                    <div class="col-12 mb-5">
                        @yield('ad-images')
                        @yield('ad-info')
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    @yield('ad-status')
                </div>
            </div>
        </div>
        <div class="card col-12">
            <div class="card-body">
                <a href="{{ route('admin.product.index') }}" class="btn btn-default">Kembali</a>
                {{-- <a href="{{ route('admin.product.settings') }}" class="btn btn-secondary"><i class="fa fa-cog"></i> Pengaturan</a> --}}
                <button type="submit" class="btn btn-primary float-right">Simpan Data Mobil</button>
            </div>
        </div>
    </form>
@endsection



@section('javascript')
    <script>
        $(function() {
            showroomPreview($('select#store_id'));
            $('select#store_id').change(function(event) {
                showroomPreview(event.target);
            })
            // kosongkan image
            $('#userfile').val("");
            ShowForm();
        })

        function ajaxUpload() {
            var file_data = $("#userfile").prop("files")[0];
            var form_data = new FormData();
            form_data.append("userfile", file_data);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('v2.upload', 'image_product') }}",
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                beforeSend: function() {
                    $.LoadingOverlay("show");
                },
                complete: function() {
                    $.LoadingOverlay("hide");
                },
                success: function(json) {
                    console.log(json);
                    if (json.status == "success") {
                        var url = "{{ asset('storage/uploads/products-thumbs') }}/" + json.result;
                        var html = `
                    <div class="col-6">
                        <img style="width:100%;" src="${url}">
                        <input type="hidden" name="filename[]" value="${json.result}">
                        <div class="form-check">
                        <input class="form-check-input" type="radio" name="default_image" value="${json.result}" checked>
                            <label class="form-check-label">
                                Default Image
                            </label>
                        </div>
                        <a href="javascript:void(0)" class="btn btn-danger btn-sm btn-block" style="margin-top:5px;margin-bottom:10px;" onclick=" $(this).parent().remove(); " ><i class="fa fa-trash" style="margin-right:5px;"></i>Hapus</a>
                    </div>
                    `;
                        $('#img_array').append(html);

                    } else {
                        swal({
                            type: 'error',
                            title: 'Error',
                            html: json.error_message,
                        });
                    }

                },
                error: function() {
                    swal({
                        type: 'error',
                        html: 'Error data occured.',
                    });
                }
            });
        }
    </script>

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

        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() {
            // 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,
                    })
                }
            })
        }
    </script>

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

        let timeout = null;

        $('input#nomor_rangka1').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