@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">
                            @php
                                $startNoLainnya = 1;
                            @endphp
                            @foreach ($data as $iOrd => $_order)
                                @php
                                    ++$startNoLainnya;
                                @endphp
                                <div class="card bg-light">
                                    <div class="card-body pb-0">
                                        <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 ({{ $iOrd + 1 }})</p>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <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">{{ $_order['pck_date'] }}</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">{{ $_order['pck_time'] }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row d-flex mb-3">
                                            <div class="col-5">
                                                <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">
                                                <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>
                                        @if (count($_order['checklist_array']) > 0)
                                            <div class="row d-flex">
                                                <div class="col-12">
                                                    <label for="" class="form-label">Foto Pelaporan</label>
                                                    <div class="row">
                                                        @foreach ($_order['checklist_array'] as $_chck)
                                                            <div class="col-sm-6">
                                                                <div class="card bg-light border">
                                                                    <div class="card-body">
                                                                        <p class="text-bold mb-2">{{ $_chck->checklist_name }}</p>
                                                                        @if ($_chck->img == null)
                                                                            <p class="mb-0 text-muted">Foto belum tersedia</p>
                                                                        @else
                                                                            <img src="{{ $_chck->img }}" alt="" class="img-fluid mb-2">
                                                                            <i class="text-muted"><small>Uploaded at: {{ date('Y-m-d H:i:s', $_chck->updt) }}</small></i>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <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">Vendor Information</p> --}}
                                            <p class="text-danger text-bold mb-0">Client 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 class="col-sm-2"></div>
                                <div class="col-sm-5">
                                    <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 dapat mengunduh berkas ini dan menyerahkannya kepada pengemudi sebelum mengambil barang</label>
                                            @php $no = 1 @endphp
                                            @foreach ($data as $iOrd => $_order)
                                                <div class="d-flex align-items-center mb-3">
                                                    <button id="btnDownloadSPK" data-point-id="{{ $_order['id'] }}" class="btn btn-sm btn-danger btnDownloadSPK">Download SPK {{ $no }}</button>
                                                </div>
                                                @php $no ++ @endphp
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="row d-flex align-items-center">
                                        <div class="col-12 mb-0">
                                            <label for="" class="form-label">Status Pekerjaan</label>
                                        </div>
                                        <div class="col-sm-12 mb-3">
                                            @if ($order->status == 10)
                                                <span class="btn btn-sm btn-success">Complete</span>
                                                <br>
                                                <i class="text-muted"><small>Completed at: {{ date('Y-m-d H:i:s', $order->updt) }}</small></i>
                                                @php $no = 1 @endphp
                                                @foreach ($data as $iOrd => $_order)
                                                    <div class="d-flex align-items-center mb-3">
                                                        <button id="btnDownloadSummary" data-point-id="{{ $_order['id'] }}" class="btn btn-sm btn-danger btnDownloadSummary">Show Summary {{ $no }}</button>
                                                    </div>
                                                    @php $no ++ @endphp
                                                @endforeach
                                                {{-- <div class="d-flex align-items-center mt-3">
                                                    <button id="btnDownloadSummary" class="btn btn-sm btn-danger">Show summary</button>
                                                </div> --}}
                                            @elseif ($order->status == 11)
                                                <span class="btn btn-sm btn-danger">Cancel</span>
                                            @else
                                                <span class="btn btn-sm btn-warning">Active</span>
                                            @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);
                    }
                    let pointId = $(this).data('pointId')

                    setTimeout(() => {
                        window.open(
                            `/user/vendor/transactions/download_spk?ord_code=${ord_codes}&point_id=${pointId}`,
                            "_blank"
                        );
                    }, 1);
                });
                $('.btnDownloadSummary').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);
                    }
                    let pointId = $(this).data('pointId')
                    // setTimeout(() => {
                    //     window.open(
                    //         "{{ route('view_user_vendor_transactions_download_summary') . '?ord_code=' }}" + ord_codes,
                    //         "_blank");
                    // }, 1);

                    setTimeout(() => {
                        window.open(
                            `/user/vendor/transactions/download_summary?ord_code=${ord_codes}&point_id=${pointId}`,
                            "_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