@extends('reseller.layouts.master')
@section('page_title')
    Email Subscription
@endsection


@push('styles')
    <link rel="stylesheet" href="{{asset('assets/examples/css/pages/profile.min3f0d.css?v2.2.0')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/DateTimePicker.min.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{asset('css/DateTimePicker-ltie9.min.css')}}"/>
    <script type="text/javascript" src="{{asset('js/DateTimePicker-ltie9.min.js')}}"></script>
    <script src="{{asset('js/ckeditor/ckeditor.js')}}"></script>
@endpush

@section('page_content')
    <div class="page-content container-fluid">
        <div class="row">
            @include('includes.payment_side')

            <div class="col-md-9">
                <!-- Panel Wizard Form -->
                <div class="panel">
                    <div class="panel-body nav-tabs-animate nav-tabs-horizontal">

                        @if(count($errors)>0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach($errors->all() as $error)
                                        <li>
                                            {{$error}}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="alert alert-success">
                                <ul>
                                    <li>{{ session('success') }}</li>
                                </ul>
                            </div>
                        @endif
                        <form method="post" enctype="multipart/form-data" class="registration lato">
                                @csrf
                                <h3><em>Mail Subscription Payment</em></h3>
                            <hr>

                                    <div class="row">
                                        <div class="form-group col-md-6"><label for="operator">Operator</label>
                                            <select id="operator" name="operator" class="form-control">
                                                <option></option>
                                                <option value="mtn">MTN</option>
                                                <option value="vodafone">VODAFONE</option>
                                                <option value="airtel">AIRTEL</option>
                                                <option value="tigo">TIGO</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group col-md-6" id="mm_col">
                                            <label for="inputZip">Mobile Money No.</label>
                                            <input type="number" name="momo_number" value="{{old('momo_number')}}" class="form-control" required>
                                        </div>
                                    </div>

                                   <div class="row">
                                        <div class="form-group col-md-6" id="">
                                            <label for="inputZip">Amount ₵</label>
                                            <input type="number" name="amount" id="amount" value="{{old('amount',$package->pricing)}}" class="form-control" readonly>
                                        </div>
                                    </div>

                                   <div class="row">
                                            <div class="form-group col-md-6 voucher">
                                                <label for="inputZip">Voucher No. <em class="text-danger">Required for Vodafone </em></label>
                                                <input type="number" name="voucher" id="voucher" value="{{old('voucher')}}" class="form-control voucher">
                                            </div>
                                        </div>

                                   <div class="row">
                                        <div class="col-md-offset-2">
                                            <button type="submit" id="" class="btn btn-success"><i class="fa fa-send-o"></i> Submit</button>
                                        </div>
                                    </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection


@push('scripts')

    <script type="text/javascript" src="{{asset('js/DateTimePicker.min.js')}}"></script>
    <script>
        $(document).ready(function()
        {
            $('#operator').on('change',function () {
                const operator = $(this).val(),
                    voucher = $('.voucher');
                    operator === 'vodafone' ? voucher.show()  && voucher.prop('required',true) : voucher.hide() && voucher.val('') && voucher.prop('required',false) ;
            })
        });
    </script>



@endpush