@extends('app.app')
@section('title')
    User Vendor
@endsection
@section('customcss')
@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
                                        @foreach ($orders as $iOrd => $order)
                                            #{{ $order->code }}
                                            @if (count($orders) !== ((int) $iOrd) + 1)
                                                ,
                                            @endif
                                        @endforeach
                                    </p>
                                </div>
                                <div class="col text-end">
                                    <button class="btn btn-secondary btn-sm" onclick="location.href='{{ route('view_user_vendor_transaction') }}'">Kembali</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            {{-- <div class="row">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-5 mb-3">
                                            <p class="text-danger text-bold mb-0">Layanan Yang Dipilih</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <label for="" class="form-label">Durasi Pengantaran & Harga</label>
                                        </div>
                                        <div class="col-5 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 mb-0">
                                                        Rp{{ number_format($order->buy_price, 0, ',', '.') }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            @php
                                $startNoLainnya = 1;
                            @endphp
                            @foreach ($orders as $iOrd => $order)
                                @php
                                    ++$startNoLainnya;
                                @endphp
                                <div class="row">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="text-danger text-bold mb-0">Penjemputan dan Pengantaran Utama ({{ $iOrd + 1 }})</p>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-sm-5 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{{ $iOrd }}-pickup_date_at"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-5 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{{ $iOrd }}-pickup_time_at"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="row mb-3 d-flex align-items-center"> --}}
                                <div class="row mb-3 d-flex">
                                    <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">{{ $order->pck_name }}</p>
                                                <p class="mb-0">{{ $order->pck_addr }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-2 text-center d-flex align-items-center justify-content-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>
                            @endforeach
                            @foreach ($orders as $iOrd => $order)
                                @foreach ($order->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 ({{ $iOrd + $i + $startNoLainnya }})</p>
                                        </div>
                                    </div>
                                    <div class="row mb-3 d-flex">
                                        <div class="col-5 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{{ $iOrd }}-pickup_date_at{{ $i + 1 }}"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2"></div>
                                        <div class="col-5 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{{ $iOrd }}-pickup_time_at{{ $i + 1 }}"></span></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-3 d-flex">
                                        <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 d-flex justify-content-center align-items-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
                            @endforeach
                            <div class="row">
                                <div class="col-sm-5">
                                    {{-- <div class="row d-flex align-items-center mb-3">
                                        <div class="col-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Informasi Pengiriman</p>
                                        </div>
                                        @if ($order->weight != 0)
                                            <div class="col-sm-12 mb-3">
                                                <label for="" class="form-label">Berat</label>
                                                <div class="card bg-light border mb-0 w-100">
                                                    <div class="card-body">
                                                        <p class="mb-0">{{ $order->weight }} Kg</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if ($order->cbm != 0)
                                            <div class="col-sm-12 mb-3">
                                                <label for="" class="form-label">Volume</label>
                                                <div class="card bg-light border mb-0 w-100">
                                                    <div class="card-body">
                                                        <p class="mb-0">{{ $order->cbm }} m&sup3;</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if ($order->koli != 0)
                                            <div class="col-sm-12 mb-3">
                                                <label for="" class="form-label">Koli</label>
                                                <div class="card bg-light border mb-0 w-100">
                                                    <div class="card-body">
                                                        <p class="mb-0">{{ $order->koli }} Pcs</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 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">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">Package list</p>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="formFile" class="form-label">You must print this Delivery Order
                                                and hand
                                                it over to the driver before picking up the goods</label>
                                            <div class="d-flex align-items-center mb-3">
                                                <button id="btnDownloadDO" class="btn btn-sm btn-danger">Download
                                                    DO</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">Surat Perintah Kerja</p>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="formFile" class="form-label">Anda harus mengunh berkas ini dan menyerahkannya kepada pengemudi sebelum mengambil barang</label>
                                            <div class="d-flex align-items-center mb-3">
                                                <button id="btnDownloadSPK" class="btn btn-sm btn-danger">Download SPK</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-12 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{{ $iOrd }}-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> --}}
                                </div>
                                <div class="col-sm-2"></div>
                                <div class="col-sm-5">
                                    <div class="row d-flex align-items-center mb-3">
                                        <div class="col-12 mb-3">
                                            <p class="text-danger text-bold mb-0">Vendor Information</p>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Nama Vendor</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    {{-- <p class="mb-0">CV Karya Expedisi Bangsa</p> --}}
                                                    @if ($order->vdr_name)
                                                        <p class="mb-0">{{ $order->vdr_name }}</p>
                                                    @else
                                                        <p class="mb-0 text-primary">not yet assigned</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Kendaraan</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    {{-- <p class="mb-0">B 1192 XY</p> --}}
                                                    @if ($order->vhc_nopol1)
                                                        <p class="mb-0">
                                                            {{ $order->vhc_nopol1 . ' ' . $order->vhc_nopol2 . ' ' . $order->vhc_nopol3 }}
                                                        </p>
                                                    @else
                                                        <p class="mb-0 text-primary">not yet assigned</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            <label for="" class="form-label">Nama Pengemudi</label>
                                            <div class="card bg-light border mb-0">
                                                <div class="card-body">
                                                    {{-- <p class="mb-0">Archibald Borislav Aldric</p> --}}
                                                    @if ($order->drv_name)
                                                        <p class="mb-0">
                                                            {{ $order->drv_name }}
                                                        </p>
                                                        <p class="mb-0">
                                                            <a href="tel:0{{ $order->drv_phone_val }}">
                                                                <i class="text-dark ion-ios-telephone"></i>&nbsp;
                                                                {{ implode(' ', str_split('0' . $order->drv_phone_val, 4)) }}
                                                            </a>
                                                        </p>
                                                        <p class="mb-0">
                                                            <a href="https://api.whatsapp.com/send/?phone=62{{ $order->drv_phone_val }}&text=Halo&app_absent=0" class="" target="_blank"><i class="text-success ion-social-whatsapp"></i> {{ implode(' ', str_split('0' . $order->drv_phone_val, 4)) }}</a>
                                                        </p>
                                                    @else
                                                        <p class="mb-0 text-primary">not yet assigned</p>
                                                    @endif
                                                </div>
                                            </div>
                                            @if ($order->drv_name2)
                                                <label for="" class="form-label mt-3">Nama Pengemudi 2</label>
                                                <div class="card bg-light border mb-0">
                                                    <div class="card-body">
                                                        @if ($order->drv_name2)
                                                            <p class="mb-0"> {{ $order->drv_name2 }} </p>
                                                            <p class="mb-0">
                                                                <a href="tel:0{{ $order->drv_phone2_val }}">
                                                                    <i class="text-dark ion-ios-telephone"></i>&nbsp;
                                                                    {{ implode(' ', str_split('0' . $order->drv_phone2_val, 4)) }}
                                                                </a>
                                                            </p>
                                                            <p class="mb-0">
                                                                <a href="https://api.whatsapp.com/send/?phone=62{{ $order->drv_phone2_val }}&text=Halo&app_absent=0" class="" target="_blank"><i class="text-success ion-social-whatsapp"></i>
                                                                    {{ implode(' ', str_split('0' . $order->drv_phone2_val, 4)) }}</a>
                                                            </p>
                                                        @else
                                                            <p class="mb-0 text-primary">belum ditugaskan</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

        const State = {
            // orders: JSON.parse('{!! json_encode($bladeViewOrders) !!}'),
            orders: {!! json_encode($bladeViewOrders) !!},
        };

        const Wrapper = {
            activate: function() {
                Wrapper.event();
                OrdView.activate();
            },
            event: function() {
                Wrapper.initDate();
                Wrapper.downloadNReport();
            },
            initDate: function() {
                const {
                    orders
                } = State;
                for (let iOrd in orders) {
                    $(`#view${iOrd}-pickup_at`).text(moment.unix(orders[iOrd].set_pck_at).format('DD MMM YYYY HH:mm:ss'));
                    $(`#view${iOrd}-pickup_date_at`).text(moment.unix(orders[iOrd].set_pck_at).format('DD MMM YYYY'));
                    $(`#view${iOrd}-pickup_time_at`).text(moment.unix(orders[iOrd].set_pck_at).format('HH:mm:ss'));
                    $(`#view${iOrd}-fix_price_at`).text(moment.unix(orders[iOrd].fix_price_at).format('DD MMM YYYY HH:mm:ss'));
                }
            },
            downloadNReport: function() {
                const {
                    orders
                } = State;
                $('#btnDownloadDO').on('click', function() {
                    document.cookie = 'now_at=' + moment().format('DD MMM YYYY') + '; path=/;';
                    setTimeout(() => {
                        window.open(
                            "{{ route('view_user_vendor_transactions_download_do') . '?ord_code=' . $order->ord_code }}",
                            "_blank");
                    }, 1);
                });
                $('#btnDownloadSPK').on('click', function() {
                    document.cookie = 'now_at=' + moment().format('DD MMM YYYY') + '; path=/;';
                    let ord_codes = '';
                    for (let iOrd in orders) {
                        ord_codes += orders[iOrd].ord_code + ',';
                    }
                    if (ord_codes.slice(-1) === ',') {
                        ord_codes = ord_codes.slice(0, -1);
                    }
                    setTimeout(() => {
                        window.open(
                            "{{ route('view_user_vendor_transactions_download_spk') . '?ord_code=' }}" + ord_codes,
                            "_blank");
                    }, 1);
                });
            },
        };

        const OrdView = {
            activate: function() {
                OrdView.event();
                OrdView.initDateAdtPoints();
            },
            event: function() {},
            initDateAdtPoints: function() {
                const {
                    orders
                } = State;
                for (let iOrd in orders) {
                    iOrd = Number(iOrd);
                    for (let iAdtPoint in orders[iOrd].adtPoints) {
                        iAdtPoint = Number(iAdtPoint);
                        $(`#view${iOrd}-pickup_date_at${iAdtPoint+1}`).text(moment.unix(orders[iOrd].adtPoints[iAdtPoint].set_pck_at).format('DD MMM YYYY'));
                        $(`#view${iOrd}-pickup_time_at${iAdtPoint+1}`).text(moment.unix(orders[iOrd].adtPoints[iAdtPoint].set_pck_at).format('HH:mm:ss'));
                    }
                }
            },
        };

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