@extends('layouts.default', ['appTopMenu' => true])

@section('title', 'Add Clerk')

@push('head')
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="/assets/plugins/select2/dist/js/select2.min.js"></script>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script> -->

<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>

<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="../assets/plugins/select2/dist/js/select2.min.js" defer></script>
<!-- <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> -->

<style>
    /*Custom CSS*/
    span {
        transition: color 0.5s ease-in;
    }

    label:focus-within span {
        color: blue;
    }

    input {
        display: block;
        width: 100%;
    }

    label,
    select {

        display: block;
        width: 100%;
        max-width: 100%;
    }

    /*Profile Pic Start*/
    .picture-container {
        position: relative;
        cursor: pointer;
        text-align: center;
    }

    .picture {
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 0px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }

    .picture:hover {
        border-color: #2ca8ff;
    }

    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .picture-src {
        width: 100%;

    }

    /*Profile Pic End*/
    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus,
    .select2:focus-within {
        border-color: #6265e4 !important;
        box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
    }

    .form-check-input:checked {
        background-color: #1a1b1c;
        border-color: #fff;
    }
</style>
@endpush
@section('content')
<script>
    @if(Session::has('success'))
   
    swal("{{Session::get('success')}}").then(function() {
        //window.location = "/project/" + loc;
    });

    @endif
</script>
<section>
    <div class="row">
        <div class="col-xl-12" id="showdetail">
            <!--  For Case Type and Bench ---->
            <div class="card" data-sortable-id="form-stuff-3">
                <div class="card-header card-bg-color ">
                    Proceed to Payment
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="card border-0">
                            <div class="row">
                                <div class="col-sm-2 for_ind">
                                    <label class="control-label" ><b>&nbsp;</b></label>
                                    <input type="hidden" value="{{$clerkid}}" id="clerkid" name="clerkid" />
                                    <input type="button" id="btn_save_party" class="btn-primary form-control" value="Proceed To Payment">
                                </div>                                           
                            </div>
                        </div>
                    </div>                                           
                </div>                
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')

<script>
    function downloadfile(){
        var path = document.getElementById("path").value;
        window.open(path, '_blank');
    }
	
	$(document).ready(function(){
		 $.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
}); 

function getEncrypted() {

    {
//                 alert("payment button working");
        var result = true;

        if (result == true)
        {
            event.preventDefault();
            var temp_id =$("#clerkid").val();

            //formData.append("hd_ud", $('#hd_ud').val());

            return $.ajax({
                url: "{{ url ('get_encrypted_for_clerk')}}",
                type: 'POST',
                data: {temp_id:temp_id},
                success: function (data)
                {
                    //  alert(data);
//                        document.getElementById("f1").reset();
                    //  window.location.href = "form";
                },
            });
            return false;
        } 
    }

}


function postToTreasury(dataFromFirstRequest) {
    var dataToSend = {
        ctp_data: dataFromFirstRequest,
        merchant_code: "LAW",
    };

    var form = $("<form></form>");
    form.attr("method", "post");
    form.attr("action", "https://mptreasury.gov.in/MPCTP/IntegrationAgentGMT");

    $.each(dataToSend, function (name, value) {
        var input = $("<input type='hidden'>");
        input.attr("name", name);
        input.val(value);
        form.append(input);
    });
    form.appendTo("body");
    form.submit();
}


$('body').on('click', '#btn_save_party', function () {
    getEncrypted()
            .then(function (response) {
//				console.log(response);
//				return false;
                return postToTreasury(response.trim().replace(/\n|\r/g, ""));
            })
            .done(function (response) {
                console.log(response);
            });
});
	});
	
</script>

@endpush