@extends('admin.layouts.sub-layout.app')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title text-themecolor">Detail Transaction</h3>
                        <hr>
                        <div class="table-responsive">
                            <table class="table color-table info-table">
                                <thead>
                                    <tr>
                                        <th width="20%" style="font-weight: 600"> > Offer</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($transactions as $index => $transaction)
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center">Data Not Found.</td>
                                    </tr>
                                    @endforelse
                                        <tr>
                                            <td style="font-weight: 500">Start Date Time</td>
                                            <td>{{ $transaction->transaction->offer->start_date_time }}</td>
                                            <td style="font-weight: 500">End Date Time</td>
                                            <td>{{ $transaction->transaction->offer->end_date_time }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Offer Price</td>
                                            <td>{{ $transaction->transaction->offer->offer_price }}</td>
                                            <td style="font-weight: 500">Location</td>
                                            <td>{{ $transaction->transaction->offer->location }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Latitude</td>
                                            <td>{{ $transaction->transaction->offer->lat }}</td>
                                            <td style="font-weight: 500">Longitude</td>
                                            <td>{{ $transaction->transaction->offer->lng }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Note</td>
                                            <td colspan="3">{{ $transaction->transaction->offer->note }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Status</td>
                                            <td colspan="3">{{ $transaction->transaction->offer->status }}</td>
                                        </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4">
                                            <div class="pull-right">
                                                {{ $transactions->links('vendor.pagination.bootstrap-4') }}
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="table-responsive">
                            <table class="table color-table info-table">
                                <thead>
                                    <tr>
                                        <th width="20%" style="font-weight: 600"> > Pricing</th>
                                    </tr>
                                </thead>
                                <tbody>
                                        <tr>
                                            <td style="font-weight: 500">Name</td>
                                            <td>{{ $transaction->transaction->offer->pricing->name }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Detail</td>
                                            <td>{{ $transaction->transaction->offer->pricing->detail }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Price</td>
                                            <td>{{ $transaction->transaction->offer->pricing->price_first }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Time</td>
                                            <td>{{ $transaction->transaction->offer->pricing->time_first }} {{ $transaction->transaction->offer->pricing->unit->name }}</td>
                                        </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2">
                                            <div class="pull-right">
                                                {{ $transactions->links('vendor.pagination.bootstrap-4') }}
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="table-responsive">
                            <table class="table color-table info-table">
                                <thead>
                                    <tr>
                                        <th width="20%" style="font-weight: 600"> > Listing</th>
                                    </tr>
                                </thead>
                                <tbody>
                                        <tr>
                                            <td style="font-weight: 500">Category</td>
                                            <td>{{ $transaction->service->category->name }}</td>
                                        <tr>
                                            <td style="font-weight: 500">Title</td>
                                            <td>{{ $transaction->service->title }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Experience</td>
                                            <td>{{ $transaction->service->experience }} Year</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Latitude</td>
                                            <td>{{ $transaction->service->latitude }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Longitude</td>
                                            <td>{{ $transaction->service->longitude }}</td>
                                        </tr>
                                        <tr>
                                            <td style="font-weight: 500">Note</td>
                                            <td>{{ $transaction->service->note }}</td>
                                        </tr>
                                        </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2">
                                            <div class="pull-right">
                                                {{ $transactions->links('vendor.pagination.bootstrap-4') }}
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="table-responsive">
                            <table class="table color-table info-table">
                                <thead>
                                    <tr>
                                        <th width="20%" style="font-weight: 600"> > Media Listing</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($posts as $index => $post)
                                    <tr>
                                        <td style="font-weight: 500" rowspan="3" colspan="2">
                                            <img id="myImg" src="{{ asset('image/medias/services/'.$post->media->file) }}" width="100%" height="80" />
                                            <!-- The Modal -->
                                            <div id="myModal" class="modal">
                                                <span class="close">&times;</span>
                                                <img class="modal-content" id="img01">
                                                <div id="caption"></div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: 500">Youtube</td>
                                        @if($post->media->youtube != '' || $post->media->youtube != NULL )
                                            <td>{{ $post->media->youtube }}</td>
                                        @else
                                            <td> - </td>
                                        @endif
                                    </tr>
                                    <tr>
                                        <td style="font-weight: 500">Note</td>
                                        <td>{{ $post->media->note }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="2" class="text-center">Data Not Found.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2">
                                            <div class="pull-right">
                                                {{ $transactions->links('vendor.pagination.bootstrap-4') }}
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>          
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title text-themecolor">Detail Milestone Payment</h3>
                        <hr>
                        <div class="table-responsive">
                            <table class="table color-table info-table">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th width="20%">Title</th>
                                        <th width="15%">Percentage (%)</th>
                                        <th width="35%">Description</th>
                                        <th width="15%">Amount</th>
                                        <th width="10%">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($transactions as $index => $transaction)
                                        <tr>
                                            <td>{{ $index+1 }}</td>
                                            <td><div style="font-size: 20px">{{ $transaction->milestonePayments->title }}</div></td>
                                            <td>{{ ($transaction->percentage)*100 }}</td>
                                            <td>{{ $transaction->milestonePayments->description }}</td>
                                            <td>{{ $transaction->currency_code }} {{ $transaction->amount }}</td>
                                            <td>{{ $transaction->status }}</td>
                                            <!-- <td>{{ $transaction->total_price }}</td> -->
                                            <!-- <td>{!! $transaction->note !!}</td> -->
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">Data Not Found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="6">
                                            <div class="pull-right">
                                                {{ $transactions->links('vendor.pagination.bootstrap-4') }}
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('stylesheet')
    @parent
    <!--alerts CSS -->
    <link href="{{ asset('asset/css/modal-custom.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('asset/plugins/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css">
@endsection

@section('javascript')
    @parent
    <!-- Sweet-Alert  -->
    <script src="{{ asset('asset/plugins/sweetalert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('asset/js/modal-custom.js') }}"></script>
@endsection