@extends('layouts.app')
@section('style')
<style type="text/css">
    /* Cubic Bezier Transition */
    /***
        Pricing Table 1
        ***/
    .pricing-content-1 {
        background-color: #fff;
    }
    .pricing-content-1:before,
    .pricing-content-1:after {
        content: " ";
        display: table;
    }
    .pricing-content-1:after {
        clear: both;
    }
    .pricing-content-1 .arrow-down {
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid;
        margin: auto;
    }
    .pricing-content-1 .arrow-down.arrow-blue {
        border-top-color: #3598DC;
    }
    .pricing-content-1 .arrow-down.arrow-green {
        border-top-color: #32C5D2;
    }
    .pricing-content-1 .arrow-down.arrow-dark {
        border-top-color: #2F353B;
    }
    .pricing-content-1 .arrow-down.arrow-grey {
        border-top-color: #f7f9fb;
    }
    .pricing-content-1 .price-ribbon {
        position: absolute;
        top: 75px;
        right: -4px;
        width: 90px;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 300;
        padding: 6px 20px 6px 15px;
        color: #fff;
        background-color: #D91E18;
        text-shadow: 0px 1px 2px #bbb;
        -webkit-box-shadow: 0px 2px 4px #888;
        -moz-box-shadow: 0px 2px 4px #888;
        box-shadow: 0px 2px 4px #888;
    }
    .pricing-content-1 .price-ribbon:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 0px;
        top: 100%;
        border-width: 5px 10px;
        border-style: solid;
        border-color: #64120f transparent transparent #64120f;
    }
    .pricing-content-1 .pricing-title {
        border-bottom: 1px solid;
        border-color: #fff;
    }
    .pricing-content-1 .pricing-title>h1 {
        margin: 20px 0;
    }
    .pricing-content-1 .price-column-container {
        text-align: center;
        margin: 0;
        background-color: #fff;
    }
    .pricing-content-1 .price-column-container.border-active {
        border: 1px solid #e5e9ee;
    }
    .pricing-content-1 .price-column-container:first-child {
        margin-left: 0;
    }
    .pricing-content-1 .price-column-container:last-child {
        margin-right: 0;
    }
    .pricing-content-1 .price-table-head {
        color: #fff;
        padding: 20px 0;
    }
    .pricing-content-1 .price-table-head h2 {
        font-size: 26px;
    }
    .pricing-content-1 .price-table-head.price-1 {
        background-color: #3598DC;
    }
    .pricing-content-1 .price-table-head.price-2 {
        background-color: #32C5D2;
    }
    .pricing-content-1 .price-table-head.price-3 {
        background-color: #2F353B;
    }
    .pricing-content-1 .price-table-pricing>h3 {
        font-size: 60px;
        position: relative;
    }
    .pricing-content-1 .price-table-pricing>h3>.price-sign {
        font-size: 24px;
        position: absolute;
        margin-left: -15px;
    }
    .pricing-content-1 .price-table-pricing>p {
        margin-top: 0;
    }
    .pricing-content-1 .price-table-content {
        background-color: #f7f9fb;
        color: #5c6d7e;
        font-weight: 600;
        font-size: 16px;
    }
    .pricing-content-1 .price-table-content .row {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .pricing-content-1 .price-table-content .row i {
        color: #6cade6;
    }
    .pricing-content-1 .price-table-content .row:first-child {
        padding-top: 20px;
    }
    .pricing-content-1 .price-table-content .row:last-child {
        padding-bottom: 20px;
    }
    .pricing-content-1 .price-table-footer {
        padding: 20px 0;
    }
    .pricing-content-1 .price-table-footer>.price-button {
        font-weight: bold;
        padding: 10px 20px;
    }
    @media (max-width: 1024px) {
        .pricing-content-1 .mobile-padding {
            padding: 0;
            margin: 0;
        }
        .pricing-content-1 .mobile-padding>i {
            margin-right: 5px;
        }
        .pricing-content-1 .price-table-content {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    @media (max-width: 1024px) {
        .pricing-content-1 .mobile-padding {
            padding: 0 15px;
            margin: 0 -15px;
        }
        .pricing-content-1 .mobile-padding>i {
            margin-right: 20px;
        }
        .pricing-content-1 .price-table-content {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    /***
        Pricing Table 2
    ***/
    .pricing-content-2 {
        background-color: #fff;
    }
    .pricing-content-2 .no-padding {
        padding: 0;
    }
    .pricing-content-2 .text-left {
        text-align: left;
    }
    .pricing-content-2 .text-right {
        text-align: right;
    }
    .pricing-content-2.pricing-bg-dark {
        background-color: #2F353B;
    }
    .pricing-content-2 .pricing-title {
        border-color: #444;
    }
    .pricing-content-2 .pricing-title>h1 {
        color: #fff;
    }
    .pricing-content-2 .pricing-table-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .pricing-content-2 .pricing-table-container .padding-fix {
        padding-left: 15px;
        padding-right: 15px;
    }
    .pricing-content-2 .pricing-table-container .price-column-container {
        background-color: #fff;
        margin: 30px 0;
        padding: 60px 0;
        text-align: center;
        border-bottom: 4px solid #ccc;
    }
    .pricing-content-2 .pricing-table-container .price-column-container.border-right {
        border-right: 1px solid #ccc;
    }
    .pricing-content-2 .pricing-table-container .price-column-container.border-left {
        border-left: 1px solid #ccc;
    }
    .pricing-content-2 .pricing-table-container .price-column-container.border-top {
        border-top: 1px solid #ccc;
    }
    .pricing-content-2 .pricing-table-container .price-column-container.featured-price {
        margin: 0;
        padding: 89px 0;
        border: 1px solid;
        border-bottom: 4px solid;
        border-color: #ccc;
    }
    .pricing-content-2 .pricing-table-container .price-column-container.featured-price>.price-feature-label {
        position: absolute;
        top: 0;
        left: 50%;
        display: inline-block;
        width: 110px;
        margin: 0 0 0 -60px;
        padding: 7px 15px;
        color: #fff;
        font-weight: 300;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-head>h2 {
        letter-spacing: 1px;
        font-weight: 600;
        font-size: 18px;
        color: #ACB5C3;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-head>h2.opt-pricing-5 {
        padding: 7px 15px;
        display: inline;
        margin: 0 auto 20px auto;
        font-size: 16px;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-pricing>h3 {
        font-size: 60px;
        position: relative;
        font-weight: 600;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-pricing>h3>.price-sign {
        font-size: 24px;
        position: absolute;
        margin-left: -15px;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-pricing>p {
        margin-top: 0;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-content {
        color: #333;
        font-weight: 300;
        font-size: 16px;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-content .row {
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid;
        border-color: #eee;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-content .row:first-child {
        border-top: 1px solid;
        border-color: #eee;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-footer {
        padding: 40px 0 0 0;
    }
    .pricing-content-2 .pricing-table-container .price-column-container>.price-table-footer>.featured-price {
        font-size: 20px;
        font-weight: 300;
        border-bottom: 3px solid #3FABA4;
    }
    @media (max-width: 991px) {
        .pricing-content-2 .price-column-container {
            border-left: 1px solid;
            border-right: 1px solid;
            border-color: #ccc;
        }
    }
    @media (max-width: 730px){
        .newMainTableContent{
            overflow-x: scroll;
        }
        #newMainTableContent{
            overflow-x: scroll;
        }
    }
</style>
@stop
@section('content')
@include('receives.modal')
<!-- BEGIN CONTENT -->
<div id="print-modal">
    <report-modal :pdf-route="pdfRoute" :excel-route="excelRoute" v-if="is_show" :value-type="'memberExchangeList'" @closed="closeModal">
        <div slot="body">
            <div class="row">
                <div class="form-group">
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <input type="hidden" name="id" value="{{$memberExchange->id}}" />
                </div>
            </div>
        </div>
    </report-modal>
</div>
<div class="row">
    @if (count($errors) > 0)
    <div class="m-heading-1 border-red m-bordered errors-action">
        <h4 class="error-title"><strong>Whoops!</strong> There were some problems with your input</h4>
        <ul class="error-body">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="portlet light bg-inverse">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-equalizer font-green-haze"></i>
                <span class="caption-subject font-green-haze bold uppercase">@lang('layout.TransferInformation')</span>
            </div>
        </div>
        <div class="portlet-body form" id="item-service" style="margin-bottom:50%;">
            <div class="caption" align="center">
                <span class="caption-subject font-green-sharp bold uppercase">@lang('layout.MemberExchangeShow')</span>
            </div>
            <br><br>
            <div class="pull-right">
                <span id="anchore-modal">
                    <a href="#" @click.prevent="showModal" id="" class="btn  btn-success">
                        <i class="fa fa-print"></i>
                    </a>
                </span>
            </div>
            <div class="portlet light portlet-fit">
                <div class="portlet-body">
                    <div class="pricing-content-1">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="price-column-container border-active">
                                    <div class="price-table-head bg-dark">
                                        <h2 class="no-margin">@lang('layout.Member')</span></h2>
                                    </div>
                                    <div class="arrow-down"></div>
                                    <div class="price-table-pricing">
                                        <h4>
                                            <span>{{$memberExchange->member}}</span>
                                        </h4>
                                    </div>
                                    <div class="newMainTableContent">
                                        <table class="table table-bordered table-striped" id="newMainTableContent">
                                            <tr style="background-color: rgb(80, 129, 141) !important;color: white;">
                                                <th class="text-center">@lang('layout.Number')</th>
                                                <th class="text-center">@lang('layout.Type')</th>
                                                <th class="text-center">@lang('layout.OutAmount')</th>
                                                <th class="text-center">@lang('layout.Currency')</th>
                                                <th class="text-center">@lang('layout.Rate')</th>
                                                <th class="text-center">@lang('layout.InAmount')</th>
                                                <th class="text-center">@lang('layout.Currency')</th>
                                                <th class="text-center">@lang('layout.Rate')</th>
                                                <th class="text-center @if(!getCustomeForm('memberExchange','date')) displayNone @endif">@lang('layout.Date')</th>
                                                <th class="text-center @if(!getCustomeForm('memberExchange','hour')) displayNone @endif">@lang('layout.Hour')</th>
                                                <th class="text-center @if(!getCustomeForm('memberExchange','bilanceDate')) displayNone @endif"">@lang('layout.BilanceDate')</th>
                                                @if(systemConfig()[29] == 1)
                                                    <th colspan="1" class="text-center @if(!getCustomeForm('memberExchange','transactionConfirm')) displayNone @endif">@lang('layout.TransactionConfirm') </th>
                                                @endif
                                                <th class="text-center @if(!getCustomeForm('memberExchange','monetarySource')) displayNone @endif">@lang('layout.MonetarySource')</th>
                                                <th class="text-center @if(!getCustomeForm('memberExchange','transactionType')) displayNone @endif">@lang('layout.TransactionType')</th>
                                                <th class="text-center @if(!getCustomeForm('memberExchange','ReferenceName')) displayNone @endif">@lang('layout.ReferenceName')</th>
                                                <th class="text-center @if(!getCustomeForm('memberExchange','ReferenceNumber')) displayNone @endif">@lang('layout.ReferenceNumber')</th>
                                                <th class="text-center @if(!getCustomeForm('memberExchange','description')) displayNone @endif">@lang('layout.Description')</th>
                                            </tr>
                                            <tr>
                                                <td class="text-center" style="vertical-align: middle;"><p>{{$memberExchange->number}}</p></td>
                                                <td class="text-center" style="vertical-align: middle;"><p>{!! __('layout.'.$memberExchange->type) !!}</p></td>
                                                <td class="text-center" style="vertical-align: middle;"><p>{{myRound($memberExchange->pamount)}}</p></td>
                                                <td class="text-center" style="vertical-align: middle;"><p>{{$memberExchange->punit}}</p></td>
                                                <td class="text-center" style="vertical-align: middle;"><p>{{myRound($memberExchange->prate)}}</p></td>
                                                <td class="text-center" style="vertical-align: middle;"><p>{{myRound($memberExchange->amount)}}</p></td>
                                                <td class="text-center" style="vertical-align: middle;"><p>{{$memberExchange->unit}}</p></td>
                                                <td class="text-center" style="vertical-align: middle;"><p>{{$memberExchange->rate}}</p></td>
                                                <td class="text-center @if(!getCustomeForm('memberExchange','date')) displayNone @endif" style="vertical-align: middle;"><p>{{convertDate($memberExchange->date)}}</p></td>
                                                <td class="text-center @if(!getCustomeForm('memberExchange','hour')) displayNone @endif" style="vertical-align: middle;">
                                                    <p>
                                                        @if(getHourType() == 24)
                                                        {{ (($memberExchange->hour != null)?(date_format(date_create($memberExchange->hour), 'H:i')):'') }}
                                                        @else
                                                        {{ (($memberExchange->hour != null)?(date_format(date_create($memberExchange->hour), 'h:i a')):'') }}
                                                        @endif
                                                    </p>
                                                </td>
                                                <td class="text-center @if(!getCustomeForm('memberExchange','bilanceDate')) displayNone @endif">
                                                    {{convertDate($memberExchange->bilance_date)}}
                                                </td>
                                                @if(systemConfig()[29] == 1)
                                                    <td class="text-center @if(!getCustomeForm('memberExchange','transactionConfirm')) displayNone @endif" style="vertical-align: middle;">
                                                        <p>
                                                            @if($memberExchange->transaction_confirm)
                                                                @lang('layout.yes')
                                                            @else
                                                                @lang('layout.no')
                                                            @endif
                                                        </p>
                                                    </td>
                                                @endif
                                                <td class="text-center @if(!getCustomeForm('memberExchange','monetarySource')) displayNone @endif" style="vertical-align: middle;"><p>{{$memberExchange->monetary_source}}</p></td>
                                                <td class="text-center @if(!getCustomeForm('memberExchange','transactionType')) displayNone @endif" style="vertical-align: middle;"><p>{{$memberExchange->trans_type}}</p></td>
                                                <td class="text-center @if(!getCustomeForm('memberExchange','ReferenceName')) displayNone @endif" style="vertical-align: middle;"><p>{{$memberExchange->reference_name}}</p></td>
                                                <td class="text-center @if(!getCustomeForm('memberExchange','ReferenceNumber')) displayNone @endif" style="vertical-align: middle;"><p>{{$memberExchange->reference_number}}</p></td>
                                                <td class="text-center @if(!getCustomeForm('memberExchange','description')) displayNone @endif" style="vertical-align: middle;">
                                                    <p>
                                                        {!! wordwrap($memberExchange->description,40,"<br/>\n",false) !!}
                                                    </p>
                                                </td>
                                            </tr>
                                        </table>
                                        {{-- <div class="row mobile-padding">
                                            <div class="col-md-4 col-xs-3 text-right mobile-padding"></div>
                                            <div class="col-md-8 col-xs-9 text-left mobile-padding"></div>
                                            <div class="col-md-4 col-xs-3 text-right mobile-padding"></div>
                                            <div class="col-md-8 col-xs-9 text-left mobile-padding"></div>
                                            <div class="row mobile-padding">
                                                <div class="col-md-4 col-xs-3 text-right mobile-padding">
                                                    
                                                </div>
                                                <div class="col-md-8 col-xs-9 text-left mobile-padding">
                                                    
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-xs-3 text-right mobile-padding"></div>
                                            <div class="col-md-8 col-xs-9 text-left mobile-padding"></div>
                                            <div class="row mobile-padding">
                                                <div class="col-md-4 col-xs-3 text-right mobile-padding">
                                                    
                                                </div>
                                                <div class="col-md-8 col-xs-9 text-left mobile-padding">
                                                    
                                                </div>
                                            </div>
                                            <div class="row mobile-padding">
                                                <div class="col-md-4 col-xs-3 text-right mobile-padding">
                                                    
                                                </div>
                                                <div class="col-md-8 col-xs-9 text-left mobile-padding">
                                                    
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-xs-3 text-right mobile-padding"></div>
                                            <div class="col-md-8 col-xs-9 text-left mobile-padding"></div>
                                            <div class="row mobile-padding">
                                                <div class="col-md-4 col-xs-3 text-right mobile-padding">
                                                    
                                                </div>
                                                <div class="col-md-8 col-xs-9 text-left mobile-padding">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mobile-padding">
                                            <div class="col-md-4 col-xs-3 text-right mobile-padding"></div>
                                            <div class="col-md-8 col-xs-9 text-left mobile-padding"></div>
                                        </div>
                                        <div class="row mobile-padding">
                                            <div class="col-md-4 col-xs-3 text-right mobile-padding">     
                                            </div>
                                            <div class="col-md-8 col-xs-9 text-left mobile-padding">       
                                            </div>
                                        </div>
                                        @if(systemConfig()[29] == 1)
                                            <div class="row mobile-padding">
                                                <div class="col-md-4 col-xs-3 text-right mobile-padding">
                                                    
                                                </div>
                                                <div class="col-md-8 col-xs-9 text-left mobile-padding">
                                                    
                                                </div>
                                            </div>
                                        @endif
                                        <div class="row mobile-padding">
                                            <div class="col-md-4 col-xs-3 text-right mobile-padding">
                                                
                                            </div>
                                            <div class="col-md-8 col-xs-9 text-left mobile-padding">
                                                
                                            </div>
                                        </div> --}}
                                    </div>
                                    <div class="arrow-down arrow-grey"></div>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <br/>
                        <div class="row hidden-print">
                            <div class="tabbable tabbable-tabdrop">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#tab2" data-toggle="tab" id="tab_payment">@lang('layout.Attachments')</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab2">
                                        <div class="tab-pane" id="tab2">
                                            <div class="portlet light bordered">
                                                <div class="portlet-title">
                                                    <div class="caption font-dark">
                                                        <i class="icon-settings font-dark"></i>
                                                        <span class="caption-subject bold uppercase">@lang('layout.Attachments')</span>
                                                    </div>
                                                </div>
                                                <div class="portlet-body">
                                                    <div class="portlet light" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px;">
                                                        <div class="portlet-body">
                                                            <form role="form" action="{{route('attachment.store')}}" method="post" enctype="multipart/form-data">
                                                                @csrf
                                                                <input type="hidden" name="redirect_route" value="memberExchange.show">
                                                                <input type="hidden" name="foreign_data_id" value="{{$memberExchange->id}}">
                                                                <input type="hidden" name="path" value="uploads/member_exchanges">
                                                                <input type="hidden" name="table_name" value="member_exchanges">
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <div class="form-group">
                                                                            <label class="control-label">@lang('layout.AttachmentTitle')</label>
                                                                            <input type="text" name="title" class="form-control">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6">
                                                                        <div class="form-group">
                                                                            <label class="control-label">@lang('layout.Description')</label>
                                                                            <textarea name="description" class="form-control" rows="8" style="resize: none;"></textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6">
                                                                        <div class="form-group">
                                                                            <div class="fileinput fileinput-new" data-provides="fileinput" style="width: 100%;">
                                                                                <div>
                                                                                    <span class="btn default btn-file">
                                                                                        <span class="fileinput-new">@lang('layout.SelectFile')</span>
                                                                                        <span class="fileinput-exists">@lang('layout.Change')</span>
                                                                                        <input type="hidden" value="" name=""><input type="file" name="photo"> 
                                                                                    </span>
                                                                                    <a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput"> @lang('layout.Remove') </a>
                                                                                </div>
                                                                                <div class="fileinput-new thumbnail" style="width: 100%; height: 165px;">
                                                                                    <img src="" alt=""> </div>
                                                                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 100%; max-height: 165px; line-height: 10px;"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="margin-top-10 text-center">
                                                                    <button type="button" onclick="regForm(this)" class="btn green"> @lang('layout.Submit') </button>
                                                                    <a href="{{route('receive.index')}}" class="btn default">@lang('layout.Cancel')</a>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <table class="table table-striped table-bordered table-hover" id="attachment">
                                                        <thead>
                                                            <tr>
                                                                <th>@lang('layout.AttachmentTitle')</th>
                                                                <th>@lang('layout.Description')</th>
                                                                <th>@lang('layout.Action')</th>
                                                            </tr>
                                                        </thead>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@include('print.modal')
@push('scripts')
<script>
    $('#excell_all').on('click', function(e) {
        $('#show-modal2').click();
        e.preventDefault();
    })
    var vm = new Vue({
        el: '#print-modal',
        data: {
            is_show: false,
            pdfRoute: '{!!route("memberExchange.report") !!}',
            excelRoute: '{!! route("memberExchange.report") !!}'
        },
        methods: {
            closeModal: function() {
                this.is_show = !this.is_show;
            }
        }
    });
    var anchor = new Vue({
        el: '#anchore-modal',
        methods: {
            showModal: function() {
                console.log('trr')
                vm.$data.is_show = true;
            }
        }
    });
    $(document).ready(function() {
        $.fn.dataTable.ext.errMode = '{{dataTableWarning()}}';
        $('#attachment').DataTable({
            ajax: {
                url: '{{route("memberExchange.show",$memberExchange->id)}}',
                data: {
                    type: 'attachment'
                }
            },
            scrollCollapse: true,
            responsive: '{{responsiveDataTable()}}',
            pagingType: '{{paginationType()}}',
            serverSide: true,
            paging: true,
            columns: [
                {
                    data: 'title',
                    name: 'attachments.title'
                },
                {
                    data: 'description',
                    name: 'attachments.description'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                },
            ]
        });
    });
</script>
@endpush