@extends('admin.layout')
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.0/nouislider.min.css" rel="stylesheet">
@section('custom-style')
<style>
    .alert {
        padding: 2px 10px;
    }

    /*slider styling */
    .noUi-target {
        margin: 20px 0;
        border-radius: 30px;
    }

    .payment-method-btn {
        background-color: orange;
        padding: 15px 20px;
        border-radius: 30px;
        border: none;
        outline: none;
    }


    .button-checkbox {
        display: inline-block;
        position: relative;
        background-color: orange;
        padding: 15px 20px;
        margin: 10px;
        border-radius: 30px;
        border: none;
        outline: none;
        color: #fff;
        font-weight: 700;
    }

    .button-checkbox input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .button-checkbox:has(input[type="radio"]:checked) {
        outline: 2px solid #367FA9;
    }

    @media(max-width:767px){
        .nw-par-div{
            flex-direction:column;
        }
        .nw-div{
            width:100% !important;
        }

        .mb-line-one-span{
            font-size:17px;
            width:100%;
            display:block !important; 
        }
        .mb-line-two-span{
            font-size:15px;
            width:100%;
            display:block !important; 
        }
    }
</style>
@endsection
@section('content')
<section class="content-header">
    <h3 class="h3-mob-spec">
        <span class="mb-line-one-span"> Setup your preferred payment method</span> <span class="mb-line-two-span">(will be used for payouts and any resultant withdrawals)</span>

    </h3>
</section>

<!-- Main content -->
<section class="content">
    <!-- Info boxes -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Select one from your setup payment methods
                    </h3>
                </div>
                @if ($errors->any())
                    <div>
                        @foreach ($errors->all() as $error)
                            <li class="alert alert-danger">{{ $error }}</li>
                        @endforeach
                    </div>
                @endif
                @if(\Session::has('error'))
                    <div>
                        <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                    </div>
                @endif
                @if(\Session::has('success'))
                    <div>
                        <li class="alert alert-success">{!! \Session::get('success') !!}</li>
                    </div>
                @endif
                <!-- /.box-header -->
                <!-- form start -->
                @isset($pay_methods_set_up)
                    <form role="form" method="post"
                        action="{{ Route('admin.clients-payment-methods.preferred.set-or-update') }}">
                        {{csrf_field()}}
                        <div class="box-body">
                            <div class="row" style="padding:10px 20px; margin:0;">
                                @isset($is_paypal_set_up)
                                    <label class="button-checkbox">
                                        <input type="radio" name="preferred_payment_method" value="paypal"
                                            @if($is_preferred_set_up == 'paypal') checked @endif />
                                        <span class="button-checkbox-label-text">Paypal Payments</span>
                                    </label>
                                @endisset
                                @isset($is_mobile_money_set_up)
                                    <label class="button-checkbox">
                                        <input type="radio" name="preferred_payment_method" value="mobile-money"
                                            @if($is_preferred_set_up == 'mobile-money') checked @endif />
                                        <span class="button-checkbox-label-text">Mobile Money(M-PESA)</span>
                                    </label>
                                @endisset
                                @isset($is_bankers_cheque_set_up)
                                    <label class="button-checkbox">
                                        <input type="radio" name="preferred_payment_method" value="bankers-cheque"
                                            @if($is_preferred_set_up == 'bankers-cheque') checked @endif />
                                        <span class="button-checkbox-label-text">Banker's Cheque</span>
                                    </label>
                                @endisset
                                @isset($is_bank_transfer_set_up)
                                    <label class="button-checkbox">
                                        <input type="radio" name="preferred_payment_method" value="bank-transfer"
                                            @if($is_preferred_set_up == 'bank-transfer') checked @endif />
                                        <span class="button-checkbox-label-text">Bank Transfer</span>
                                    </label>
                                @endisset
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="submit" name="action" value="update" class="btn btn-primary"
                                style="margin-right:5px;">Click to Update &nbsp;<i
                                    class="fa fa-long-arrow-right"></i> </button>
                        </div>

                    </form>
                @else

                    <div class="box-body">
                        <div class="row" style="padding:10px 20px; margin:0;">
                            <a href="{{Route('admin.clients-payment-methods')}}">
                                <button class="btn btn-md btn-success"
                                    style="background-color:orange;border-radius:30px;padding:15px 20px;border:none;outline:none;"><i
                                        class="fa fa-gear" style="margin-right:5px;"></i> Setup your payment methods
                                    here</button>
                            </a>
                        </div>
                    </div>
                   

                @endisset

            </div>
        </div>
    </div>
    <!-- /.row -->
</section>

@endsection