@extends('app.app')
@section('title')
    User Client
@endsection
@section('customcss')
@endsection

@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col">
                                    <p class="card-title text-bold mb-0">New Order</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Pick up and Drop</p>
                                </div>
                                <div class="col-5 mb-3">
                                    <label for="" class="form-label">Pickup Time</label>
                                    <div class="card bg-light border mb-0">
                                        <div class="card-body">
                                            <p class="mb-0"><span id="view-pickup_at"></span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3 d-flex align-items-center">
                                <div class="col-5 mb-3">
                                    <label for="" class="form-label">Pickup Zone</label>
                                    <div class="card bg-light border mb-0">
                                        <div class="card-body">
                                            {{-- <p class="text-bold mb-2">Gudang Pluit SiCepat (Jakarta)</p> --}}
                                            <p class="text-bold mb-2">{{ $order->pck_name }}</p>
                                            {{-- <p class="mb-0">Jl. Pluit Karang Karya 2 No.33, RT.7/RW.16, Pejagalan, Kec. Penjaringan, Kota Jkt Utara, Daerah Khusus Ibukota Jakarta 14440</p> --}}
                                            <p class="mb-0">{{ $order->pck_addr }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2 text-center">
                                    <label for="" class="form-label mb-0 mt-0">&nbsp;</label>
                                    {{-- <p class="mb-0">to</p> --}}
                                    <span class="ion-arrow-right-c text-danger" style="font-size: 15px"></span>
                                </div>
                                <div class="col-5 mb-3">
                                    <label for="" class="form-label">Drop Zone</label>
                                    <div class="card bg-light border mb-0">
                                        <div class="card-body">
                                            {{-- <p class="text-bold mb-2">Kantor Pusat SiCepat (yogyakarta)</p> --}}
                                            <p class="text-bold mb-2">{{ $order->drop_name }}</p>
                                            {{-- <p class="mb-0">Jl. Prof. Herman Yohanes No.989, Terban, Gondokusuman, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55223, Indonesia</p> --}}
                                            <p class="mb-0">{{ $order->drop_addr }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row d-flex align-items-center mb-3">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Package Infomation</p>
                                </div>
                                <label for="" class="form-label">Description</label>
                                @if ($order->weight != 0)
                                    <div class="col-sm-4 mb-0 d-flex align-items-center">
                                        <div class="card bg-light border mb-0 w-100">
                                            <div class="card-body">
                                                <p class="text-bold mb-2">Weight</p>
                                                <p class="mb-0">{{ $order->weight }} Kg</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if ($order->cbm != 0)
                                    <div class="col-sm-4 mb-0 d-flex align-items-center">
                                        <div class="card bg-light border mb-0 w-100">
                                            <div class="card-body">
                                                <p class="text-bold mb-2">Volume</p>
                                                <p class="mb-0">{{ $order->cbm }} m&sup3;</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if ($order->koli != 0)
                                    <div class="col-sm-4 mb-0 d-flex align-items-center">
                                        <div class="card bg-light border mb-0 w-100">
                                            <div class="card-body">
                                                <p class="text-bold mb-2">Koli</p>
                                                <p class="mb-0">{{ $order->koli }} Pcs</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Service Information</p>
                                    <small>It's about lead time, the maximum delivery time should be faster than
                                        request</small>
                                </div>
                                <div class="col-sm-5">
                                    <div class="row mb-3">
                                        <div class="col-12 mb-3">
                                            <label for="" class="form-label">Durasi Pengantaran</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    <p class="text-bold mb-2">{{ $order->lead_time }} Day</p>
                                                    <p class="mb-0">
                                                        {{-- <em>
                                                            You must be able to deliver the package no later than Feb 03,
                                                            2022 23:59:00
                                                        </em> --}}
                                                        <em>
                                                            You must be able to deliver the package no later than <span
                                                                id="view-max_lead_time"></span>
                                                        </em>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            @if ($order->is_want != \App\Models\OrdersVendors::IS_WANT_YES)
                                <div id="group_want_order" class="row d-flex align-items-center">
                                    <div class="col-8">
                                        <p class="mb-0">
                                            Would you like to take this order?
                                        </p>
                                    </div>
                                    <div class="col-4 text-end">
                                        <button class="btn btn-warning btn-block btn-sm" id="btnCalculate">Yes, I
                                            want</button>
                                        <div id="group_btnCalculateSpinner" class="d-none">
                                            <div class="spinner-border" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div id="group_exp_dur"
                                class="row d-flex align-items-center {{ $order->is_want != \App\Models\OrdersVendors::IS_WANT_YES ? 'd-none' : '' }}">
                                <div class="col-12">
                                    <p class="mb-0">
                                        If you not take the order till <span id="exp_dur">-</span>. This order will be
                                        canceled
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 {{ $order->is_want != \App\Models\OrdersVendors::IS_WANT_YES ? 'd-none' : '' }}"
                    id="checkOutView">
                    <div class="card">
                        <div class="card-header">
                            <div class="row d-flex align-items-center">
                                <div class="col">
                                    <p class="card-title text-bold mb-0">Take the Order</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row mb-3 d-flex align-items-top">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Fleet and Driver</p>
                                </div>
                                <div class="col-sm-5 mb-3">
                                    <label for="checkout-vehicle" class="form-label">Select Vehicle</label>
                                    <select name="checkout-vehicle" id="checkout-vehicle" class="form-control select2">
                                        <option value="" selected disabled>No Vehicle selected</option>
                                        {{-- <option value="">B 1237 XYZ</option>
                                        <option value="">B 9892 XDA</option> --}}
                                        @foreach ($vehicles as $k => $v)
                                            <option value="{{ $v->id }}">
                                                {{ $v->nopol1 . ' ' . $v->nopol2 . ' ' . $v->nopol3 }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-2"></div>
                                <div class="col-sm-5 mb-3">
                                    <label for="checkout-driver" class="form-label">Select Driver</label>
                                    <select name="checkout-driver" id="checkout-driver" class="form-control select2">
                                        <option value="" selected disabled>No Driver selected</option>
                                        {{-- <option value="">Anwar Lutfi Yuliana</option>
                                        <option value="">Mansur Iman Darma</option>
                                        <option value="">Putra Ismail Daud</option>
                                        <option value="">Ridwan Buana Iskandar</option> --}}
                                        @foreach ($drivers as $k => $v)
                                            <option value="{{ $v->id }}">
                                                {{ $v->fullname . ' (+' . $v->phone_code . ' ' . implode(' ', str_split($v->phone, 4)) . ')' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row d-flex align-items-center">
                                <div class="col-8">
                                    <p class="mb-0">
                                        Have you double-checked the Fleet and Driver information?
                                    </p>
                                    <div class="form-check">
                                        <input class="form-check-input" name="agree" type="checkbox" value=""
                                            id="flexCheckDefault">
                                        <label class="form-check-label text-danger" for="flexCheckDefault">
                                            I agree with the lead time rules from Bonceng
                                        </label>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    {{-- <button class="btn btn-danger btn-block btn-sm" id="btnOrder"
                                        onclick="location.href='{{ route('view_user_vendor_transaction') }}'"
                                        disabled>Order now</button> --}}
                                    <button class="btn btn-danger btn-block btn-sm" id="btnOrder" disabled>Order
                                        now</button>
                                    <div id="group_btnOrderSpinner" class="d-none">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <script>
        'use strict'

        const State = {
            ord_id: "{{ $order->ord_id }}",
            crt: "{{ $order->crt }}",
            set_pck_at: "{{ $order->set_pck_at }}",
            lead_time: "{{ $order->lead_time }}",
            exp_dur: "{{ $order->vdr_exp_at }}",
            url_list_trx: "{{ route('view_user_vendor_transaction') }}",
        };

        const Wrapper = {
            activate: function() {
                Wrapper.event();
                OrdConfirm.activate();
            },
            event: function() {
                $('#view-pickup_at').text(moment.unix(State.set_pck_at).format('DD MMM YYYY HH:mm:ss'));
                $('#view-max_lead_time').text(moment.unix(State.crt).add(State.lead_time, 'day').format(
                    'DD MMM YYYY HH:mm:ss'));
                $('#exp_dur').text(moment.unix(State.exp_dur).format('DD MMM YYYY HH:mm:ss'));
            },
        };

        const OrdConfirm = {
            activate: function() {
                OrdConfirm.event();
            },
            event: function() {
                $('#btnCalculate').on('click', function() {
                    let data = {};
                    data.ord_id = State.ord_id;
                    OrdConfirm.wantThisOrder(data);
                });

                $('input[name=agree]').on('click', function() {
                    if ($(this).is(':checked')) {
                        $('#btnOrder').prop("disabled", false);
                    } else {
                        $('#btnOrder').prop("disabled", true);
                    }
                });

                $('#btnOrder').on('click', async function() {
                    let data = OrdConfirm.getData();
                    let isValid = OrdConfirm.checkData(data, true);
                    if (!isValid) {
                        return false;
                    }
                    OrdConfirm.submit(data);
                });
            },
            getData: function() {
                let data = {};

                data.ord_id = State.ord_id;
                data.vehicle = $('#checkout-vehicle').val();
                data.driver = $('#checkout-driver').val();
                data.aggree = $('#flexCheckDefault').prop('checked');

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (!data.vehicle) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Vehicle not selected');
                    return false;
                }
                if (!data.driver) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Driver not selected');
                    return false;
                }
                if (!data.aggree) {
                    if (isAlert) Helper.toast('Warning', 'just now',
                        'Have you double-checked the Fleet and Driver information?');
                    return false;
                }
                return true;
            },
            submit: function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnOrder').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnOrder').attr('disabed', true);
                    OrdConfirm.toggleBtnSpinner(1);
                    $.ajax({
                        url: "{{ route('api_user_vendor_accept_order_v1') }}/",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data: data,
                        success: (data, textStatus, jqXHR) => {
                            $('#btnOrder').removeAttr('disabed');
                            OrdConfirm.toggleBtnSpinner(0);
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            window.location.href = State.url_list_trx;
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnOrder').removeAttr('disabed');
                            OrdConfirm.toggleBtnSpinner(0);
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                });
            },
            toggleBtnSpinner: function(isShow = 1) {
                if (isShow) {
                    $('#btnOrder').addClass('d-none');
                    $('#group_btnOrderSpinner').removeClass('d-none');
                } else {
                    $('#btnOrder').removeClass('d-none');
                    $('#group_btnOrderSpinner').addClass('d-none');
                }
            },
            wantThisOrder: function(data) {
                function toogleBtnSpinner(isShow = 1) {
                    if (isShow) {
                        $('#btnCalculate').addClass('d-none');
                        $('#group_btnCalculateSpinner').removeClass('d-none');
                    } else {
                        $('#btnCalculate').removeClass('d-none');
                        $('#group_btnCalculateSpinner').addClass('d-none');
                    }
                }

                return new Promise((resolve, reject) => {
                    if (typeof $('#btnCalculate').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnCalculate').attr('disabed', true);
                    toogleBtnSpinner(1);
                    $.ajax({
                        url: "{{ route('api_user_vendor_want_this_order_v1') }}/",
                        method: 'POST',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data: data,
                        success: (data, textStatus, jqXHR) => {
                            $('#btnCalculate').removeAttr('disabed');
                            toogleBtnSpinner(0);
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                            $('#checkOutView').removeClass('d-none');
                            $('#checkOutView').addClass('d-block');
                            $('#group_want_order').addClass('d-none');
                            $('#exp_dur').text(moment().add(10, 'minute').format('DD MMM YYYY HH:mm:ss'));
                            $('#group_exp_dur').removeClass('d-none');
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnCalculate').removeAttr('disabed');
                            toogleBtnSpinner(0);
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                });
            },
        };

        Wrapper.activate();
    </script>
@endsection