@extends('layouts.store')
@section('body')
    <!-- ========================= SECTION CONTENT ========================= -->
    <section class="section-content padding-y">
        <div class="container col-7">

            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title mb-3">Delivery info</h4>
                    <div class="form-row">
                        <div class="col form-group">
                            <label>First name</label>
                            <input type="text" id="fname" class="form-control" placeholder="">
                        </div> <!-- form-group end.// -->
                        <div class="col form-group">
                            <label>Last name</label>
                            <input type="text" id="lname" class="form-control" placeholder="">
                        </div> <!-- form-group end.// -->
                    </div> <!-- form-row end.// -->

                    <div class="form-row">
                        <div class="col form-group">
                            <label>Email</label>
                            <input type="email" id="email" class="form-control" placeholder="">
                        </div> <!-- form-group end.// -->
                        <div class="col form-group">
                            <label>Phone</label>
                            <input type="text" id="phone" class="form-control" placeholder="">
                        </div> <!-- form-group end.// -->
                    </div> <!-- form-row end.// -->

                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label>Province</label><br>
                            <select class="js-example-basic-single form-control" name="province" id="province">
                                <option value=""></option>
                            </select>
                        </div> <!-- form-group end.// -->
                        <div class="form-group col-md-4">
                            <label>City</label><br>
                            <select class="js-example-basic-single form-control" name="city" id="city">
                                <option value=""></option>
                            </select>
                        </div> <!-- form-group end.// -->
                        <div class="form-group col-md-4">
                            <label>District</label><br>
                            <select class="js-example-basic-single form-control" name="district" id="district">
                                <option value=""></option>
                            </select>
                        </div> <!-- form-group end.// -->
                    </div> <!-- form-row.// -->
                    <div class="form-group">
                        <label>Address</label>
                        <textarea id="address" class="form-control" rows="2"></textarea>
                    </div> <!-- form-group// -->
                    {{-- <h4>Courier</h4>
                <div class="form-row">
                    <div class="form-group col-sm-4">
                        <label class="js-check box active">
                            <input type="radio" name="dostavka" value="option1" checked>
                            <h6 class="title">Standart delivery</h6>
                        </label> <!-- js-check.// -->
                    </div>
                </div> <!-- form row.// --> --}}

                </div> <!-- card-body.// -->
            </div> <!-- card .// -->

            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title mb-4">Courier</h4>
                    <div class="courierContent">
                        <div id="accordion">
                            <div class="card">
                                <div class="card-header" id="headingOne">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                            aria-expanded="false" aria-controls="collapseOne">
                                            <h5>Instant</h5>
                                        </button>
                                    </h5>
                                </div>

                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="list-group instant">

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingTwo">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            <h5>Same Day</h5>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="list-group sameday">

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingThree">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapseThree" aria-expanded="false"
                                            aria-controls="collapseThree">
                                            <h5>Next Day</h5>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="list-group nextday">

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingFour">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                            <h5>Regular</h5>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="list-group regular">

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingFive">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                            <h5>Cargo</h5>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseFive" class="collapse" aria-labelledby="headingFive"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="list-group cargo">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title mb-4">Payment</h4>
                    <form role="form" class="pb-3">
                        <div class="form-row" id="total-amount">

                        </div>
                        <div class="form-row" id="payment-list">
                        </div>
                        <button onclick="createOrder()" class="subscribe btn btn-primary btn-block" type="button"
                            id="confirm"> Confirm
                        </button>
                    </form>
                    {{-- <div class="row py-1 text-muted">
                    <div class="col-sm-3">
                        Payment Detail
                    </div>
                    <div class="col-sm-1">
                        
                    </div>
                </div>
                <div class="row pb-1 text-muted">
                    <div class="col-sm-2">
                        Items
                    </div>
                    <div class="col-sm-1">
                        :
                    </div>
                    <div class="col-sm-9">
                        Rp 100
                    </div>
                </div>
                <div class="row pb-1">
                    <div class="col-sm-2">
                        Total
                    </div>
                    <div class="col-sm-1">
                        :
                    </div>
                </div> --}}
                </div> <!-- card-body.// -->
            </div> <!-- card .// -->


            <br><br>

        </div> <!-- container .//  -->
    </section>
    <!-- ========================= SECTION CONTENT END// ========================= -->
@endsection
@section('script')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        var id = 0;
        const data = {!! $carts !!};
        const base_url_payment = "https://payment.fusi.id/api";
        const base_url_logistic = "https://logistic.fusi.id/api/v1";
        const token_logistic = "1|cs8vicbSK0MKudDhwuYZdk28071jHVMLSMhnhNMy";
        let courier;
        let pay = 0;
        let weight = 0;
        let price =0;
        let items = [];
        window.onload = function() {
            mount();
            province();

        }
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
            $('#province').on('select2:select', function(e) {
                city(e.params.data.id);
            });
            $('#city').on('select2:select', function(e) {
                district(e.params.data.id);
            });
            $('#district').on('select2:select', function(e) {
                courierList();
            });
        });

        function mount() {
            let _totprice = 0;
            let _ppn = 0;
            data.forEach(e => {
                let _price = e.qty * e.product.price_range;
                _totprice = _totprice + _price;
            });
            _ppn = _totprice * (10 / 100);
            pay = _totprice + _ppn;
            $('#total-amount').append('<h5 class="card-title mb-4">Total : Rp ' + pay + '</h5>');
            payment = paymentList();
            getItem();
        }

        function province() {
            $.ajax({
                url: base_url_logistic + '/logistics/province',
                type: 'POST',
                dataType: 'json',
                headers: {
                    "Authorization": 'Bearer ' + token_logistic,
                    "Content-Type": "application/json"
                },
                contentType: 'application/json',
                data: JSON.stringify({}),
                success: function(data) {
                    // console.log(JSON.stringify(data));
                    var result = [{
                        "id": 0,
                        "text": "Select"
                    }];
                    data.forEach(function(item) {
                        result.push({
                            "id": item.id,
                            "text": item.name
                        });
                    });
                    $('#province').empty();
                    $('#city').empty();
                    $('#district').empty();
                    $('#province').select2({
                        data: result
                    });
                }
            });
        }

        function city(id) {
            $.ajax({
                url: base_url_logistic + '/logistics/city',
                type: 'POST',
                dataType: 'json',
                headers: {
                    "Authorization": 'Bearer ' + token_logistic,
                    "Content-Type": "application/json"
                },
                contentType: 'application/json',
                data: JSON.stringify({
                    "province_id": id
                }),
                success: function(data) {
                    // console.log(JSON.stringify(data));
                    var result = [{
                        "id": 0,
                        "text": "Select"
                    }];
                    data.forEach(function(item) {
                        result.push({
                            "id": item.id,
                            "text": item.name
                        });
                    });
                    $('#city').empty();
                    $('#district').empty();
                    $('#city').select2({
                        data: result
                    });
                }
            });
        }

        function district(id) {
            $.ajax({
                url: base_url_logistic + '/logistics/district',
                type: 'POST',
                dataType: 'json',
                headers: {
                    "Authorization": 'Bearer ' + token_logistic,
                    "Content-Type": "application/json"
                },
                contentType: 'application/json',
                data: JSON.stringify({
                    "city_id": id
                }),
                success: function(data) {
                    // console.log(JSON.stringify(data));
                    var result = [{
                        "id": 0,
                        "text": "Select"
                    }];
                    data.forEach(function(item) {
                        result.push({
                            "id": item.id,
                            "text": item.name
                        });
                    });
                    $('#district').empty();
                    $('#district').select2({
                        data: result
                    });
                }
            });
        }

        function courierList() {
            let json = {
                "merchant_code": "fusi",
                "origin": {
                    "province_id": "9",
                    "city_id": "710",
                    "district_id": "768",
                    "lat": "0",
                    "long": "0"
                },
                "destination": {
                    "province_id": $('#province').val(),
                    "city_id": $('#city').val(),
                    "district_id": $('#district').val(),
                    "lat": "0",
                    "long": "0"
                },
                "weight": weight
            }
            let _data;
            $.ajax({
                url: base_url_logistic + "/logistics/checkprice",
                type: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token_logistic
                },
                dataType: 'json',
                data: JSON.stringify(json),
                contentType: 'application/json',
                // CrossDomain: true,
                success: function(data) {
                    console.log(JSON.stringify(data));
                    _data = data.prices;
                    setTimeout(printCourier(_data), 5000);
                },
                error: function(xhr, ajaxOptions,
                    thrownError) { //Add these parameters to display the required response
                    alert("Something Wrong");
                }
            });
        }

        function printCourier(data) {
            const _instant = data.instant;
            const _nextday = data.next_day;
            const _sameday = data.same_day;
            const _regular = data.regular;
            const _cargo = data.cargo;
            if (_instant.length == 0) {
                $(".instant").append("Tidak Tersedia");
            } else {
                _instant.forEach(function(e) {
                    price = e.price;
                    if (e.logistic_code == "amanah") {
                        if (weight <= 2) {
                            console.log('kurang 2kg');
                        } else {
                            console.log((weight / 2) - 1);
                            price = parseInt(e.price) + (Math.ceil(weight / 2) - 1) * 4000;
                        }
                    }
                    console.log(e.logistic_code)
                    const _html = '<button type="button" onClick="setCourier(\'' + e.logistic_code + '\', \'' + price + '\',\'' + e.service_code + '\')" class="list-group-item list-group-item-action">' +
                        e.logistic_code + ' - Rp ' + price + '</button>';
                    $(".instant").append(_html);
                });
            }

            if (_sameday == null) {
                $(".sameday").append("Tidak Tersedia");
            } else {
                _sameday.forEach(function(e) {
                    console.log(e.logistic_code)
                    const _html = '<button type="button" onClick="setCourier(\'' + e.logistic_code + '\', \'' + e
                        .price + '\',\'' + e.service_code + '\')" class="list-group-item list-group-item-action">' +
                        e.logistic_code + ' - Rp ' + e.price + '</button>';
                    $(".sameday").append(_html);
                });
            }

            if (_nextday == null) {
                $(".nextday").append("Tidak Tersedia");
            } else {
                _nextday.forEach(function(e) {
                    console.log(e.logistic_code)
                    const _html = '<button type="button" onClick="setCourier(\'' + e.logistic_code + '\', \'' + e
                        .price + '\',\'' + e.service_code + '\')" class="list-group-item list-group-item-action">' +
                        e.logistic_code + ' - Rp ' + e.price + '</button>';
                    $(".nextday").append(_html);
                });
            }

            if (_regular == null) {
                $(".regular").append("Tidak Tersedia");
            } else {
                _regular.forEach(function(e) {
                    console.log(e.logistic_code)
                    const _html = '<button type="button" onClick="setCourier(\'' + e.logistic_code + '\', \'' + e
                        .price + '\',\'' + e.service_code + '\')" class="list-group-item list-group-item-action">' +
                        e.logistic_code + ' - Rp ' + e.price + '</button>';
                    $(".regular").append(_html);
                });
            }

            if (_cargo == null) {
                $(".cargo").append("Tidak Tersedia");
            } else {
                _cargo.forEach(function(e) {
                    console.log(e.logistic_code)
                    const _html = '<button type="button" onClick="setCourier(\'' + e.logistic_code + '\', \'' + e
                        .price + '\',\'' + e.service_code + '\')" class="list-group-item list-group-item-action">' +
                        e.logistic_code + ' - Rp ' + e.price + '</button>';
                    $(".cargo").append(_html);
                });
            }
        }

        function validation() {
            if ($("#fname").val() == "") {
                $("#fname").focus();
            } else if ($("#email").val() == "") {
                $("#email").focus();
            } else if ($("#phone").val() == "") {
                $("#phone").focus();
            } else if ($("#country").val() == "") {
                $("#country").focus();
            } else if ($("#city").val() == "") {
                $("#city").focus();
            } else if ($("#address").val() == "") {
                $("#address").focus();
            } else if ($('input[name="payment-channel"]:checked').length == 0) {
                alert("Choose payment channel");
            } else {
                return true;
            }
        }

        function paymentList() {
            let _data;
            $.ajax({
                url: base_url_payment + "/list",
                type: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer 1|l5aAPLuhr2QhhYxJkd48MHcUGX4N97EW77AtzsbK'
                },
                dataType: 'json',
                data: JSON.stringify({
                    "merchant_code": "fusi"
                }),
                processData: false,
                contentType: 'application/json',
                CrossDomain: true,
                async: false,
                success: function(data) {
                    _data = data.list;
                },
                error: function(xhr, ajaxOptions,
                    thrownError) { //Add these parameters to display the required response
                    alert("Something Wrong");
                }
            });
            _data.forEach(function(e) {
                let _html =
                    '<div class="form-group col-sm-4"><label class="js-check box"><img width="100px" src="' + e
                    .image_url + '"><input type="radio" name="payment-channel" id="payment-channel" value="' +
                    e.channel + '"> <h6 class="title">' + e.name + '</h6> </label> </div>';
                $("#payment-list").append(_html);
            });
        }

        function createOrder() {
            if (validation()) {
                $("#confirm").append(
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                $("#confirm").prop('disabled', true);
                let _jsonBody = {
                    "fname": $("#fname").val(),
                    "lname": $("#lname").val(),
                    "email": $("#email").val(),
                    "phone": $("#phone").val(),
                    "province": $("#province").val(),
                    "city": $("#city").val(),
                    "district": $("#district").val(),
                    "address": $("#address").val(),
                    "payment_channel": $('input[name="payment-channel"]:checked').val(),
                    "amount": parseInt(price) + parseInt(courier.price),
                    "logistic_code": courier.logistic_code,
                    "service_code": courier.service_code,
                    "logistic_price": courier.price,
                    "items":items
                };
                $.ajax({
                    headers: {
                        'x-csrf-token': '{!! csrf_token() !!}'
                    },
                    method: 'POST',
                    url: "orders",
                    data: _jsonBody,
                    success: function(e) {
                        window.location = "orders/" + e
                    }
                });
            }

        }

        function setCourier(logistic_code, _price, service_code) {

            courier = {
                "logistic_code": logistic_code,
                "service_code": service_code,
                "price": _price
            };
            _pay = parseInt(pay) + parseInt(_price);
            price = _pay;
            $('#total-amount').empty();
            $('#total-amount').append('<h5 class="card-title mb-4">Total : Rp ' + _pay + '</h5>');
        }

        function getItem() {
            data.forEach(function(e) {
                let data = {
                    "qty": e.qty,
                    "weight": (e.qty * e.product.weight) / 1000,
                    "desc": e.product.description,
                    "amount": e.qty * e.product.price_range
                };
                items.push(data);
                weight = weight + ((e.qty * e.product.weight) / 1000);
                console.log(weight);
            });
        }
    </script>
@endsection