@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">Riwayat</a></li>
    </ul>
@endsection
@section('panel-body')

<div>
    <table width="100%">
        <tr>
            <td>
                <form class="data-table-search">
                    <input type="hidden" name="store_id" id="store_id" value="{{ $product->id }}">
                    <div class="row" style="">
                        <div class="col-12 col-md-5" style="margin-bottom: 10px;">
                            <input type="text" name="name" id="keyword" class=" form-control form-control-sm"
                                placeholder="Cari berdasarkan jenis aktivitas atau remark"
                                value="{{ request()->get('keyword') }}">
                        </div>
                        <div class="">
                            <button class="btn btn-secondary btn-sm" type="submit"><i
                                    class="fa fa-search" style="margin-right:5px"></i>Cari</button>
                        </div>
                    </div>
                </form>
            </td>
        </tr>
    </table>
    <div class="scroll-x-table">
        <table class="table table-bordered table-striped datatable-ajax" data-ajax-context="common"
            data-ajax-url="{{ route('admin.activity.list_product', $product->id) }}" width="100%">
            <thead>
                <tr>
                    <th class="no-sort" width="10">No</th>
                    <th class="no-sort">Action</th>
                    <th class="no-sort">Subject</th>
                    <th class="no-sort">Sales</th>
                    <th class="no-sort" width="10">Poin</th>
                    <th>Datetime</th>
                    <th class="no-sort">#</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

@include('admin.activity.components.modal')



@endsection



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

    </script>
@endpush


@section('javascript')

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

</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#no_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