@extends('frontend.layouts.template')
@section('stylesheet')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
<!-- START SECTION BREADCRUMB -->
<div class="breadcrumb_section bg_gray page-title-mini">
    <div class="container"><!-- STRART CONTAINER -->
        <div class="row align-items-center">
        	<div class="col-md-6">
                <div class="page-title">
            		<h1>{{ trans('label.checkout') }}</h1>
                </div>
            </div>
            <div class="col-md-6">
                <ol class="breadcrumb justify-content-md-end">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ trans('label.home')}}</a></li>
                    <li class="breadcrumb-item active">{{ trans('label.checkout') }}</li>
                </ol>
            </div>
        </div>
    </div><!-- END CONTAINER-->
</div>
<!-- END SECTION BREADCRUMB -->

<!-- START MAIN CONTENT -->
<div class="main_content">

    <!-- START SECTION SHOP -->
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    @if ( !auth()->check() )
                        <div class="toggle_info">
                            <span><i class="fas fa-user"></i>{{ trans('label.returning_customer') }}? <a href="#loginform" data-toggle="collapse" class="collapsed" aria-expanded="false">{{ trans('label.click_here_to_login') }}</a></span>
                        </div>
                        <div class="panel-collapse collapse login_form" id="loginform">
                            <div class="panel-body">
                                <p>{{ trans('msg.if_you_have_shipped') }}</p>
                                <form method="post" action="{{ url('account/login') }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                    <input type="hidden" name="_page" value="checkout" />
                                    <div class="form-group">
                                        <input type="text" required="" class="form-control" name="email" placeholder="Username Or Email">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" required="" type="password" name="password" placeholder="Password">
                                    </div>
                                    <div class="login_footer form-group">
                                        <div class="chek-form">
                                            <div class="custome-checkbox">
                                                <input class="form-check-input" type="checkbox" name="remember" id="remember" value="">
                                                <label class="form-check-label" for="remember"><span>{{ trans('label.remember_me') }}</span></label>
                                            </div>
                                        </div>
                                        <a href="#">{{ trans('label.forgot_password') }}?</a>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-fill-out btn-block" name="login">{{ trans('label.login') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-lg-6">

                </div>
            </div>
            @if ( auth()->guest() || auth()->user()->login_type != 'staff-event' )
            <div class="row">
                <div class="col-12">
                    <div class="medium_divider"></div>
                    <div class="divider center_icon"><i class="linearicons-credit-card"></i></div>
                    <div class="medium_divider"></div>
                </div>
            </div>
            @endif
            @if (\Session::has('error'))
            <div class="alert alert-danger">
                <h4>{{ trans('label.error') }}</h4>
                <p>{!! \Session::get('error') !!}</p>
            </div>
        @endif
            <form id="checkout-form" method="post" action="{{ url('cart/checkout') }}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="hidden" id="login_type" value="{{ auth()->check() ? auth()->user()->login_type : '' }}">

                <div class="row">
                    <div class="col-md-6">
                        @if ( auth()->guest() || auth()->user()->login_type != 'staff-event' )
                            <div class="heading_s1">
                                <h4>{{ auth()->guest() ? trans('label.registration') : trans('label.billing_details') }}</h4>
                            </div>
                            @include('frontend.cart.form-shipping')
                            <div class="ship_detail m-0">
                                <div class="form-group">
                                    <div class="chek-form">
                                        <div class="custome-checkbox">
                                            <input class="form-check-input" type="checkbox" value="1" name="address_copy" id="address_copy">
                                            <label class="form-check-label label_info" for="address_copy"><span>{{ trans('label.copy_shipping_address_from_billing_address') }}</span></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="chek-form">
                                        <div class="custome-checkbox">
                                            <input class="form-check-input" type="checkbox" name="differentaddress" id="differentaddress">
                                            <label class="form-check-label label_info" for="differentaddress"><span>{{ trans('label.ship_to_a_different_address') }}?</span></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="different_address"></div>
                            </div>
                        @endif
                        @if(auth()->check() && auth()->user()->level == 'staff')
                            @if (auth()->user()->login_type == 'staff-event')
                                <div class="heading_s1">
                                    <h4>{{ trans('label.wbs_code') }}</h4>
                                </div>
                                <div class="form-group">
                                    <div class="chek-form mb-3">
                                        <div class="custome-radio">
                                            <input class="form-radio-input wbs_radio" type="radio" name="wbs_choice" value="yes"  id="wbs_has">
                                            <label class="form-radio-label label_info" for="wbs_has"><span>{{ trans('label.with_wbs_code') }}</span></label>
                                        </div>
                                        <input type="text" class="form-control" name="wbs_code" id="wbs_code" placeholder="{{ trans('label.enter_wbs') }}" disabled />
                                    </div>
                                    <div class="chek-form">
                                        <div class="custome-radio">
                                            <input class="form-radio-input  wbs_radio" type="radio" value="no" name="wbs_choice" id="no_wbs_code">
                                            <label class="form-radio-label label_info" for="no_wbs_code"><span>{{ trans('label.no_wbs_code') }}</span></label>
                                        </div>
                                        <input type="text" class="form-control" name="wbs_remark" id="wbs_remark" disabled placeholder="{{ trans('label.enter_remark') }}" />
                                    </div>
                                    
                                </div>
                                <div class="heading_s1">
                                    <h4>{{ trans('label.approver') }}</h4>
                                </div>
                                <div class="form-group">
                                    @php
                                        $approvers = approvers( auth()->user()->team_code );
                                    @endphp
                                    @if ($approvers)
                                        @foreach ($approvers as $ap)
                                            <div class="radio-form mb-1">
                                                <div class="custome-radio">
                                                    <input class="form-radio-input" type="radio" name="approver" id="approver_{{ $ap->id }}" value="{{ $ap->id }}">
                                                    <label class="form-radio-label label_info" for="approver_{{ $ap->id }}"><span>{{ $ap->name }}</span></label>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                    
                                </div>
                            @endif

                            <div class="form-group">
                                <div class="chek-form">
                                    <div class="custome-checkbox">
                                        <input class="form-check-input" {{ auth()->user()->login_type == 'staff-event' ? 'checked' : '' }} type="checkbox" name="shipping_head" id="free">
                                        <label class="form-check-label label_info" for="free"><span>{{ trans('label.ship_to_allianz_ayudhya_head_office') }}</span></label>
                                    </div>
                                </div>
                                <div style="font-size: 14px;">
                                    {{ trans('msg.company_shipping_day')}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="label_info">{{ trans('label.floor') }}</label>
                                <input type="text" class="form-control" name="floor" id="floor" disabled />
                            </div>
                        @endif
                        <div class="heading_s1">
                            <h4>{{ trans('label.additional_information') }}</h4>
                        </div>
                        <div class="form-group mb-0">
                            <textarea rows="5" name="additional" class="form-control" placeholder="{{ trans('label.order_notes') }}"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="order_review">
                            <div class="heading_s1">
                                <h4>{{ trans('label.your_orders') }}</h4>
                            </div>
                            <div class="table-responsive order_table">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ trans('label.product') }}</th>
                                            <th>{{ trans('label.total') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if ($carts)
                                            @foreach ($carts as $cart)
                                            @php
                                                $subtotal += ($cart->price * $cart->quantity);
                                                $shipping_price += $cart->shipping_price;
                                            @endphp
                                            <tr>
                                                <td>{{ $cart->product_name }} <span class="product-qty">x {{ $cart->quantity }}</span></td>
                                                <td>฿{{ nb($cart->price * $cart->quantity,2) }}</td>
                                            </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                    <tfoot>
                                        @if ( auth()->check() && auth()->user()->level == 'staff' && auth()->user()->login_type != 'staff-event' )
                                        @php
                                            $discount = $subtotal * 10 / 100;
                                            $subtotal = $subtotal - $discount;
                                        @endphp
                                            <tr>
                                                <th>{{ trans('label.staff_discount') }}</th>
                                                <td>{{ nb( $discount,2) }}</td>
                                            </tr>
                                        @endif
                                        <tr>
                                            <input type="hidden" name="discount" value="{{ $discount }}" />
                                            <input type="hidden" name="shipping_price" value="{{ $shipping_price }}" />

                                            <th>{{ trans('label.subtotal') }}</th>
                                            <td id="sub_total" class="product-subtotal">฿{{ nb( $subtotal,2) }}</td>
                                        </tr>
                                        @if ( auth()->guest() || ( auth()->check() && auth()->user()->login_type != 'staff-event') )
                                        <tr>
                                            <th>{{ trans('label.shipping') }}</th>
                                            <th id="shipping_price">{{ nb( $shipping_price,2 )}}</th>
                                            {{-- <td>Free Shipping</td> --}}
                                        </tr>
                                        @endif
                                        {{-- Start Coupon Code --}}
                                        @if ( auth()->guest() || auth()->user()->login_type != 'staff-event' )
                                            <tr class="hide">
                                                <td colspan="2">
                                                    @if ( auth()->guest() || auth()->user()->login_type != 'staff-event' )
                                                    <div class="toggle_info">
                                                        <span><i class="fas fa-tag"></i>{{ trans('label.have_a_coupon')}}<a href="#coupon" data-toggle="collapse" class="collapsed" aria-expanded="false">{{ trans('label.click_here_to_enter_your_code') }}</a></span>
                                                    </div>
                                                    <div class="panel-collapse collapse coupon_form" id="coupon">
                                                        <div class="panel-body">
                                                            <p>{{ trans('label.if_you_have_coupon') }}</p>
                                                            <div class="coupon field_form input-group">
                                                                <input type="text" value="" class="form-control" placeholder="Enter {{ trans('label.coupon_code') }}..">
                                                                <div class="input-group-append">
                                                                    <button class="btn btn-fill-out btn-sm" type="submit">{{ trans('label.apply_coupon') }}</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endif
                                        {{-- End Coupon Code --}}
                                        <tr>
                                            @php
                                                $net = $subtotal + $shipping_price;
                                            @endphp
                                            <th>{{ trans('label.totals') }}</th>
                                            <td id="total" class="product-subtotal">฿{{ nb( $net,2) }}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="payment_method">
                                <div class="heading_s1">
                                    <h4>{{ trans('label.payment') }}</h4>
                                </div>
                                <div class="payment_option">
                                    <div class="custome-radio">
                                        <input class="form-check-input" required="" type="radio" name="payment_option" id="payment_option" value="bank-transfer" checked="">
                                        <label class="form-check-label" for="exampleRadios3">{{ trans('label.direct_bank_transfer') }}</label>
                                        <p data-method="option3" class="payment-text">{{ trans('msg.payment_description') }} </p>
                                    </div>
                                </div>
                            </div>
                            @if ( count($carts) > 0 )
                                <button type="submit" class="btn btn-fill-out btn-block">{{ trans('label.place_order') }}</button>
                            @endif
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- END SECTION SHOP -->

</div>
<!-- END MAIN CONTENT -->
@endsection
@section('modals')
    @include('frontend.cart.inc-modal-change-address')
@endsection
@section('javascript')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
    (function($){
        let shipping_province = $('#shipping_province');

        shipping_province.select2();

        // Bind an event
        shipping_province.on('select2:select', function (e) {
            amphures_data( $(this).val(), '#shipping_city' ).then( function(city){
                let shipping_city = $('#shipping_city');
                let shipping_district = $('#shipping_district');
                shipping_district.val('').trigger('change');
                shipping_city.val('').trigger('change');
                $('#shipping_zipcode').val( '' );
                shipping_district.select2();
                shipping_city.select2();
                shipping_city.on('select2:select', function (e) {
                    const _this = $(this);
                    districts_data( $(this).val(), '#shipping_district' ).then( function(districts){
                        const _districs = districts.data;
                            // console.log('promise res : ', _districs, ' : ' );
                            shipping_district.on('select2:select',function(e){
                                const district = _districs.find(x => x.id == $(this).val() );
                                if( district )
                                    $('#shipping_zipcode').val( district.zip_code );
                            })
                    });
                });
            });

        });

        function click_fee(){
            $('#free').on('click', function(e){
                if( $(this).is(':checked') ){
                    // $('.ship_detail').hide();
                    $('.different_address').html('');
                    $('#differentaddress').prop('checked',false);
                    $('#shipping_price').html('Free shipping');
                    $('input[name="shipping_price"]').val(0);
                    $('#total').html(`${$('#sub_total').html()}`)
                }else{
                    // $('.ship_detail').show();
                    let shipping_price = '{{ nb($shipping_price,2) }}';
                    let sub_total = '{{ nb( $subtotal,2) }}';
                    $('#shipping_price').html(`฿${shipping_price}`);
                    $('input[name="shipping_price"]').val({{$shipping_price}});
                    $('.different_address').show();
                    $('#total').html(`฿{{nb( $subtotal+$shipping_price,2)}}`)
                }
                console.log('click free ', $(this).is(':checked') );
            });
            $('#address_copy').on('change',function(e){
                if( $(this).is(':checked') ){
                    $('#differentaddress').prop('checked',false);
                    $('.different_address').html('');
                }
            });
            $('#differentaddress').on('change',function(e){
                if( $(this).is(':checked') ){
                    $('#address_copy').prop('checked',false);
                }
            });
        }
        click_fee();

    }(jQuery));
    </script>
    @if( Auth::check() )
        <script>
            (function($){
                @if( old('shipping_head') !== null )
                    let shipping_head = "{{ old('shipping_head') }}";
                    console.log('free clicked ', shipping_head);
                    $('#free').trigger('click');
                @endif
                @if( !$address['shipping'] )
                    alert("{{ trans('msg.please_add_billing_address') }}");
                    window.location.href = "{{ url('account/profile#address') }}"
                @endif
                @if( auth()->user()->active_password == 'N' )
                    alert("{{ trans('msg.please_change_password') }}");
                    window.location.href = "{{ url('account/profile#account-detail') }}"
                @endif

                $('#shipping_province').on('select2:select',function(e){
                    console.log('province id : ', $(this).val() );
                    amphures_data( $(this).val(), '#shipping_city' );
                })
                $('.wbs_radio').on('click',function(e){
                    const _this = $(this);
                    const val = _this.val();
                    const code = $('#wbs_code')
                    const remark = $('#wbs_remark')
                    console.log('val : ',val);
                    if( _this.is(':checked')){
                        console.log('checked val : ', val );
                        if( val == 'yes'){
                            code.prop('disabled',false);
                            remark.prop('disabled',true);
                        }else{
                            code.prop('disabled',true);
                            remark.prop('disabled',false);
                        }
                    }
                });
                if( $('#free').is(':checked')){
                    $('#floor').prop('disabled',false);
                }else{
                    $('#floor').prop('disabled',true);
                }

                $('#free').on('click',function(e){
                    const _this = $(this);
                    const floor = $('#floor');
                    if( _this.is(':checked')){
                        floor.prop('disabled',false);
                    }else{
                        floor.prop('disabled',true);
                    }
                });

                $('#checkout-form').on('submit',function(e){
                    console.log('submit form')
                    let msg = [];
                    let ans = 0;
                    const wbs_choice    = $('input[name="wbs_choice"]:checked').val();
                    const approver    = $('input[name="approver"]:checked').val();
                    const wbs_code      = $('#wbs_code');
                    const wbs_remark    = $('#wbs_remark');
                    const login_type    = $('#login_type');
                    console.log('login_type : ', login_type.val() );
                    if( login_type.val() == 'staff-event'){
                        if( wbs_choice ){
                            if( wbs_choice == 'yes' ){
                                if(!wbs_code.val() ){
                                    wbs_code.addClass('is-invalid');
                                    msg.push("* {{ trans('msg.please_enter') }} {{ trans('label.wbs_code') }}");
                                    ans++;
                                }else{
                                    if( wbs_code.hasClass('is-invalid') )
                                        wbs_code.removeClass('is-invalid');
                                }
                            }
                            if( wbs_choice == 'no'){ 
                                if( !wbs_remark.val() ){
                                    wbs_remark.addClass('is-invalid');
                                    msg.push("* {{ trans('msg.please_enter_wbs_remark') }}");
                                    ans++;
                                }else{
                                    if( wbs_remark.hasClass('is-invalid') )
                                    wbs_remark.removeClass('is-invalid');
                                }
                            }
                        }else{
                            msg.push("* {{ trans('msg.please_select') }} {{ trans('label.wbs_code') }}");
                            ans++;
                        }
                        if( !approver ){
                            msg.push("* {{ trans('msg.please_select') }} {{ trans('label.approver') }}" );
                            ans++;
                        }
                    }
                    console.log('free : ', $('#free').is('checked') );
                    if( $('#free').is(':checked') && !$('#floor').val() ){
                        msg.push("* {{ trans('msg.please_enter_floor') }}" );
                        $('#floor').addClass('is-invalid');
                        ans++;
                    }else{
                        if( $('#floor').hasClass('is-invalid') )
                            $('#floor').removeClass('is-invalid');
                    }
                    
                    if( ans > 0 ){
                        alert( msg.join("\n") );
                        return false;
                    }
                })
            }(jQuery));
        </script>
    @endif
@endsection