@extends('layouts.frontend.app')

@section('content')

<style>


@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} 
</style>






<div class="container mb-5">
    <div class="row justify-content-center">
        <div class="col-md-8 mb-5">
            <div class="card mt-5">
                <div class="card-header text-center"><h4> Payment Mode </h4></div>

                <div class="card-body">
                    
                    <div class="wrapper center-block">
                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                            <div class="panel-heading active" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <img src="{{ asset('frontend/img/bkash.png') }}" width="100px"> Payment With Bkash - 420Tk
                                </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <h4 class="text-danger text-center font-weight-bold">bKash -> Send Money- (01824 570690) this Number</h4>
                                        <p class="text-success text-center">After fill up the field we will review & update you within 1 hours or Contact this number</p>
                                    </div>
                                    <div class="form-group">
                                        <label for="trxid"> Transaction Id *</label>
                                        <input type="text" class="form-control" id="trxid" placeholder="TrxId- 7L7885SSIQ3">
                                        <small id="emailHelp" class="form-text text-muted">After payment, Please Submit you TrxID.</small>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                            </div>
                            <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    <img src="{{ asset('frontend/img/credit.jpeg') }}" width="100px">  Payment With Stripe - $5
                                </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div class="panel-body">
                                    <form>
                                        <div class="form-row">
                                          <div class="form-group col-md-6">
                                            <label for="fname">First Name <small class="form-text text-muted">(must match card)</small> </label>
                                            <input type="text" class="form-control" id="fname" placeholder="First Name">
                                          </div>
                                          <div class="form-group col-md-6">
                                            <label for="lname">Last Name <small class="form-text text-muted">(must match card)</small></label>
                                            <input type="text" class="form-control" id="lname" placeholder="Last Name">
                                          </div>
                                        </div>
                                        <div class="form-group">
                                            <img src="{{ asset('frontend/img/allcard.png') }}" width="350px">
                                        </div>
                                        <div class="form-group">
                                          <label for="card">Card Number</label>
                                          <input type="number" class="form-control" id="card" placeholder="1234 1234 1234 1234">
                                        </div>
                                        <div class="form-row">
                                          {{-- <div class="form-group col-md-4">
                                            <label for="inputState">Expiration Date</label>
                                            <select id="inputState" class="form-control">
                                              <option selected>Choose...</option>
                                              <option>...</option>
                                            </select>
                                          </div> --}}
                                          <div class="form-group col-md-6">
                                            <label for="expire">Expiration Date</label>
                                            <input type="text" class="form-control" id="expire" placeholder="mm/yyyy">
                                          </div>
                                          <div class="form-group col-md-4">
                                            <label for="cvc">CVC</label>
                                            <input type="text" class="form-control" id="cvc">
                                          </div>
                                        </div>

                                        <button type="submit" class="btn btn-primary">Submit</button>
                                      </form>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container-fluid bg-danger p-3">
    <h3 class="text-center text-light font-weight-bold text-uppercase"> Payment System We Accept </h3>
    <p class="text-center text-light">Pay Us Easily Using Your Comfortable Payment Method</p>
    <div class="container text-center">
        <div class="row text-center">
        <img class="img-thumbnail mx-4" src="{{ asset('images/bkash.jpeg')}}" width="150px">
        <img class="img-thumbnail ml-4" src="{{ asset('images/dbbl.jpeg')}}" width="150px">
        <img class="img-thumbnail ml-4" src="{{ asset('images/nogod.jpeg')}}" width="150px">
        <img class="img-thumbnail ml-4" src="{{ asset('images/visa.png')}}" width="150px">
        <img class="img-thumbnail ml-4" src="{{ asset('images/paypal.png')}}" width="150px">
        <img class="img-thumbnail ml-4" src="{{ asset('images/master.jpeg')}}" width="150px">
        </div>
    </div>
</div>
















  <script>
       $('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-heading').addClass('active');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
  });
  </script>




@endsection