@extends('app.app')
@section('title')
    User Client
@endsection
@section('customcss')
    <link rel="stylesheet" href="{{ asset('assets/vendor/Tiny-Vertical-Timeline-Plugin-with-jQuery-jQuery-UI/src/jquery.timeline.css') }}">
@endsection

@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="row">
                <div class="col-sm-6" id="">
                    <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">Detail Pesanan</p>
                                </div>
                                <div class="col text-end">
                                    <button class="btn btn-secondary btn-sm" onclick="location.href='{{ route('view_user_client_transaction') }}'">Kembali</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row d-flex align-items-center">
                                {{-- <div class="row"> --}}
                                <div class="col-sm-5 mb-3">
                                    <div class="row">
                                        <div class="col-sm-12 col-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran</p>
                                        </div>
                                        <div class="col-sm-12 col-6 mb-3">
                                            <label for="" class="form-label">Tanggal Penjemputan</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    <p class="mb-0"><span id="view-pickup_date_at"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-6 mb-3">
                                            <label for="" class="form-label">Waktu Penjemputan</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    <p class="mb-0"><span id="view-pickup_time_at"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-2"></div>
                                <div class="col-sm-5 mb-3">
                                    <div class="row">
                                        <div class="col-sm-12 col-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Layanan Yang Dipilih</p>
                                        </div>
                                        <div class="col-sm-12 col-6 mb-3">
                                            <label for="" class="form-label">Durasi Pengantaran & Estimasi Harga</label>
                                            <div class="card bg-light border mb-0 w-100">
                                                <div class="card-body d-flex justify-content-between">
                                                    <p class="mb-0">{{ $order->lead_time }} Hari</p>
                                                    <div class="d-flex flex-column">
                                                        <p class="mb-0">Rp{{ number_format($order->price, 0, ',', '.') }}
                                                            {{-- <div>
                                                                <small class="text-muted">Harga diatas merupakan estimasi</small>
                                                            </div> --}}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-6 mb-3">
                                            <label for="" class="form-label">Tipe Kendaraan</label>
                                            <div class="card bg-light border mb-0 w-100">
                                                <div class="card-body d-flex justify-content-between">
                                                    {{-- <p class="mb-0">{{ $order->prefer_truck_type_name }}</p> --}}
                                                    <p class="mb-0">{{ $order->vhc_type_name }}</p>
                                                </div>
                                            </div>
                                        </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">Lokasi Penjemputan</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">Lokasi Pengantaran</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>
                            @foreach ($adtPoints as $i => $p)
                                <div class="row d-flex align-items-center">
                                    <div class="col-12 mb-3">
                                        <p class="text-danger text-bold mb-0">Infomasi Penjemputan dan Pengantaran Lainnya ({{ $i + 2 }})</p>
                                    </div>
                                    <div class="col-5 mb-3">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <label for="" class="form-label">Tanggal Penjemputan</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0"><span id="view-pickup_date_at{{ $i + 1 }}"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <label for="" class="form-label">Waktu Penjemputan</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        <p class="mb-0"><span id="view-pickup_time_at{{ $i + 1 }}"></span></p>
                                                    </div>
                                                </div>
                                            </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">Lokasi Penjemputan</label>
                                        <div class="card bg-light border mb-0">
                                            <div class="card-body">
                                                <p class="text-bold mb-2">{{ $p->pck_name }}</p>
                                                <p class="mb-0">{{ $p->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">Lokasi Pengantaran</label>
                                        <div class="card bg-light border mb-0">
                                            <div class="card-body">
                                                <p class="text-bold mb-2">{{ $p->drop_name }}</p>
                                                <p class="mb-0">{{ $p->drop_addr }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            {{-- <div class="row d-flex align-items-center">
                                <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Package list</p>
                                </div>
                                <div class="col-sm-12 mb-3">
                                    <div class="d-flex align-items-center mb-3">
                                        <p class="mb-0 text-success me-4">package-list.xlsx</p>
                                        <button id="btnDownloadPacking" class="btn btn-sm btn-info"
                                            data-ord_id="{{ $order->ord_id }}">Download</button>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="row d-flex align-items-center">
                                {{-- <div class="col-12 mb-3">
                                    <p class="text-danger text-bold mb-0">Service Choosed</p>
                                </div>
                                <div class="col-sm-5 mb-0 d-flex align-items-center mb-3">
                                    <div class="card bg-light border mb-0 w-100">
                                        <div class="card-body">
                                            <p class="text-bold mb-2">{{ $order->lead_time }} Day</p>
                                            <p class="text-bold">Rp{{ number_format($order->price, 0, ',', '.') }}
                                            </p>
                                            @if ($order->is_fix_price === \App\Models\Orders::IS_FIX_PRICE_YES)
                                                <p class="mb-0"><em><span>The price has been confirm by
                                                            admin</span></em></p>
                                                <small><em id="view-fix_price_at">Feb 23, 2022 17:52:20</em></small>
                                            @else
                                                <p class="mb-0"><em><span>The price not confirmed yet by
                                                            admin</span></em></p>
                                            @endif
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="col-12 mb-3">
                                    <label for="" class="form-label">Order Status</label>
                                    @if (\App\Models\Orders::STTS_WAIT == $order->status)
                                        {{-- <span class="badge bg-warning text-dark">Menunggu Konfirmasi</span> --}}
                                        <input type="text" class="form-control" value="Menunggu Konfirmasi" readonly>
                                    @elseif (\App\Models\Orders::STTS_CONFIRM == $order->status)
                                        {{-- <span class="badge bg-warning text-dark">Mencari Kendaraan</span> --}}
                                        <input type="text" class="form-control" value="Mencari Kendaraan" readonly>
                                    @elseif (\App\Models\Orders::STTS_HAVE_GET_VHC == $order->status)
                                        {{-- <span class="badge bg-warning text-dark">Kendaraan Menuju Lokasi Penjemputan</span> --}}
                                        <input type="text" class="form-control" value="Kendaraan Menuju Lokasi Penjemputan" readonly>
                                    @elseif (\App\Models\Orders::STTS_PCK == $order->status)
                                        {{-- <span class="badge bg-warning text-dark">Pick Up</span> --}}
                                        <input type="text" class="form-control" value="Berhasil Mengambil Pesanan" readonly>
                                    @elseif (\App\Models\Orders::STTS_GO == $order->status)
                                        {{-- <span class="badge bg-info text-dark">Going</span> --}}
                                        <input type="text" class="form-control" value="Menuju Lokasi Pengantaran" readonly>
                                    @elseif (\App\Models\Orders::STTS_ARV == $order->status)
                                        {{-- <span class="badge bg-info text-dark">Arrived</span> --}}
                                        <input type="text" class="form-control" value="Tiba Dilokasi Pengantaran" readonly>
                                    @elseif (\App\Models\Orders::STTS_DROP == $order->status)
                                        {{-- <span class="badge bg-warning text-dark">Drop</span> --}}
                                        <input type="text" class="form-control" value="Selesai Melakukan Pengantaran" readonly>
                                    @elseif (\App\Models\Orders::STTS_CLIENT_PAY == $order->status)
                                        {{-- <span class="badge bg-danger text-light">Close</span> --}}
                                        <input type="text" class="form-control" value="Selesai" readonly>
                                    @elseif (\App\Models\Orders::STTS_VENDOR_PAYED == $order->status)
                                        {{-- <span class="badge bg-danger text-light">Close</span> --}}
                                        <input type="text" class="form-control" value="Selesai" readonly>
                                    @elseif (\App\Models\Orders::STTS_CLOSE == $order->status)
                                        {{-- <span class="badge bg-danger text-light">Close</span> --}}
                                        <input type="text" class="form-control" value="Selesai" readonly>
                                    @elseif (\App\Models\Orders::STTS_CANCEL == $order->status)
                                        {{-- <span class="badge bg-danger text-light">Cancel</span> --}}
                                        <input type="text" class="form-control" value="Dibatalkan" readonly>
                                    @else
                                        {{-- <span class="badge bg-secondary text-white">Unknown</span> --}}
                                        <input type="text" class="form-control" value="-" readonly>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <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">Order History</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="order-timeline"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="{{ asset('assets/vendor/Tiny-Vertical-Timeline-Plugin-with-jQuery-jQuery-UI/src/jquery.timeline.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.2/xlsx.full.min.js" integrity="sha512-oCjkwxjURabnte5K4Zeoc+hZ/G5pQE7GI4DYl+0wl6WaJIkBjb9FvUIaMU3lOPoBMSRZZ7QrczpGQoBFAKKB1Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        // $("#order-timeline").timeline({
        //     data: [{
        //         time: new Date("2022-02-22 12:33:00"),
        //         color: '#555',
        //         css: 'success',
        //         content: 'Order place'
        //     }, {
        //         time: new Date("2022-02-22 12:35:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Order confirmed by admin'
        //     }, {
        //         time: new Date("2022-02-22 12:36:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Searching for Vehicle'
        //     }, {
        //         time: new Date("2022-02-22 12:50:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Vehicle assigned'
        //     }, {
        //         time: new Date("2022-02-22 17:20:00"),
        //         color: '#00ff00',
        //         css: 'success',
        //         content: 'Vehicle arrives at the pickup zone'
        //     }, {
        //         time: new Date("2022-02-22 17:50:00"),
        //         color: '#000',
        //         css: 'success',
        //         content: 'Confirm pakcage information by Checker'
        //     }, {
        //         time: new Date("2022-02-22 18:10:00"),
        //         color: '#000',
        //         css: 'success',
        //         content: 'Vehicle leaving pickup zone'
        //     }]
        // });
    </script>
    <script>
        'use strict'

        const State = {
            set_pck_at: "{{ $order->set_pck_at }}",
            fix_price_at: "{{ $order->fix_price_at }}",
            order_place_at: "{{ $order->crt }}",
            order_confirm_at: "{{ $order->confirm_at }}",
            searching_vhc_at: "{{ $order->find_vhc_at }}",
            vhc_assign_at: "{{ $order->vdr_respond_at }}",
            pck_vhc_arrived_at: "{{ $order->pck_enter_at }}",
            pck_chk_at: "{{ $order->pck_chk_at }}",
            pck_vhc_leave_at: "{{ $order->pck_leave_at }}",
            accident_at: "{{ $order->ord_acdnt_crt_at }}",
            drop_vhc_arrived_at: "{{ $order->drop_enter_at }}",
            drop_chk_at: "{{ $order->drop_chk_at }}",
            drop_vhc_leave_at: "{{ $order->drop_leave_at }}",
            // invc_to_client_at: "{{-- $order->invc_to_client_at --}}",
            // confirm_client_pay_at: "{{-- $order->confirm_client_pay_at --}}",
            // payout_to_vdr_at: "{{-- $order->payout_to_vdr_at --}}",
            // confirm_vdr_pay_at: "{{-- $order->confirm_vdr_pay_at --}}",
            adtPoints: JSON.parse('{!! $adtPointsJson !!}'),
        };

        const Wrapper = {
            activate: function() {
                Wrapper.event();
                OrdView.activate();
            },
            event: function() {
                $('#view-pickup_at').text(moment.unix(State.set_pck_at).format('DD MMM YYYY HH:mm:ss'));
                $('#view-pickup_date_at').text(moment.unix(State.set_pck_at).format('DD MMM YYYY'));
                $('#view-pickup_time_at').text(moment.unix(State.set_pck_at).format('HH:mm:ss'));
                $('#view-fix_price_at').text(moment.unix(State.fix_price_at).format('DD MMM YYYY HH:mm:ss'));
            },
        };

        const OrdView = {
            activate: function() {
                OrdView.event();
                OrdView.showOrderTimeline();
                OrdView.initDateAdtPoints();
            },
            event: function() {
                $('#btnDownloadPacking').on('click', async function(e) {
                    let click = $(e.target);
                    let ord_id = click.data('ord_id');
                    let packing_list = await OrdView.reqPackingList({
                        ord_id
                    });
                    if (packing_list.type != 'success') {
                        return false;
                    }
                    let package_list = packing_list.resp.data;
                    let download_package_list = package_list.map((row) => {
                        return {
                            'Item Code': row.item_code,
                            'Description': row.desc,
                            'Weight (kg)': row.weight,
                            'Qty': row.qty,
                            'Length (m)': row.length,
                            'Wide (m)': row.wide,
                            'Height (m)': row.height,
                            'Volume (m3)': row.volume,
                        };
                    });
                    downloadPackingList('package-list.xlsx', 'template_packing_list',
                        download_package_list);
                });
            },
            reqPackingList: function(params) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('api_user_client_download_package_list', '') }}/" + params
                            .ord_id,
                        method: 'GET',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                        },
                        data: params,
                        success: (data, textStatus, jqXHR) => {
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            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'
                            });
                        }
                    })
                });
            },
            showOrderTimeline: function() {
                // https://github.com/yehiasalam/jquery.timeline
                let timelines = [];
                if (!isNaN(Number(State.order_place_at)) && State.order_place_at != '0' && State.order_place_at != '') {
                    timelines.push({
                        time: new Date(Number(State.order_place_at * 1000)),
                        color: '#555',
                        css: 'success',
                        content: 'Melakukan Pemesanan'
                    });
                }
                if (!isNaN(Number(State.order_confirm_at)) && State.order_confirm_at != '0' && State.order_confirm_at != '') {
                    timelines.push({
                        time: new Date(Number(State.order_confirm_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Pesanan dikonfirmasi oleh admin'
                    });
                }
                if (!isNaN(Number(State.searching_vhc_at)) && State.searching_vhc_at != '0' && State.searching_vhc_at != '') {
                    timelines.push({
                        time: new Date(Number(State.searching_vhc_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Mencari Kendaraan'
                    });
                }
                if (!isNaN(Number(State.vhc_assign_at)) && State.vhc_assign_at != '0' && State.vhc_assign_at != '') {
                    timelines.push({
                        time: new Date(Number(State.vhc_assign_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Menugaskan Kendaraan'
                    });
                }
                if (!isNaN(Number(State.pck_vhc_arrived_at)) && State.pck_vhc_arrived_at != '0' && State.pck_vhc_arrived_at != '') {
                    timelines.push({
                        time: new Date(Number(State.pck_vhc_arrived_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Kendaraan Tiba Dilokasi Penjemputan'
                    });
                }
                if (!isNaN(Number(State.pck_chk_at)) && State.pck_chk_at != '0' && State.pck_chk_at != '') {
                    timelines.push({
                        time: new Date(Number(State.pck_chk_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Pengiriman Dikonfimasi Oleh Checker'
                    });
                }
                if (!isNaN(Number(State.pck_vhc_leave_at)) && State.pck_vhc_leave_at != '0' && State.pck_vhc_leave_at != '') {
                    timelines.push({
                        time: new Date(Number(State.pck_vhc_leave_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Kendaraan Meninggalkan Lokasi Penjemputan'
                    });
                }
                if (!isNaN(Number(State.accident_at)) && State.accident_at != '0' && State
                    .accident_at != '') {
                    timelines.push({
                        time: new Date(Number(State.accident_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Vehicle accident'
                    });
                }
                if (!isNaN(Number(State.drop_vhc_arrived_at)) && State.drop_vhc_arrived_at != '0' && State.drop_vhc_arrived_at != '') {
                    timelines.push({
                        time: new Date(Number(State.drop_vhc_arrived_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Kendaraan Tiba Dilokasi Pengantaran'
                    });
                }
                if (!isNaN(Number(State.drop_chk_at)) && State.drop_chk_at != '0' && State.drop_chk_at != '') {
                    timelines.push({
                        time: new Date(Number(State.drop_chk_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Pengiriman Dikonfimasi Oleh Checker'
                    });
                }
                if (!isNaN(Number(State.drop_vhc_leave_at)) && State.drop_vhc_leave_at != '0' && State.drop_vhc_leave_at != '') {
                    timelines.push({
                        time: new Date(Number(State.drop_vhc_leave_at * 1000)),
                        color: '#00ff00',
                        css: 'success',
                        content: 'Kendaraan Meninggalkan Lokasi Pengiriman'
                    });
                }
                // if (!isNaN(Number(State.invc_to_client_at)) && State.invc_to_client_at != '0' && State.invc_to_client_at != '') {
                //     timelines.push({
                //         time: new Date(Number(State.invc_to_client_at * 1000)),
                //         color: '#00ff00',
                //         css: 'success',
                //         content: 'Generate Invoice to Client'
                //     });
                // }
                // if (!isNaN(Number(State.confirm_client_pay_at)) && State.confirm_client_pay_at != '0' && State.confirm_client_pay_at != '') {
                //     timelines.push({
                //         time: new Date(Number(State.confirm_client_pay_at * 1000)),
                //         color: '#00ff00',
                //         css: 'success',
                //         content: 'Confirm Client Payment'
                //     });
                // }
                // if (!isNaN(Number(State.payout_to_vdr_at)) && State.payout_to_vdr_at != '0' && State.payout_to_vdr_at != '') {
                //     timelines.push({
                //         time: new Date(Number(State.payout_to_vdr_at * 1000)),
                //         color: '#00ff00',
                //         css: 'success',
                //         content: 'Generate Instruction at'
                //     });
                // }
                // if (!isNaN(Number(State.confirm_vdr_pay_at)) && State.confirm_vdr_pay_at != '0' && State.confirm_vdr_pay_at != '') {
                //     timelines.push({
                //         time: new Date(Number(State.confirm_vdr_pay_at * 1000)),
                //         color: '#00ff00',
                //         css: 'success',
                //         content: 'Confirm Payout at'
                //     });
                // }
                $("#order-timeline").timeline({
                    data: timelines,
                });
            },
            initDateAdtPoints: function() {
                for (let iAdtPoint in State.adtPoints) {
                    iAdtPoint = Number(iAdtPoint);
                    $(`#view-pickup_date_at${iAdtPoint+1}`).text(moment.unix(State.adtPoints[iAdtPoint].set_pck_at).format('DD MMM YYYY'));
                    $(`#view-pickup_time_at${iAdtPoint+1}`).text(moment.unix(State.adtPoints[iAdtPoint].set_pck_at).format('HH:mm:ss'));
                }
            },
        };

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