@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
    @include('web.layouts.header')


        <section class="cart_pg section">
            <div class="container">
                <form method="post" action="{{route('checkouting.method')}}" onsubmit="formAction(this)">
                    @CSRF
                    <h2 class="sec_title text-uppercase color-primary fw-bold mb-5">
                        {{ __('web.payment_method') }}
                        <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block " alt="">
                    </h2>
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="inner">
                                <div class="row mt-4">
                                    <div class="col-md-4">
                                        <div class="form-check mb-4">
                                            <input class="form-check-input" type="radio" name="status" value="when_recieving" id="paymentRadio1">
                                            <label class="form-check-label" for="paymentRadio1">
                                                <img src="{{asset($ways[2]->image)}}" alt="" class="sm_img me-2"/> {{$ways[2]->name}}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="status" value="online" id="paymentRadio2">
                                            <label class="form-check-label" for="paymentRadio2">
                                                <img src="{{asset($ways[1]->image)}}" alt="" class="sm_img me-2"/> {{$ways[1]->name}}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="status" value="installment" id="paymentRadio3">
                                            <label class="form-check-label" for="paymentRadio3">
                                                <img src="{{asset($ways[0]->image)}}" alt="" class="sm_img me-2"/> {{$ways[0]->name}}
                                            </label>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div id="installment" style="display: none">
                                <h2 class="sec_title text-uppercase color-primary fw-bold my-5">
                                    {{ __('web.installment') }}
                                    <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block " alt="">
                                </h2>
                                <div class="inner">
                                    <div class="row">
                                        @foreach($installments as $row)
                                            <div class="col-md-4">
                                                <div class="form-check mb-4">
                                                    <input class="form-check-input" type="radio" name="installment_id" value="{{$row->id}}" id="installmentsRadio{{$row->id}}">
                                                    <label class="form-check-label" for="installmentsRadio{{$row->id}}">
                                                        <img src="{{asset($row->image)}}" alt="" class="sm_img me-2"/> {{$row->name}}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <h2 class="sec_title text-uppercase color-primary fw-bold my-5">
                                {{ __('web.shipping_method') }}
                                <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block " alt="">
                            </h2>
                            @if($user->role == 'company')
                                <div class="inner">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-check mb-4">
                                                <input class="form-check-input" type="radio" name="shipping_status" value="shipping_company"  id="shippingType1">
                                                <label class="form-check-label" for="shippingType1"> {{ __('web.shipping_company') }}   </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-check mb-4">
                                                <input class="form-check-input" type="radio" name="shipping_status" value="shipping_city_bike_driver"  id="shippingType2" >
                                                <label class="form-check-label" for="shippingType2"> {{ __('web.shipping_via_citybike') }}   </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-check mb-4">
                                                <input class="form-check-input" type="radio" name="shipping_status" value="shipping_driver"  id="shippingType3" >
                                                <label class="form-check-label" for="shippingType3"> {{ __('web.shipping_drivers') }}   </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4" id="shippingUrCompBox">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label class="small fw-bold mb-2 d-block">{{ __('web.policy_number') }}</label>
                                                <input type="text" name="policy_number" class="form-control" placeholder=""/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4" id="shippingUrDriverBox">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label class="small fw-bold mb-2 d-block"> {{ __('web.representative_name') }} </label>
                                                <input type="text" name="representative_name" class="form-control" placeholder=""/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="inner">
                                <div class="row">
                                    @foreach($shippings as $row)
                                        <div class="col-md-4">
                                            <div class="form-check mb-4">
                                                <input class="form-check-input" type="radio" name="shipping_id" value="{{$row->id}}" id="shippingRadio{{$row->id}}">
                                                <label class="form-check-label" for="shippingRadio{{$row->id}}">
                                                    <img src="{{asset($row->image)}}" alt="" class="sm_img me-2"/> {{$row->name}}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            @endif
                            <div class="in-flex mt-5 flex-wrap" >
                                <a href="{{$back_action}}" class="butn white_butn fw-bold">
                                    <i class="fas fa-angle-left me-3"></i>  {{ __('web.back') }}
                                </a>

                                <button type="submit" class="butn primary_butn fw-bold">
                                    {{ __('web.continue') }} <i class="fas fa-angle-right ms-3"></i>
                                </button>
                            </div>
                        </div>

                    </div>


                </form>
            </div>
        </section>

    <!-- Start section -->
        @include('web.layouts.newsletter')
    </main>

@section('inject_js')
    <script>
        $("#shippingUrCompBox").hide();
        $("#shippingUrDriverBox").hide();

        $('input[name="status"]').click(function() {
            if ($(this).attr("value") == "installment") {
                $("#installment").show();
            } else {
                $("#installment").hide();
            }
        });

        $('input[name="shipping_status"]').click(function() {
            if ($(this).attr("value") == "shipping_company") {
                $("#shippingUrCompBox").show();
                $("#shippingUrDriverBox").hide();
            }  else if ($(this).attr("value") == "shipping_driver") {
                $("#shippingUrDriverBox").show();
                $("#shippingUrCompBox").hide();
            } else {
                $("#shippingUrDriverBox").hide();
                $("#shippingUrCompBox").hide();
            }
        });
    </script>
@endsection

@stop
