From d3c670aeed6a9121e4b833e753fe6d3327065564 Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Thu, 6 May 2021 18:03:48 +0800
Subject: [PATCH] EXCHANGE-149 - Layout, components for merge bookings (abit on
 backend for filter booking list)

---
 .gitignore                                    |  13 +-
 .../Filters/ConvertibleCurrencyId.php         |  20 ++
 .../Eloquent/Filters/FixedCurrencyId.php      |  20 ++
 app/Classes/General/Eloquent/Filters/IdIn.php |  20 ++
 .../ControllersLogic/MergeBookingLogic.php    |  98 +++++++++
 .../BookingMergeObject.php                    |  30 +++
 .../Standards/Rules/CanMergeBooking.php       |  51 +++++
 .../Validators/BookingMergeValidation.php     |  39 ++++
 .../Bookings/MergeBookingController.php       |  19 ++
 .../elements/BookingMergeableComponent.vue    |  58 ++++++
 .../sections/BookingMergeSectionComponent.vue | 189 ++++++++++++++++++
 resources/views/pages/booking_merge.blade.php |   8 +
 routes/booking.php                            |   1 +
 routes/web.php                                |   4 +-
 14 files changed, 568 insertions(+), 2 deletions(-)
 create mode 100644 app/Classes/General/Eloquent/Filters/ConvertibleCurrencyId.php
 create mode 100644 app/Classes/General/Eloquent/Filters/FixedCurrencyId.php
 create mode 100644 app/Classes/General/Eloquent/Filters/IdIn.php
 create mode 100644 app/Classes/Modules/Bookings/ControllersLogic/MergeBookingLogic.php
 create mode 100644 app/Classes/Modules/Bookings/DataTransferObjects/BookingMergeObject.php
 create mode 100644 app/Classes/Modules/Bookings/Standards/Rules/CanMergeBooking.php
 create mode 100644 app/Classes/Modules/Bookings/Standards/Validators/BookingMergeValidation.php
 create mode 100644 app/Http/Controllers/Bookings/MergeBookingController.php
 create mode 100644 resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue
 create mode 100644 resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue
 create mode 100644 resources/views/pages/booking_merge.blade.php

diff --git a/.gitignore b/.gitignore
index a4dfdd60..95d268cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,15 @@ npm-debug.log
 yarn-error.log
 /storage/file
 composer.lock
-yarn.lock
\ No newline at end of file
+yarn.lock
+.DS_Store
+public/.DS_Store
+public/images/.DS_Store
+gox.iml
+rebuild_docker.sh
+docker/*
+db/*
+docker-compose.yml
+package-lock.json
+public/*
+/public/*
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/ConvertibleCurrencyId.php b/app/Classes/General/Eloquent/Filters/ConvertibleCurrencyId.php
new file mode 100644
index 00000000..3d5701f7
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/ConvertibleCurrencyId.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+
+class ConvertibleCurrencyId implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return Builder|mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->where('convertible_currency_id', $value);
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/FixedCurrencyId.php b/app/Classes/General/Eloquent/Filters/FixedCurrencyId.php
new file mode 100644
index 00000000..bd582f82
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/FixedCurrencyId.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+
+class FixedCurrencyId implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return Builder|mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->where('fix_currency_id', $value);
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/IdIn.php b/app/Classes/General/Eloquent/Filters/IdIn.php
new file mode 100644
index 00000000..cfe9358e
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/IdIn.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+
+class IdIn implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return Builder|mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->whereIn('id', $value);
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/ControllersLogic/MergeBookingLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/MergeBookingLogic.php
new file mode 100644
index 00000000..23cce87f
--- /dev/null
+++ b/app/Classes/Modules/Bookings/ControllersLogic/MergeBookingLogic.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\ControllersLogic;
+
+use App\Classes\Exceptions\ResourceNotFoundException;
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+
+use App\Classes\Modules\Bookings\DataTransferObjects\BookingMergeObject;
+use App\Classes\Modules\Bookings\Services\FetchesBooking;
+use App\Classes\Modules\Bookings\Standards\Rules\CanMergeBooking;
+use App\Classes\Modules\Companies\Services\FetchesCompany;
+use App\Classes\Modules\Banks\Services\FetchesBank;
+use App\Classes\Modules\Currencies\Services\FetchesCurrency;
+
+use App\Classes\Modules\Bookings\Standards\Rules\CanCreateBooking;
+use App\Classes\Modules\Bookings\Services\CreatesBooking;
+use App\Classes\Modules\Bookings\Services\GeneratesBookingMarking;
+
+use App\Classes\Modules\Bookings\DataTransferObjects\BookingObject;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Http\Resources\BookingResource;
+
+use ErrorException;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class MergeBookingLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Merge Booking',
+            'message' => 'You have successfully merged Booking'
+        ];
+    }
+
+    /** @var CanCreateBooking */
+    private $canMergeBooking;
+
+    /** @var CreatesBooking */
+    private $createsBooking;
+
+    /** @var GeneratesBookingMarking */
+    private $generatesBookingMarking;
+
+    /** @var FetchesCompany */
+    private $fetchesCompany;
+
+    /** @var FetchesCompany */
+    private $fetchesBooking;
+
+    /**
+     * CreateBookingLogic constructor.
+     * @param CanMergeBooking $canMergeBooking
+     * @param CreatesBooking $createsBooking
+     * @param GeneratesBookingMarking $generatesBookingMarking
+     * @param FetchesCompany $fetchesCompany
+     */
+    public function __construct(CanMergeBooking $canMergeBooking, CreatesBooking $createsBooking, GeneratesBookingMarking $generatesBookingMarking, FetchesCompany $fetchesCompany, FetchesBooking $fetchesBooking)
+    {
+        $this->canMergeBooking = $canMergeBooking;
+        $this->createsBooking = $createsBooking;
+        $this->generatesBookingMarking = $generatesBookingMarking;
+        $this->fetchesCompany = $fetchesCompany;
+        $this->fetchesBooking = $fetchesBooking;
+    }
+
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     * @throws \App\Classes\Exceptions\ResourceNotFoundException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $object = new BookingMergeObject($request->get('booking_ids'));
+
+        $this->canMergeBooking->passes($object);
+
+        /*
+        $bookings = $this->fetchesBooking->execute([
+            'id_in'=> $object->getBookingIds(),
+            'status' => ApprovalStatus::APPROVED,
+        ]);
+        */
+        #TODO: Fetch transaction (+details) record, reassign transaction id & recalculate amount
+
+        //dd($bookings);
+
+        return $this->response();
+
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/DataTransferObjects/BookingMergeObject.php b/app/Classes/Modules/Bookings/DataTransferObjects/BookingMergeObject.php
new file mode 100644
index 00000000..5b590145
--- /dev/null
+++ b/app/Classes/Modules/Bookings/DataTransferObjects/BookingMergeObject.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\DataTransferObjects;
+
+use App\Classes\General\Interfaces\DataTransferObject;
+
+class BookingMergeObject implements DataTransferObject
+{
+
+    /** @var array */
+    private $bookingIds;
+
+    /**
+     * BookingMergeObject constructor.
+     * @param array $bookingIds
+     */
+    public function __construct(array $bookingIds)
+    {
+        $this->bookingIds = $bookingIds;
+    }
+
+    /**
+     * @return array
+     */
+    public function getBookingIds(): array
+    {
+        return $this->bookingIds;
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/Standards/Rules/CanMergeBooking.php b/app/Classes/Modules/Bookings/Standards/Rules/CanMergeBooking.php
new file mode 100644
index 00000000..64e89127
--- /dev/null
+++ b/app/Classes/Modules/Bookings/Standards/Rules/CanMergeBooking.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\Standards\Rules;
+
+use App\Classes\General\Abstracts\AbstractRule;
+use App\Classes\Modules\Bookings\DataTransferObjects\BookingObject;
+use App\Classes\Modules\Bookings\Standards\Validators\BookingMergeValidation;
+
+class CanMergeBooking extends AbstractRule
+{
+
+    /** @var BookingMergeValidation */
+    private $bookingMergeValidation;
+
+
+    /**
+     * CanCreateBooking constructor.
+     * @param BookingMergeValidation $bookingMergeValidation
+     */
+    public function __construct(BookingMergeValidation $bookingMergeValidation)
+    {
+        $this->bookingMergeValidation = $bookingMergeValidation;
+    }
+
+    /**
+     * @return bool
+     */
+    protected function authorized(): bool
+    {
+        return true;
+    }
+
+    /**
+     * @param BookingObject $object
+     * @return bool
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    protected function validators($object): bool
+    {
+        return $this->bookingMergeValidation->validate($object);
+    }
+
+    /**
+     * @param BookingObject $object
+     * @return bool
+     */
+    protected function criteria($object): bool
+    {
+        return true;
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/Standards/Validators/BookingMergeValidation.php b/app/Classes/Modules/Bookings/Standards/Validators/BookingMergeValidation.php
new file mode 100644
index 00000000..b7e77712
--- /dev/null
+++ b/app/Classes/Modules/Bookings/Standards/Validators/BookingMergeValidation.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\Standards\Validators;
+
+use App\Classes\General\Abstracts\AbstractValidation;
+use App\Classes\Modules\Bookings\DataTransferObjects\BookingMergeObject;
+use App\Classes\Modules\Bookings\DataTransferObjects\BookingObject;
+
+class BookingMergeValidation extends AbstractValidation
+{
+    /**
+     * @param BookingMergeObject $object
+     * @return array
+     */
+    protected function data($object): array 
+    {
+        return [
+            'booking_ids' => $object->getBookingIds()
+        ];
+    }
+
+    /**
+     * @return array
+     */
+    protected function rules(): array 
+    {
+        return [
+            'booking_ids' => 'required|array|min:2',
+        ];
+    }
+
+    /**
+     * @return array
+     */
+    protected function messages(): array 
+    {
+        return [];
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Bookings/MergeBookingController.php b/app/Http/Controllers/Bookings/MergeBookingController.php
new file mode 100644
index 00000000..40d733a9
--- /dev/null
+++ b/app/Http/Controllers/Bookings/MergeBookingController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Bookings;
+
+use App\Classes\Modules\Bookings\ControllersLogic\MergeBookingLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class MergeBookingController
+{
+    /**
+     * @param Request $request
+     * @param MergeBookingLogic $logic
+     * @return JsonResponse
+     */
+    public function merge(Request $request, MergeBookingLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue b/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue
new file mode 100644
index 00000000..a8aea8a2
--- /dev/null
+++ b/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="row align-items-center m-b-15 parentContainer">
+        <div class="col-auto">
+            <div class="font-heading fs-12">
+                <input type="checkbox" v-bind:data-id="this.item.id" @change="selectedBookings">
+            </div>
+        </div>
+        <div class="col-auto">
+            <div class="row">
+                <div class="col-auto p-r-10 all-caps">
+                    <div class="font-heading all-caps fs-11 bold">{{this.item.marking}}</div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="font-heading all-caps fs-10 muted">{{this.item.created_at}}</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col" v-if="$store.getters.isAdmin">
+            <div class="font-heading fs-10 muted all-caps">Marking</div>
+            <div class="font-heading fs-12">
+                {{this.item.company.reference}}
+            </div>
+        </div>
+        <div class="col-auto">
+            <div class="font-heading fs-10 muted all-caps">Currency</div>
+            <div class="font-heading fs-12 bold">
+                <span class="flag-icon fs-12" :class="'flag-icon-'+item.convertible_currency.country.short_code.toLowerCase()"></span> {{this.item.convertible_currency.short_code}}
+            </div>
+        </div>
+        <div class="col-auto">
+            <div class="font-heading fs-10 muted all-caps">Transfer Type</div>
+            <div class="font-heading fs-11">{{this.item.service.name}}</div>
+        </div>
+        <div class="col">
+            <div class="font-heading fs-10 muted all-caps">Payable Amount</div>
+            <div class="font-heading fs-11 text-success bold">{{this.item.amount}} {{this.item.fixed_currency.short_code}}</div>
+        </div>
+        <div class="col">
+            <div class="font-heading fs-10 muted all-caps">Status</div>
+            <div class="font-heading fs-11 text-success bold">{{this.item.status}}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        methods: {
+            selectedBookings(e) {
+                this.$root.$emit('selectedBookings', e.target);
+            },
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue b/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue
new file mode 100644
index 00000000..b0f4b6c9
--- /dev/null
+++ b/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue
@@ -0,0 +1,189 @@
+<template>
+    <div class="row parentContainer">
+        <div class="col">
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+            <div class="row" v-show="!isLoading" v-if="booking">
+                <div class="col-9">
+                    <div class="row">
+                        <div class="col bg-white padding-25">
+                            <div class="absolute" style="top: -5px;right: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 110px 110px 0px;border-color: transparent rgb(249, 249, 249) transparent transparent;z-index: 2;">
+                                <div @mouseover="bearShowing = true" style="width: 52px;height: 30px;margin-top: 75px;margin-left: 22px;"></div>
+                            </div>
+                            <div class="absolute shadow-sm " style="top: 0px; right: 0px; width: 0px; height: 0px; border-style: solid; border-width: 100px 0px 0px 100px; border-color: transparent transparent transparent rgb(255, 255, 255); z-index: 1;"></div>
+                            <!--<bear-component class="animate__animated animate__slow animate__fadeInDown" v-on:mouseover.native="bearShowing = true" v-on:mouseleave.native="bearShowing = false" v-if="bearShowing"></bear-component>-->
+                            <div class="row align-items-center m-b-25">
+                                <div class="col-auto p-r-0">
+                                    <div class="icon-thumbnail icon-35 bg-transparent">
+                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                             width="35" height="35"
+                                             viewBox="0 0 172 172"
+                                             style=" fill:#000000;"><defs><linearGradient x1="69.875" y1="39.05475" x2="69.875" y2="54.29019" gradientUnits="userSpaceOnUse" id="color-1_L06xtIstZ632_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-2_L06xtIstZ632_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-3_L06xtIstZ632_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-4_L06xtIstZ632_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="48.375" y1="17.09788" x2="48.375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-5_L06xtIstZ632_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="59.125" y1="17.09788" x2="59.125" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-6_L06xtIstZ632_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-7_L06xtIstZ632_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="17.09788" x2="86" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-8_L06xtIstZ632_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="130.34375" y1="17.09788" x2="130.34375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-9_L06xtIstZ632_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M48.23794,53.75h43.27681c1.40556,0 2.54775,-1.14219 2.54775,-2.55044v-5.65181c0,-1.40556 -1.14219,-2.54775 -2.55044,-2.54775h-43.27412c-1.40825,0 -2.55044,1.14219 -2.55044,2.55044v5.65181c0,1.40556 1.14219,2.54775 2.55044,2.54775z" fill="url(#color-1_L06xtIstZ632_gr1)"></path><rect x="17" y="23" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-2_L06xtIstZ632_gr2)"></rect><rect x="17" y="28" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-3_L06xtIstZ632_gr3)"></rect><rect x="17" y="33" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-4_L06xtIstZ632_gr4)"></rect><rect x="17" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-5_L06xtIstZ632_gr5)"></rect><rect x="21" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-6_L06xtIstZ632_gr6)"></rect><rect x="25" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-7_L06xtIstZ632_gr7)"></rect><path d="M155.875,86c0,-12.01044 -7.92006,-22.20413 -18.8125,-25.63606v-35.7545c0,-2.18494 -1.30075,-4.14144 -3.31369,-4.97456c-1.99681,-0.83044 -4.28387,-0.38431 -5.82381,1.15025l-4.02587,4.0205l-6.78325,-4.95306c-1.892,-1.38675 -4.43706,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43438,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.05469,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-6.77519,4.95306l-4.042,-4.01781c-1.54263,-1.53456 -3.82969,-1.98606 -5.82381,-1.15025c-2.01294,0.83312 -3.31369,2.78962 -3.31369,4.97456v101.70575h-13.4375v13.4375c0,7.40944 6.03075,13.4375 13.4375,13.4375h94.05981c7.40944,-0.00269 13.44019,-6.03075 13.44019,-13.44019v-28.11394c10.89244,-3.43194 18.8125,-13.62562 18.8125,-25.63606zM29.5625,147.8125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-8.0625h88.6875v8.0625c0,3.02344 1.00244,5.375 2.69019,8.0625zM131.6875,139.75c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-13.4375h-80.625v-24.1875h-0.00269l-0.02419,-77.53169l4.03663,4.01781c1.88125,1.8705 4.79988,2.09356 6.94987,0.53213l6.7725,-4.95575l7.05469,5.15194c1.89737,1.38406 4.43438,1.37869 6.32637,0l7.04125,-5.15194l7.05738,5.15194c1.89469,1.38137 4.429,1.38137 6.32369,0l7.04394,-5.15194l7.05469,5.15194c1.89737,1.38406 4.43437,1.37869 6.32637,0l7.04125,-5.15194l6.78862,4.95575c2.14194,1.56413 5.06594,1.34106 6.94719,-0.53213l4.01244,-4.00169v34.65263c-0.88419,-0.08869 -1.77912,-0.13706 -2.6875,-0.13706c-14.81888,0 -26.875,12.05613 -26.875,26.875c0,14.81887 12.05612,26.875 26.875,26.875c0.90838,0 1.80331,-0.04838 2.6875,-0.13706zM129,107.5c-11.85456,0 -21.5,-9.64544 -21.5,-21.5c0,-11.85456 9.64544,-21.5 21.5,-21.5c11.85456,0 21.5,9.64544 21.5,21.5c0,11.85456 -9.64544,21.5 -21.5,21.5z" fill="url(#color-8_L06xtIstZ632_gr8)"></path><path d="M140.53744,75.25l-14.22763,14.79469l-6.15975,-6.407l-3.80013,3.95331l6.15975,6.407c1.04812,1.09113 2.42413,1.634 3.80281,1.634c1.37869,0 2.75469,-0.54287 3.80281,-1.634l14.22225,-14.79469z" fill="url(#color-9_L06xtIstZ632_gr9)"></path></g></g></svg>
+                                    </div>
+                                </div>
+                                <div class="col-auto p-l-0">
+                                    <div class="font-heading all-caps fs-12 bold hint-text">Merge Transfer</div>
+                                </div>
+                                <div class="col-12 p-3 p-b-0">
+                                    <p>Merge multiple transfer orders to generate a single invoice for your purchase order</p>
+                                </div>
+                            </div>
+                            <div class="row b-b b-dashed b-grey p-b-25" >
+                                <div class="col-10">
+                                    <div class="row m-b-15">
+                                        <div class="col-4">
+                                            <div class="row">
+                                                <div class="col-auto">
+                                                    <div class="font-heading fs-10 muted all-caps">Date</div>
+                                                    <div class="font-heading fs-10">
+                                                        {{booking.created_at}}
+                                                    </div>
+                                                </div>
+                                                <div class="col-auto">
+                                                    <div class="font-heading fs-10 muted all-caps">Reference</div>
+                                                    <div class="font-heading fs-10">
+                                                        {{booking.marking}}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <div class="font-heading fs-10 muted all-caps">{{booking.company.type === 1 ? 'SSM Registration No.' : 'Identification Card No.'}}</div>
+                                            <div class="font-heading fs-10 text-info">
+                                                {{booking.company.identification.reference}}
+                                            </div>
+                                        </div>
+                                        <div class="col">
+                                            <div class="row align-items-end">
+                                                <div class="col-auto">
+                                                    <div class="font-heading fs-10 muted all-caps">Contact</div>
+                                                    <div class="font-heading fs-10 bold">
+                                                        {{booking.company.contact.phone}}
+                                                    </div>
+                                                </div>
+                                                <div class="col-auto p-l-0 hide">
+                                                    <button class="btn btn-xs btn-default bg-master-lightest no-border b-rad-none"><i class="fa fa-pencil text-complete"></i></button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col bg-white padding-25">
+                            <div class="row">
+                                <p class="col-auto pull-left">Select Transfer Orders to merge with the order above</p>
+                            </div>
+                            <div class="row b-b b-dashed b-grey p-b-25">
+                                <list-component key="2" section="transferSection" :endpoint="route('api.booking.list')" :options="{per_page: 10, id_not: booking.id, status: 2,service_id:booking.service.id,convertible_currency_id:booking.convertible_currency.id,fixed_currency_id:booking.fixed_currency.id}">
+                                    <template slot="list" slot-scope="{data}">
+                                        <booking-mergeable-component :data="data"></booking-mergeable-component>
+                                    </template>
+                                </list-component>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <div class="row no-margin">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col bg-white padding-15">
+                                    <div class="row" >
+                                        <div class="col">
+                                            <div class="row align-items-end m-b-10 text-complete">
+                                                <div class="col">
+                                                    <div class="font-heading all-caps fs-10">Purchase Order Total Amount:</div>
+                                                </div>
+                                                <div class="col-auto text-right">
+                                                    <div class="font-heading fs-12">0.00</div>
+                                                </div>
+                                            </div>
+                                            <div class="row m-t-20">
+                                                <div class="col">
+                                                    <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="mergeTransfer()">Merge Transfer Orders</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            marking: {
+                type: Number,
+                required: true
+            }
+        },
+        data(){
+            return {
+                section: 'bookingDetailSection',
+                selected_id: '',
+                isLoading: true,
+                booking: null,
+                attention: false,
+                bearShowing: false,
+                bookings:[],
+                parameters:null,
+            }
+        },
+        computed: {
+            pendingQueue () {
+                return this.$store.getters.isInCompleteQueue(this.section);
+            }
+        },
+        watch: {
+            pendingQueue(inComplete){
+                if(inComplete){
+                    this.fetchBooking();
+                }
+            }
+        },
+        created(){
+            this.$store.dispatch('updateListQueue', {'name': this.section});
+        },
+        mounted() {
+            this.$root.$on('selectedBookings', el => {
+                if (el.checked) {
+                    this.bookings.push(el.dataset.id);
+                } else {
+                    let index = this.bookings.indexOf(el.dataset.id);
+                    if (index > -1) {
+                        this.bookings.splice(index, 1);
+                    }
+                }
+            });
+        },
+        methods: {
+            fetchBooking(){
+                this.isLoading = true;
+                this.submit(route('api.booking.show', this.marking), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                //this.$store.dispatch('completeList', {'name': this.section, 'data': []});
+                this.isLoading = false;
+                this.booking = response.payload.data;
+            },
+            errorHandler(){
+                window.location.href = this.route('dashboard')
+            },
+            mergeTransfer(){
+                //TODO: Validate selected booking
+                console.log(this.bookings);
+                this.parameters={};
+                this.$set(this.parameters, 'booking_ids', this.bookings);
+                this.submit(route('api.booking.merge'), 'post', this.section, true, true);
+
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/booking_merge.blade.php b/resources/views/pages/booking_merge.blade.php
new file mode 100644
index 00000000..e23db5bd
--- /dev/null
+++ b/resources/views/pages/booking_merge.blade.php
@@ -0,0 +1,8 @@
+@extends('layouts.base_portal')
+@section('inner_content')
+    <div class="row">
+        <div class="col">
+            <booking-merge-section-component :marking={{$marking}}></booking-merge-section-component>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/routes/booking.php b/routes/booking.php
index 8f60bfb2..8e89e4ff 100644
--- a/routes/booking.php
+++ b/routes/booking.php
@@ -6,6 +6,7 @@ Route::group(['prefix' => 'booking', 'as' => 'booking.', 'namespace' => 'Booking
     Route::get('/show/{marking}', 'FetchBookingController@fetch')->name('show');
     Route::get('/list', 'ListBookingsController@list')->name('list');
     Route::post('/create', 'CreateBookingController@create')->name('create');
+    Route::post('/merge', 'MergeBookingController@merge')->name('merge');
     Route::put('/update/{id}', 'UpdateBookingController@update')->name('update');
     Route::delete('/delete/{id}', 'DeleteBookingController@delete')->name('delete');
 
diff --git a/routes/web.php b/routes/web.php
index c3c0c925..eca220e9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -37,4 +37,6 @@ Route::get('/transfer/{marking}', function ($marking) {
     return view('pages.booking_details', ['marking' => $marking]);
 })->name('booking.details');
 
-
+Route::get('/transfer/merge/{marking}', function ($marking) {
+    return view('pages.booking_merge', ['marking' => $marking]);
+})->name('booking.merge');