@extends('adminlayout.mobile_sidebar')
@section('content')
<style>
    #loading {
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0.7;
        background-color: #fff;
        z-index: 11111;
    }

    #loading-image {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        height: 100%;
        width: 100%;
    }

    .radio-custom:checked~label {
        color: black;
    }
	
	.mainTop{
	ackground-color: rgb(239, 239, 239);
    background-size: cover;
    display: flex;
    justify-content: center;
}
.maxWidth {
    max-width: 450px;
}
.mainRoot{
	display: flex;
    flex-direction: column;
    background: #09c2de14;
    width: 100%;
    min-width: 320px;
	min-height: 100%!important;
	padding-bottom: 15px;
}

.headerNav {
	background: #fff;
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
	padding: 0.8rem 0.6rem !important;
}
.boxShadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
}
.navLeftText {
    color: #111111;
}
.innerHeadText{
	font-size: 16px;
}
.backIcon {
    margin-right: 15px;
}
.backIcon img{
	width: 21px;
}
.w-transfer-inner{
	margin-top: 15px;
}
.w-transfer-inner .form-group label{
	color: #111111;
    margin-bottom: 5px;
}
.w-transfer-inner .form-control, .popInner .form-control{
	border-radius: 20px;
	height: 38px;
}
.w-sb-btn {
    width: 100%;
    border-radius: 20px;
    text-align: center;
    display: block;
    font-weight: normal;
    font-size: 16px;
	height: 38px;
}
.popBtnSb{
	border-radius: 20px;
    padding: 7px 20px;
    font-weight: normal;
    font-size: 15px;
}

.dth-recharge-section {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
	margin-bottom: 15px;
}
.status-enquiry-section{
	 background-color: #f5efdbde;
    padding: 0px;
    border-radius: 10px;
	margin-bottom: 0px;
}
.dth-recharge-section .card, 
.status-enquiry-section .card{
	background-color: transparent;
}
.dth-recharge-section .card-header, 
.status-enquiry-section .card-header{
    padding: 5px 0px 5px 0px;
    margin-bottom: 10px;
    background-color: rgb(0 0 0 / 0%);
    border-bottom: 0 solid rgba(0, 0, 0, 0.125);
}

#otheramount input[type="number"] {
	height: 36px;
    vertical-align: middle;
}
#otheramount button {
	height: 36px;
}
.b-r-10{
	border-radius: 10px;
}
.boxShadow2{
	box-shadow: 0px 0px 2px rgb(0 0 0 / 20%);
}
.p-2{
	padding: 0.5rem;
}

	
</style>
<div id="loading" style="display: none;">
    <img id="loading-image" src="{{ asset('assets/images/bbps/loading2.gif') }}" alt="Loading..." />
</div>


        <div class="nk-content-body">
		<div class="mainTop">
		<div class="mainRoot maxWidth">
		<div class="navTop sticky-top">
			<nav id="" class="navbar navbar-expand-lg headerNav boxShadow">
				<div class="navLeftText">
					<a class="backIcon" href="{{route('dashboard')}}"><span><img src="{{url('/assets/images/mob-dash/back-arrow.png')}}"></span></a> <span class="innerHeadText">Recharge Service</span>
				</div>
				
			</nav>
		</div>
		
		<div class="w-transfer-inner">
		<div class="container">
            <div class="row">
                
                <div class="col-md-12">
					<div class="dth-recharge-section boxShadow2 p-2">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">DTH Recharge</h4>
                        </div>
                        <div class="">
                            <form action="">
                                <div class="form-group">
                                    <label for="operator">Operator</label>
                                    <select name="operator" id="operatorDth" class="form-control" onchange="clearData()">
                                        <option value="Airteldth">Airtel Digital TV</option>
                                        <option value="TataSky">Tata Sky</option>
                                        <option value="Videocon">Videocon D2H</option>
                                        <option value="Sundirect">Sun Direct</option>
                                        <option value="Dishtv">Dish TV</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="number">Customer ID</label>
                                    <input type="number" name="number" id="numberDth" class="form-control" required>
                                    <p class="text-danger">
                                        <b id="numberError"></b>
                                    </p>
                                </div>
                                <div class="form-group">
                                    <button type="button" onclick="checkDthInfo()" class="btn btn-success w-sb-btn">Proceed</button>
                                </div>
                            </form>
                            <div id="responseDth" class="mt-2">

                            </div>
                        </div>
						</div>
                    </div>
                    </div>
                    
					 <div class="col-md-12">
						<div class="status-enquiry-section boxShadow2 p-2">
							<div class="card">
								<div class="card-header">
									<h4 class="card-title">Status Enquiry</h4>
								</div>
								<div class="">
									<form action="">
										<div class="form-group">
											<label for="reference">Referance ID</label>
											<input type="text" name="reference" id="reference" class="form-control" required>
											<p class="text-danger">
												<b id="numberError"></b>
											</p>
										</div>
										<div class="form-group">
											<button type="button" onclick="rechargeStatusEnquiry()" class="btn btn-warning w-sb-btn">Process</button>
										</div>
									</form>
									<div id="responseStatusEnquery" class="mt-2">

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
            </div>
        </div>
    </div>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function changeText(value) {
        document.getElementById('amount').value = value;
        document.getElementById('submit-button').innerHTML = 'Recharge';
        document.getElementById("do-recharge").action = "{{ route('doRecharge') }}";
    }

    function clearData() {
        jQuery('#responseDth').html();
    }

    function checkDthInfo() {
        var operator = $("#operatorDth").val();
        var number = $("#numberDth").val();
        if (operator != '' && number != '') {
            var url = "{{ route('do_dthinfo') }}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: {
                    'number': number,
                    'operator': operator
                },
                context: this,
                success: function(response) {
                    var response = JSON.parse(response);
                    console.log(response);
                    var html = '';
                    html = `<div class="card">
                                    <div class="card-body border border-dark" style="border-radius: 10px;">`;
                    if (response.response_code == 1) {
                        var info = '';
                        $.each(response.info, function(k, v) {
                            info = v;
                        });
                        html += `<form action="{{ route('doRecharge') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="operator" value="` + operator + `">
                                            <input type="hidden" name="canumber" value="` + number + `">
                                            <div class="row">
                                                <div class="col-sm-6">Customer Name : </div>
                                                <div class="col-sm-6">` + info.customerName + `</div>
                                                <div class="col-sm-6">Balance : </div>
                                                <div class="col-sm-6">` + info.Balance + `</div>
                                                <div class="col-sm-6">Monthly Recharge : </div>
                                                <div class="col-sm-6">` + info.MonthlyRecharge + `</div>
                                                <div class="col-sm-6">Next Recharge Date : </div>
                                                <div class="col-sm-6">` + info.NextRechargeDate + `</div>
                                                <div class="col-sm-6">Status : </div>
                                                <div class="col-sm-6">` + info.status + `</div>
                                                <div class="col-12">
                                                    <div class="form-group mb-2 mt-2">
                                                        <input type="number" class="form-control" name="amount" id="amount" placeholder="Enter amount...">
                                                    </div>
                                                </div>
                                                <div class="col-12 text-center">
                                                    <button type="submit" class="btn btn-success">Recharge</button>
                                                </div>
                                            </div>
                                        </form>`;
                    } else {
                        html += `<h5>` + response.message + `</h5>`;
                    }
                    html += `</div>
                                </div>`;

                    jQuery('#responseDth').html(html);
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
        }
    }

    function rechargeStatusEnquiry() {
        var reference = $("#reference").val();
        if (reference != '') {
            var url = "{{ route('do_rechargeStatusEnquiry') }}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: {
                    'reference': reference
                },
                context: this,
                success: function(response) {
                    var response = JSON.parse(response);
                    console.log(response);
                    var html = '';
                    html = `<div class="card">
                                    <div class="card-body border border-dark" style="border-radius: 10px;">`;
                    if (response.status == true) {
                        html += `<div class="row">
                                    <div class="col-md-6 text-left" >Customer ID : </div>
                                    <div class="col-md-6 text-right" >` + response.data.canumber + `</div>
                                    <div class="col-md-6 text-left" >Operator : </div>
                                    <div class="col-md-6 text-right" >` + response.data.operatorname + `</div>
                                    <div class="col-md-6 text-left" >Amount : </div>
                                    <div class="col-md-6 text-right" >` + response.data.amount + `</div>
                                    <div class="col-md-6 text-left" >TDS : </div>
                                    <div class="col-md-6 text-right" >` + response.data.tds + `</div>
                                    <div class="col-md-6 text-left" >Referance ID</div>
                                    <div class="col-md-6 text-right" >` + response.data.refid + `</div>
                                    <div class="col-md-6 text-left" >Status</div>
                                    <div class="col-md-6 text-right" >` + response.data.status + `</div>
                                    <div class="col-md-6 text-left" >Date Added</div>
                                    <div class="col-md-6 text-right" >` + response.data.dateadded + `</div>
                                    <div class="col-md-12 text-center" >` + response.message + `</div>
                                </div>`;
                    } else {
                        html += `<h5>` + response.message + `</h5>`;
                    }
                    html += `</div>
                                </div>`;

                    jQuery('#responseStatusEnquery').html(html);
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
        }
    }

    $(function() {
        $('#brosePlan').click(function() {
            $('#brosePlan').hide();
            $('#mobReSuccess').html('Please wait...');
            $('#mobReError').html('');
            var number      = $('#numberHlrCheck').val();
            var circle      = $('#circleHlrCheck').val();
            var operator    = $('#operatorHlrCheck').val();
            var url = "{{ route('browsePlan') }}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: {
                    'circle': circle,
                    'op': operator
                },
                context: this,
                success: function(result) {
                    console.log(result);
                    var result = JSON.parse(result);
                    // alert();
                    var html1 = '';
                    var html2 = '';
                    if (result.response_code == 1 && result.status == true) {

                        var i = 1;
                        jQuery.each(result.info, function(arrKey, arrVal) {
                            if (arrVal != null) {
                                if (i == 1) {
                                    html1 += `<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
                                        </li>`;
                                } else {
                                    html1 += `<li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
                                        </li>`;
                                }

                                if (i == 1) {
                                    html2 += `<div class="tab-pane active" id="tab` + i + `">`;
                                } else {
                                    html2 += `<div class="tab-pane " id="tab` + i + `">`;
                                }

                                var j = 1;
                                jQuery.each(arrVal, function(arrKey2, arrVal2) {
                                    html2 += `<a href="#" class="text-dark" data-toggle="modal" data-target="#rechargeTab` + i + j + `">
                                        <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
                                            <div class="row">
											   <div class="col-12">
                                                <div class="col-sm-6" style="text-align: left;">Amount: </div>
                                                <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
												</div>
												<div class="col-12">
                                                <div class="col-sm-6" style="text-align: left;">Validate: </div>
                                                <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
												</div>
                                                <div class="col-12">
                                                    <p>` + arrVal2.desc + `</p>
                                                </div>
                                            </div>
                                        </label>
                                        </a>`;
                                    html2 += `<div class="modal fade" id="rechargeTab` + i + j + `" role="dialog">
                                                    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                                                        <div class="modal-content">
                                                            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                                                            <div class="modal-body modal-body-md">
                                                                <h5 class="add-notice">Recharge</h5>
                                                                <div class="tab-content">
                                                                    <div class="tab-pane active" id="personal-document">
                                                                    <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
                                                                        <div class="row">
                                                                            <div class="col-sm-6" style="text-align: left;">Amount: </div>
                                                                            <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
                                                                            <div class="col-sm-6" style="text-align: left;">Validate: </div>
                                                                            <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
                                                                            <div class="col-12">
                                                                                <p>` + arrVal2.desc + `</p>
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                        <form action="{{ route('doRecharge') }}" method="post" enctype="multipart/form-data">
                                                                            @csrf
                                                                            <input type="hidden" name="operator" class="operat" value="` + operator + `">
                                                                            <input type="hidden" name="canumber" class="cnmobile" value="` + number + `">
                                                                            <input type="hidden" name="amount" value="` + arrVal2.rs + `">

                                                                            <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                                                                <li>
                                                                                    <button type="submit" class="btn btn-lg btn-success">Recharge</button>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
                                                                                </li>
                                                                            </ul>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>`;
                                    j++;
                                });

                                html2 += `</div>`;
                                i++;
                            }
                        });

                        var html = `<div class="card card-preview">
                                        <div class="card-inner11">
                                            <div class="row mb-2">
                                                <div class="col-sm-6">Circle: <b>` + circle + `</b></div>
                                                <div class="col-sm-6">Operator: <b>` + operator + `</b></div>
                                            </div>
                                            <ul class="nav nav-tabs mt-n3">
                                                ` + html1 + `
                                            </ul>
                                            <div class="tab-content">
                                                ` + html2 + `
                                            </div>
											<div>  <button style="height:36px;" type="button" class="btn btn-lg btn-primary" onclick="otheramountHandler()" >Other Amount</button></div>
                                        </div>
                                    </div>`;


                        jQuery('#mobileBody').html(html);
                    } else {
                        $('#mobReError').html('Somthing else, please try again');
                        $('#mobReSuccess').html('');
                        alert('Somthing else, please try again!');
                    }




                    // LOADING HIDE *******************
                    // $('#loading').hide();
                    $('#mobReSuccess').html('');
                    // LOADING HIDE *******************


                    // alert('success');
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
        });
    });

    // $(function() {
    //     // alert('Document is ready');
    //     $('#numberHlrCheck').keyup(function() {
    //         // alert('keyup');
    //         if ($("#numberHlrCheck").val().length > 9) {
    //             // LOADING HIDE *******************
    //             // $('#loading').show();
    //             $('#mobReSuccess').html('Please wait...');
    //             $('#mobReError').html('');
    //             // LOADING HIDE *******************

    //             var number = $("#numberHlrCheck").val();
    //             var url = "{{ route('do_hlrCheck') }}";
    //             $.ajax({
    //                 url: url,
    //                 headers: {
    //                     'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //                 },
    //                 type: "POST",
    //                 data: {
    //                     'number': number
    //                 },
    //                 context: this,
    //                 success: function(response) {
    //                     console.log(response);
    //                     // alert(response);
    //                     var response = JSON.parse(response);


    //                     if (response.response_code == 1 && response.status == true) {
    //                         let circle      = response.info.circle;
    //                         let operator    = response.info.operator;

    //                         var url = "{{ route('browsePlan') }}";
    //                         // alert(url);
    //                         $.ajax({
    //                             url: url,
    //                             headers: {
    //                                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //                             },
    //                             type: "POST",
    //                             data: {
    //                                 'circle': circle,
    //                                 'op': operator
    //                             },
    //                             context: this,
    //                             success: function(result) {
    //                                 console.log(result);
    //                                 var result = JSON.parse(result);
    //                                 // alert();
    //                                 var html1 = '';
    //                                 var html2 = '';
    //                                 if (result.response_code == 1 && result.status == true) {

    //                                     var i = 1;
    //                                     jQuery.each(result.info, function(arrKey, arrVal) {
    //                                         if (arrVal != null) {
    //                                             if (i == 1) {
    //                                                 html1 += `<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
    //                                                     </li>`;
    //                                             } else {
    //                                                 html1 += `<li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
    //                                                     </li>`;
    //                                             }

    //                                             if (i == 1) {
    //                                                 html2 += `<div class="tab-pane active" id="tab` + i + `">`;
    //                                             } else {
    //                                                 html2 += `<div class="tab-pane " id="tab` + i + `">`;
    //                                             }

    //                                             var j = 1;
    //                                             jQuery.each(arrVal, function(arrKey2, arrVal2) {
    //                                                 html2 += `<a href="#" class="text-dark" data-toggle="modal" data-target="#rechargeTab` + i + j + `">
    //                                                     <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
    //                                                         <div class="row">
    //                                                             <div class="col-sm-6" style="text-align: left;">Amount: </div>
    //                                                             <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
    //                                                             <div class="col-sm-6" style="text-align: left;">Validate: </div>
    //                                                             <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
    //                                                             <div class="col-12">
    //                                                                 <p>` + arrVal2.desc + `</p>
    //                                                             </div>
    //                                                         </div>
    //                                                     </label>
    //                                                     </a>`;
    //                                                 html2 += `<div class="modal fade" id="rechargeTab` + i + j + `" role="dialog">
    //                                                                 <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    //                                                                     <div class="modal-content">
    //                                                                         <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
    //                                                                         <div class="modal-body modal-body-md">
    //                                                                             <h5 class="add-notice">Recharge</h5>
    //                                                                             <div class="tab-content">
    //                                                                                 <div class="tab-pane active" id="personal-document">
    //                                                                                 <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
    //                                                                                     <div class="row">
    //                                                                                         <div class="col-sm-6" style="text-align: left;">Amount: </div>
    //                                                                                         <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
    //                                                                                         <div class="col-sm-6" style="text-align: left;">Validate: </div>
    //                                                                                         <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
    //                                                                                         <div class="col-12">
    //                                                                                             <p>` + arrVal2.desc + `</p>
    //                                                                                         </div>
    //                                                                                     </div>
    //                                                                                 </label>
    //                                                                                     <form action="{{ route('doRecharge') }}" method="post" enctype="multipart/form-data">
    //                                                                                         @csrf
    //                                                                                         <input type="hidden" name="operator" value="` + operator + `">
    //                                                                                         <input type="hidden" name="canumber" value="` + number + `">
    //                                                                                         <input type="hidden" name="amount" value="` + arrVal2.rs + `">

    //                                                                                         <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
    //                                                                                             <li>
    //                                                                                                 <button type="submit" class="btn btn-lg btn-success">Recharge</button>
    //                                                                                             </li>
    //                                                                                             <li>
    //                                                                                                 <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
    //                                                                                             </li>
    //                                                                                         </ul>
    //                                                                                     </form>
    //                                                                                 </div>
    //                                                                             </div>
    //                                                                         </div>
    //                                                                     </div>
    //                                                                 </div>
    //                                                             </div>`;
    //                                                 j++;
    //                                             });

    //                                             html2 += `</div>`;
    //                                             i++;
    //                                         }
    //                                     });

    //                                     var html = `<div class="card card-preview">
    //                                                     <div class="card-inner11">
    //                                                         <div class="row mb-2">
    //                                                             <div class="col-sm-6">Circle: <b>` + circle + `</b></div>
    //                                                             <div class="col-sm-6">Operator: <b>` + operator + `</b></div>
    //                                                         </div>
    //                                                         <ul class="nav nav-tabs mt-n3">
    //                                                             ` + html1 + `
    //                                                         </ul>
    //                                                         <div class="tab-content">
    //                                                             ` + html2 + `
    //                                                         </div>
    //                                                     </div>
    //                                                 </div>`;


    //                                     jQuery('#mobileBody').html(html);
    //                                 } else {
    //                                     $('#mobReError').html('Somthing else, please try again');
    //                                     $('#mobReSuccess').html('');
    //                                     alert('Somthing else, please try again!');
    //                                 }




    //                                 // LOADING HIDE *******************
    //                                 // $('#loading').hide();
    //                                 $('#mobReSuccess').html('');
    //                                 // LOADING HIDE *******************


    //                                 // alert('success');
    //                             },
    //                             error: function(error) {
    //                                 console.log(error.responseText);
    //                             }
    //                         });
    //                     } else {
    //                         $('#mobReError').html('Somthing else, please try again');
    //                         $('#mobReSuccess').html('');
    //                         alert('Somthing else, please try again!');
    //                     }


    //                 },
    //                 error: function(error) {
    //                     console.log(error.responseText);
    //                 }
    //             });

    //         }
    //     });
    // });

    

    $(window).load(function() {
        $('#loading').hide();
    });
	function otheramountHandler()
	{
		$('#otheramount').modal('show');
		$('#otheroprtor').val($('.operat').val());
		$('#othercannumber').val($('.cnmobile').val());
		
	}
</script>
<div class="modal fade" id="otheramount" role="dialog">
                                                    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                                                        <div class="modal-content">
                                                            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                                                            <div class="modal-body modal-body-md">
                                                                <h5 class="add-notice">Recharge</h5>
                                                                <div class="tab-content">
                                                                    <div class="tab-pane active" id="personal-document">
                                                                   
                                                                        <form action="{{ route('doRecharge') }}" method="post" enctype="multipart/form-data">
                                                                            @csrf
                                                                            <input type="hidden" id="otheroprtor" name="operator" value="">
                                                                            <input type="hidden" id="othercannumber" name="canumber" value="">
                                                                            <input type="number" name="amount" value="" required>

                                                                            <button type="submit" class="btn btn-lg btn-success">Recharge</button>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
@endsection