@extends('layout.front.front_copying')
@include('includes.head')

@push('scripts')
<script type="text/javascript" src="{{ asset('/assets/dcopying/toastr/toastr.min.js') }}"></script>
<link href="{{ asset('/assets/dcopying/toastr/toastr.min.css') }}" rel="stylesheet" />
<link href="{{ asset('/assets/dcopying/css/custom.css') }}" rel="stylesheet" />
<script type="text/javascript" src="{{ asset('/assets/dcopying/js/custom.js') }}"></script>
<link href="{{ asset('/assets/plugins/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
<script src="{{ asset('/assets/plugins/select2/dist/js/select2.min.js') }}"></script>
@endpush

@include('includes.page-js')

@push('head')
<style type="text/css">
    .pre-scrollable {
        max-height: 340px;
        overflow-y: scroll;
    }
</style>
@endpush
@section('content')
<section id="blog" class="blog">
      <div class="container-fluid aos-init aos-animate" data-aos="fade-up">

  
<div class="position-relative">
    <!-- begin breadcrumb -->
    <div class="loader_div" style="display: none;"></div>
    <div class="panel">

        <div class="panel-heading card-bg-color">
            <h4 class="panel-title">Add New Registration</h4>

        </div>


        <div class="panel-body">

            <div class="row">

                <div class="col-md-9">

                    <form action="{{ route('highcourt.copying.getFormData') }}" method="POST" id="form">


                        <div class="row">

                            <div class="col-md-2">
                                <div class="mb-2">
                                    <label class="form-label">Bench</label>
                                    <select class="form-control form-control-sm" name="bench" id="bench">
                                        <option value="">--SELECT--</option>
                                        <option value="1">JABALPUR</option>
                                        <option value="2">INDORE</option>
                                        <option value="3">GWALIOR</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label class="form-label">Case Type</label>


                                    <select class="form-control form-control-sm" name="case_type"
                                        id="case_type">

                                        @foreach ($case_types as $case_type_key => $case_type_value)
                                            <option value="{{ $case_type_value->casecode }}">
                                                {{ $case_type_value->skey }} ({{ $case_type_value->casename }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2">

                                <div class="mb-3">
                                    <label class="form-label">Case No.</label>
                                    <input class="form-control form-control-sm" type="text"
                                        placeholder="Enter Case No" maxlength="5" size="5" name="case_no"
                                        id="case_no">
                                </div>
                            </div>
                            <div class="col-md-2">

                                <div class="mb-3">
                                    <label class="form-label">Year</label>
                                    <input class="form-control form-control-sm" type="text" placeholder="Enter Year"
                                        name="year_registration" id="year_registration">
                                </div>
                            </div>
                            <div class="col-md-3">

                                <div class="mb-3">
                                    <button class="btn btn-primary button-loader"
                                        data-loading-text="<i class='fa-solid fa-circle-notch fa-spin'></i> Loading..."
                                        type="submit">
                                        Search
                                    </button>
                                </div>
                            </div>

                        </div>


                    </form>


                </div>
                <div class="col-md-3 text-center fs-6 party_detail">

                </div>



            </div>
            <div class="row">

                <div class="parties_list">

                </div>
            </div>

        </div>


    </div>

    <div class="panel">

        <div class="panel-heading card-bg-color">
            <h4 class="panel-title">Application Details</h4>

        </div>


        <div class="panel-body">
            <form action="{{ route('highcourt.copying.submitFormData') }}" method="POST" id="submit_form">

                <input type="hidden" name="applong_page" value="0" id="applong_page">
                <input type="hidden" name="entry_by" value="cino" id="entry_by">
                <input type="hidden" name="regcase_type" value="" id="regcase_type">
                <input type="hidden" name="post_case_type" value="" id="post_case_type">
                <input type="hidden" name="judge_name" value="" id="judge_name">
                <input type="hidden" name="aplong_charge" value="0" id="input_aplong_charge">
				<input type="hidden" class="form-control form-control-sm" id="application_charge" name="application_charge" value="0">

				<input type="hidden"  id="proposed_page" name="proposed_page">
				<input type="hidden"  id="amt_rec"	name="amt_rec">


                <div class="row">
                    <div class="col-md-8">


                        <div class="row">

                            <div class="col-md-4">
                                <div class="row mb-3">
                                    <label for="staticEmail" class="col-sm-6 col-form-label">Applicant Type</label>
                                    <div class="col-sm-6">
                                        <select class="form-control form-control-sm" name="app_type" id="app_type">

                                            <option value="">--Select--</option>
                                            <option value="Express">Express</option>
                                            <option value="Ordinary">Ordinary</option>
                                        </select>
                                    </div>
                                </div>

                            </div>


                            <div class="col-md-4">
                                <div class="row mb-3">
                                    <label for="inputPassword" class="col-sm-6 col-form-label">Application
                                        purpose</label>

                                    <div class="col-sm-6">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="pur_pose"
                                                id="inlineRadio1" value="Private" checked="checked">
                                            <label class="form-check-label" for="inlineRadio1">Private</label>
                                        </div>

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

                            <div class="col-md-4">
                                <div class="row mb-3">
                                    <label for="inputPassword" class="col-sm-6 col-form-label">Delivery Mode</label>

                                    <div class="col-sm-6">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="desired_mode"
                                                id="inlineRadio1" value="email" checked="checked">
                                            <label class="form-check-label" for="inlineRadio1">Email</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="desired_mode"
                                                id="inlineRadio1" value="counter">
                                            <label class="form-check-label" for="inlineRadio1">Counter</label>
                                        </div>

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

                        </div>





                        <div class="mb-3 row">
                            <label for="staticEmail" class="col-sm-4 col-form-label">Applicant Name</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control form-control-sm" id="applicant"
                                    name="applicant">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="inputPassword" class="col-sm-4 col-form-label">Applicant Address</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control form-control-sm" id="app_add"
                                    name="app_add">
                            </div>
                        </div>


                        <div class="row">
                            <div class="col">

                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-4 col-form-label">Mobile No</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control form-control-sm" id="mobile_no"
                                            name="mobile_no">
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-4 col-form-label">Email ID</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control form-control-sm" id="email_id"
                                            name="email_id">
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="row charge_detail">

                        </div>

                        <div class="row">
                            <div
                                class="d-flex justify-content-around bd-highlight mb-3 mb-2 bg-gradient  border border-1">
                                <div class="p-2 bd-highlight"><b>Copying Fee : </b><span class="copying_fees">0</span>
                                </div>
                                <div class="p-2 bd-highlight"><b>Application Charges: </b><span
                                        class="application_charge">0</span></div>
                                <div class="p-2 bd-highlight"><b>Aplong Pages : </b><span class="aplong_page">0</span>
                                </div>
                                <div class="p-2 bd-highlight"><b>Total Amount : </b><span
                                        class="total_charge">0</span></div>
                            </div>
                        </div>

				

                       

                        <div class="row mb-3">
                            <div class="col-md-12">

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="check" id="check"
                                        value="check">
                                    <label class="form-check-label" for="check">I have read and verified
                                        above content and I know that above amount will not be refunded. Certified copy
                                        will be provided as per CC rules</label>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4">

                        <div class="scanned_docs">

                        </div>
                    </div>

                </div>

                <button class="btn btn-primary button-loader"
                    data-loading-text="<i class='fa-solid fa-circle-notch fa-spin'></i> Saving..." type="submit">
                    Save
                </button>


            </form>
        </div>


    </div>


</div>
 
</div>
</section>
@endsection

@push('scripts')
<script type="text/javascript">
    
    var aplong_page = 0;
    $(".default-select2").select2();

    var express_charge = 0;
    var ordinary_charge = 0;
    var aplong_charge = 0;
    var selected_page = 0;
    var no_of_copy = 1;
    var application_form = 0;

    $(document).on("submit", "#form", function(e) {
        let _this_submit = $(this);

        e.preventDefault();
        let _this = $(this);

        $.ajax({
            url: _this.attr("action"),
            type: _this.attr("method"),
            dataType: "JSON",
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                _this_submit.closest('form').find(':submit').button('loading');
                // reset_form('#submit_form');
                $('.scanned_docs').html("");
                $('.form-record').html("");
                $('.parties_list').html("");
                $('.party_detail').html("");
                form_reset('submit_form');
            },

            success: function(response) {
                let error_msg = "";
                if (response.status == 0) {

                    $.each(response.errors, function(i, error) {
                        error_msg += "<p>" + error + "</p>";
                    });

                    errorMsg(error_msg);
                } else {
                    aplong_page = response.aplong_page;
                    $('.party_detail').html(response.case_detail);
                    $('.parties_list').html(response.party_page);
                    $('#applong_page').val(response.aplong_page);
                    express_charge = response.express_charge;
                    ordinary_charge = response.ordinary_charge;


                    getCaseDetails(response.case.fil_no);
                }

                _this_submit.closest('form').find(':submit').button('reset');
            },
            error: function(xhr) {
                _this_submit.closest('form').find(':submit').button('reset');

            },
            complete: function() {
                _this_submit.closest('form').find(':submit').button('reset');
            }
        });
    });


    let getCaseDetails = (fil_no) => {

        $.ajax({
            url: "{{ url('highcourt/copying/getCaseOrders') }}",
            type: "POST",
            dataType: "JSON",
            data: {
                'fil_no': fil_no
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {

                $('.scanned_docs').html("");

            },

            success: function(response) {

                $('.scanned_docs').html(response.case_document_page);



            },
            error: function(xhr) {


            },
            complete: function() {

            }
        });

    }

    $(document).on('change', '.radio_party', function() {
        var party_name = $(this).closest('tr').find("input[name='party_name']").val();
        var party_mobile_no = $(this).closest('tr').find("input[name='party_mobile_no']").val();
        var party_email_id = $(this).closest('tr').find("input[name='party_email_id']").val();
        var party_address = $(this).closest('tr').find("input[name='party_address']").val();

        $('#applicant').val(party_name);
        $('#mobile_no').val(party_mobile_no);
        $('#email_id').val(party_email_id);
        $('#app_add').val(party_address);

    });


    $(document).on('change', '.scanned_copy', function() {
        countPage();

    });

    $(document).on('change', '.orders', function() {
        countPage();

    });



    let countPage = () => {
		selected_page=0;
        $('input.scanned_copy[type=checkbox]:checked').each(function() {
            let page = $(this).data('pages');
            selected_page = selected_page + page;
        });

        $('input.orders[type=checkbox]:checked').each(function() {
            let page = $(this).data('pages');
            selected_page = selected_page + page;
        });

        $('#proposed_page').val(selected_page);
        calculateAmt();
    }


    $(document).on('change', '#app_type', function() {

        calculateAmt();
    })


    let calculateAmt = () => {


        let page_charge = 0;
        let app_type = $('#app_type').val();
        if (app_type == "Express") {
            page_charge = express_charge;
            application_form = 15;

        } else if (app_type == "Ordinary") {
            page_charge = ordinary_charge;
            application_form = 5;
        } else {
            page_charge = 0;
            application_form = 5;

        }


        let proposed_page = parseInt($('#proposed_page').val());

        let radio_ap = $("input:radio[name='ap']:checked").val();
        let tot_copy = no_of_copy;


        if (app_type == "Express") {
            page_charge = express_charge;
        } else {

            page_charge = ordinary_charge;
        }
        let final_amt = (((proposed_page + aplong_page) * tot_copy) * page_charge);
        if (isNaN(final_amt)) {
            final_amt = 0;
        }
        $('#amt_rec').val(final_amt);


        let tot_display = "((" + selected_page + " + " + aplong_page + ") *" + page_charge + " (Per Page)) +" +
            application_form + " =" + (final_amt + application_form);
        $('.total_charge').text(tot_display);
        $('.copying_fees').html(page_charge + " (Per Page)");
        $('.application_charge').html(application_form);
        $('#application_charge').val(application_form);
        $('#input_aplong_charge').val(aplong_page * page_charge);

        $('.aplong_page').html(aplong_page);



    }

    $(document).on("submit", "#submit_form", function(e) {
        e.preventDefault();
        let _this = $(this);
        let error_msg = "";
        $.ajax({
            url: _this.attr("action"),
            type: _this.attr("method"),
            dataType: "JSON",
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                _this.closest('form').find(':submit').button('loading');
            },

            success: function(response) {

                if (response.status == 0) {

                    $.each(response.errors, function(i, error) {
                        error_msg += "<p>" + error + "</p>";
                    });

                    errorMsg(error_msg);
                } else {

                    window.location.href = response.redirect_url;
                }



                _this.closest('form').find(':submit').button('reset');
            },
            error: function(xhr) {
                _this.closest('form').find(':submit').button('reset');

            },
            complete: function() {
                _this.closest('form').find(':submit').button('reset');
            }
        });
    });


    $(document).on('blur', '#case_no', function(e) {
        let case_no = $(this).val();
        let new_case_no = add_zero(case_no, 5);
        $('#case_no').val(new_case_no);
    });



    function add_zero(your_number, length) {
        var num = '' + your_number;
        while (num.length < length) {
            num = '0' + num;
        }
        return num;
    }


    
	$(document).on('keyup','#search_party',function(){
	
    var value = $(this).val().toLowerCase();
    $(".user-list tbody tr").filter(function() {		
      $(this).find(":not('."+party_category_list+"')").hide().toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
	// $(".user-list tbody tr:not('."+party_category_list+"')").hide();
  });



  $(document).on('keyup','#scan_document_search',function(){
	
  var value = this.value.toLowerCase().trim();
  $(".scan_group li").show().filter(function() {
    return $(this).text().toLowerCase().trim().indexOf(value) == -1;
  }).hide();
});


$(document).on('keyup','#scan_order_search',function(){
	
	var value = this.value.toLowerCase().trim();
	$(".order_group li").show().filter(function() {
	  return $(this).text().toLowerCase().trim().indexOf(value) == -1;
	}).hide();
  });
  

  
$(document).on('change','.party_category',function(){
	


	 party_category_list=$(this).val();
	 console.log(party_category_list);

	if(party_category_list == "all"){
		$(".user-list tbody tr:not('."+party_category_list+"')").show();
	}else{
		$(".user-list tbody tr[class^='"+party_category_list+"']").show();
	$(".user-list tbody tr:not('."+party_category_list+"')").hide();
	}


	

  });

    
$(document).on('click','.profile_image',function(e){

		let image_path=$(this).attr('src');
		$('#Profileimage .modal-image').attr("src",image_path);
		$('.modal_image_caption').html($(this).data('profile_name'));
		$('#Profileimage').modal('show');

 });
  

 $('#Profileimage').on('hidden.bs.modal', function(e) {
	$('#Profileimage .modal-image').attr("src","");
	$('.modal_image_caption').html("");
  });

  function form_reset(form_id){
		$("#"+form_id).find('input:text, input:password, input:file, select, textarea').val('');
		$("[name=ap]").filter("[value='none_opt']").prop("checked",true);
		$("#app_type").prop("selectedIndex", 0);
	    $('#amt_rec').val(0);
	    $('#post_amt').val(0);
        $('.total_charge').text(0);
        $('.copying_fees').html(0);
        $('.application_charge').html(0);
        $('.aplong_page').html(0);	
        $('input[name="check"]').prop('checked' , false);    
		}

</script>
@endpush