@extends('theme::layout')


@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div data-elementor-type="wp-page" data-elementor-id="10635" class="elementor elementor-10635" data-elementor-post-type="page">
    <section class="elementor-section elementor-top-section elementor-element elementor-element-200cc72 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="200cc72" data-element_type="section" data-settings="{&quot;jet_parallax_layout_list&quot;:[]}">
        <div class="elementor-container elementor-column-gap-default">
            <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4843666" data-id="4843666" data-element_type="column">
                <div class="elementor-widget-wrap elementor-element-populated">
                    <div class="elementor-element elementor-element-f801332 jet-breadcrumbs-align-left elementor-widget elementor-widget-jet-breadcrumbs" data-id="f801332" data-element_type="widget" data-widget_type="jet-breadcrumbs.default">
                        <div class="elementor-widget-container">
                            <div class="elementor-jet-breadcrumbs jet-blocks">
                                <div class="jet-breadcrumbs">
                                    <div class="jet-breadcrumbs__content">
                                        <div class="jet-breadcrumbs__wrap">
                                            <div class="jet-breadcrumbs__item"><a href="../index.html" class="jet-breadcrumbs__item-link is-home" rel="home" title="Home">
                                                    Home
                                                </a></div>
                                            <div class="jet-breadcrumbs__item">
                                                <div class="jet-breadcrumbs__item-sep">
                                                    <span class="jet-blocks-icon"><i aria-hidden="true" class="fas fa-angle-right"></i></span>
                                                </div>
                                            </div>
                                            <div class="jet-breadcrumbs__item">
                                                <span class="jet-breadcrumbs__item-target">GPPI Tool
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="elementor-section elementor-top-section elementor-element elementor-element-4eee85f elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4eee85f" data-element_type="section" data-settings="{&quot;jet_parallax_layout_list&quot;:[],&quot;background_background&quot;:&quot;classic&quot;}">
        <div class="elementor-container elementor-column-gap-default">
            <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-75c756e" data-id="75c756e" data-element_type="column">
                <div class="elementor-widget-wrap elementor-element-populated">
                    <div class="elementor-element elementor-element-06fa7e7 elementor-widget elementor-widget-heading" data-id="06fa7e7" data-element_type="widget" data-widget_type="heading.default">
                        <div class="elementor-widget-container">
                            <h2 class="elementor-heading-title elementor-size-default text-center" style="text-align:center;">
                                GPPI Tool
                            </h2>
                        </div>
                    </div>
                    <div class="elementor-element elementor-element-fe9b731 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="fe9b731" data-element_type="widget" data-widget_type="divider.default">
                        <div class="elementor-widget-container">
                            <style>
                                /*! elementor - v3.19.0 - 07-02-2024 */
                                .elementor-widget-divider {
                                    --divider-border-style: none;
                                    --divider-border-width: 1px;
                                    --divider-color: #0c0d0e;
                                    --divider-icon-size: 20px;
                                    --divider-element-spacing: 10px;
                                    --divider-pattern-height: 24px;
                                    --divider-pattern-size: 20px;
                                    --divider-pattern-url: none;
                                    --divider-pattern-repeat: repeat-x;
                                }

                                .elementor-widget-divider .elementor-divider {
                                    display: flex;
                                }

                                .elementor-widget-divider .elementor-divider__text {
                                    font-size: 15px;
                                    line-height: 1;
                                    max-width: 95%;
                                }

                                .elementor-widget-divider .elementor-divider__element {
                                    margin: 0 var(--divider-element-spacing);
                                    flex-shrink: 0;
                                }

                                .elementor-widget-divider .elementor-icon {
                                    font-size: var(--divider-icon-size);
                                }

                                .elementor-widget-divider .elementor-divider-separator {
                                    display: flex;
                                    margin: 0;
                                    direction: ltr;
                                }

                                .elementor-widget-divider--view-line_icon .elementor-divider-separator,
                                .elementor-widget-divider--view-line_text .elementor-divider-separator {
                                    align-items: center;
                                }

                                .elementor-widget-divider--view-line_icon .elementor-divider-separator:after,
                                .elementor-widget-divider--view-line_icon .elementor-divider-separator:before,
                                .elementor-widget-divider--view-line_text .elementor-divider-separator:after,
                                .elementor-widget-divider--view-line_text .elementor-divider-separator:before {
                                    display: block;
                                    content: "";
                                    border-block-end: 0;
                                    flex-grow: 1;
                                    border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
                                }

                                .elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type {
                                    flex-grow: 0;
                                    flex-shrink: 100;
                                }

                                .elementor-widget-divider--element-align-left .elementor-divider-separator:before {
                                    content: none;
                                }

                                .elementor-widget-divider--element-align-left .elementor-divider__element {
                                    margin-left: 0;
                                }

                                .elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type {
                                    flex-grow: 0;
                                    flex-shrink: 100;
                                }

                                .elementor-widget-divider--element-align-right .elementor-divider-separator:after {
                                    content: none;
                                }

                                .elementor-widget-divider--element-align-right .elementor-divider__element {
                                    margin-right: 0;
                                }

                                .elementor-widget-divider--element-align-start .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type {
                                    flex-grow: 0;
                                    flex-shrink: 100;
                                }

                                .elementor-widget-divider--element-align-start .elementor-divider-separator:before {
                                    content: none;
                                }

                                .elementor-widget-divider--element-align-start .elementor-divider__element {
                                    margin-inline-start: 0;
                                }

                                .elementor-widget-divider--element-align-end .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type {
                                    flex-grow: 0;
                                    flex-shrink: 100;
                                }

                                .elementor-widget-divider--element-align-end .elementor-divider-separator:after {
                                    content: none;
                                }

                                .elementor-widget-divider--element-align-end .elementor-divider__element {
                                    margin-inline-end: 0;
                                }

                                .elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator {
                                    border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
                                }

                                .elementor-widget-divider--separator-type-pattern {
                                    --divider-border-style: none;
                                }

                                .elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,
                                .elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,
                                .elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,
                                .elementor-widget-divider--separator-type-pattern:not([class*="elementor-widget-divider--view"]) .elementor-divider-separator {
                                    width: 100%;
                                    min-height: var(--divider-pattern-height);
                                    -webkit-mask-size: var(--divider-pattern-size) 100%;
                                    mask-size: var(--divider-pattern-size) 100%;
                                    -webkit-mask-repeat: var(--divider-pattern-repeat);
                                    mask-repeat: var(--divider-pattern-repeat);
                                    background-color: var(--divider-color);
                                    -webkit-mask-image: var(--divider-pattern-url);
                                    mask-image: var(--divider-pattern-url);
                                }

                                .elementor-widget-divider--no-spacing {
                                    --divider-pattern-size: auto;
                                }

                                .elementor-widget-divider--bg-round {
                                    --divider-pattern-repeat: round;
                                }

                                .rtl .elementor-widget-divider .elementor-divider__text {
                                    direction: rtl;
                                }

                                .e-con-inner>.elementor-widget-divider,
                                .e-con>.elementor-widget-divider {
                                    width: var(--container-widget-width, 100%);
                                    --flex-grow: var(--container-widget-flex-grow);
                                }
								
								
								
									.login-container {
									  width: 100%;
									  max-width: 580px;
									  padding: 20px;
									  margin: 0 auto;
									}

									/* Card */
									.login-card {
									  background: #fff;
									  padding: 35px;
									  border-radius: 12px;
									  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
									  text-align: center;
									}

									/* Headings */
									.login-card h2 {
									  margin-bottom: 10px;
									  color: #333;
									}

									.login-card p {
									  margin-bottom: 25px;
									  color: #777;
									}

									/* Input Group */
									.input-group {
									  position: relative;
									  margin-bottom: 25px;
									}

									.input-group input {
									  width: 100%;
									  padding: 12px 10px;
									  border: 1px solid #ccc;
									  border-radius: 6px;
									  outline: none;
									  font-size: 14px;
									}

									.input-group label {
									  position: absolute;
									  top: 50%;
									  left: 10px;
									  color: #999;
									  font-size: 14px;
									  pointer-events: none;
									  transform: translateY(-50%);
									  transition: 0.3s;
									}

									/* Floating label effect */
									.input-group input:focus + label,
									.input-group input:valid + label {
									  top: -8px;
									  left: 8px;
									  background: #fff;
									  padding: 0 5px;
									  font-size: 12px;
									  color: #667eea;
									}

									/* Button */
									button {
									  width: 100%;
									  padding: 12px;
									  background: linear-gradient(135deg, #667eea, #764ba2);
									  border: none;
									  border-radius: 25px;
									  color: #fff;
									  font-size: 15px;
									  cursor: pointer;
									  transition: 0.3s ease;
									}

									button:hover {
									  transform: translateY(-2px);
									  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
									}

									/* Footer */
									.footer {
									  margin-top: 20px;
									}

									.footer a {
									  font-size: 13px;
									  color: #667eea;
									  text-decoration: none;
									}

									.footer a:hover {
									  text-decoration: underline;
									}
									
									
									.register-form {
										background: #ffffff;
										padding: 35px;
										border-radius: 14px;
										
										text-align: center;
									}

									.register-form h2 {
										margin-bottom: 8px;
										color: #111827;
									}

									.register-form p {
										margin-bottom: 25px;
										color: #6b7280;
										font-size: 14px;
									}

									.input-group {
										position: relative;
										margin-bottom: 22px;
									}

									.input-group input {
										width: 100%;
										padding: 12px 10px;
										border: 1px solid #d1d5db;
										border-radius: 6px;
										outline: none;
										font-size: 14px;
									}

									.input-group label {
										position: absolute;
										top: 50%;
										left: 10px;
										transform: translateY(-50%);
										color: #9ca3af;
										font-size: 14px;
										pointer-events: none;
										transition: 0.3s ease;
										background: #fff;
									}

									/* Floating label effect */
									.input-group input:focus + label,
									.input-group input:valid + label {
										top: -8px;
										left: 8px;
										font-size: 12px;
										color: #4f46e5;
										padding: 0 5px;
									}

									button {
										width: 100%;
										padding: 12px;
										background: linear-gradient(135deg, #4f46e5, #06b6d4);
										border: none;
										border-radius: 25px;
										color: #ffffff;
										font-size: 15px;
										font-weight: 600;
										cursor: pointer;
										transition: all 0.3s ease;
									}

									button:hover {
										transform: translateY(-2px);
										box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
									}

									


                            </style>
                            <div class="elementor-divider">
                                <span class="elementor-divider-separator"> </span>
                            </div>
                        </div>
                    </div>
                    <div class="elementor-element elementor-element-f929560 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="f929560" data-element_type="widget" data-widget_type="divider.default">
                        <div class="elementor-widget-container">
                            <div class="elementor-divider">
                                <span class="elementor-divider-separator"> </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

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



<div class="login-container">


@if(session('successregisterd'))
	<div class="col-sm-12">
    <div class="row">
	<div class="col-sm-12">
	<div class="alert alert-success">
        {{ session('successregisterd') }}
    </div>
	</div>

	</div>
    </div>
    

   

@endif


@if(session('userloginmessage'))
	<div class="col-sm-12">
    <div class="row">
	<div class="col-sm-12">
	<div class="alert alert-success">
        {{ session('userloginmessage') }}
		{{ session('user_id') }}
    </div>
	</div>

	</div>
    </div>
    

   

@endif


@if ($errors->has('email'))
    <span class="text-danger text-center"><h5>{{ $errors->first('email') }}</h5></span>
@endif

    <form class="login-card" action="{{url('store-loginuser')}}" method="post" style="@if(session()->has('user_id')) {{'display:none'}} @else {{'display:block'}} @endif">
	@csrf
      <h2>Please log in before proceeding to fill the form.</h2>
     

      <div class="input-group">
        <input type="text" name="username" id="username" required>
        <label>Username</label>
      </div>

      <div class="input-group">
        <input type="password" name="userpass" id="userpass" required>
        <label>Password</label>
      </div>

      <button type="submit" style="    background: #115d92;
    color: #fff;
    border: 1px solid #115d92;
    border-radius: 9px;
   padding-bottom: 2px;
    padding-top: 2px;
    font-weight: bold;">Login</button>

      <div class="footer">
	   <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#signupform">Signup</a><br>
        <a href="#">Forgot Password?</a>
      </div>
    </form>
  </div>


<div class="modal" id="signupform" style="top: 38px;">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">
        <p>Please fill in the details to register</p></h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" style="background: #fff;"><i class="fa fa-close" ></i></button>
      </div>

      <!-- Modal body -->
	   <form class="register-form" action="{{url('store-registeruserform')}}" method="post">
      <div class="modal-body">
      
<div class="register-container">
    
        
        @csrf
        <div class="input-group">
            <input type="text" id="usernames" name="usernames" required>
            <label>Full Name</label>
        </div>

        <div class="input-group">
            <input type="email" id="useremailid" name="useremailid" required>
            <label>Email Address</label>
        </div>
		
		<div class="input-group">
            <input type="number" id="usercontactno" name="usercontactno" maxlength="10" required>
            <label>Contact No</label>
        </div>

        <div class="input-group">
            <input type="text" id="userloginname" name="userloginname" required>
            <label>Username</label>
        </div>

        <div class="input-group">
            <input type="password" id="userpasswords" name="userpasswords" required>
            <label>Password</label>
        </div>

        <div class="input-group">
            <input type="password" id="userconfirmpassword" name="userconfirmpassword" required>
            <label>Confirm Password</label>
        </div>
		 <div class="input-group">
           <span id="message"></span>
        </div>
		

        

      
   
</div>

      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
	   <button type="submit" style="color: #fff; border: 1px solid #15449e;">Register</button>
	   &nbsp; <button type="button" class="btn btn-danger" data-bs-dismiss="modal" style="font-size: 14px;
      color: #fff; padding: 8px;background: #dc3545;">Close</button><br>
	   <br><div class="form-footer">
            Already have an account? <a href="#">Login</a>
        </div>
        
      </div>
	  
	   </form>

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


@if(session('success'))
	<div class="col-sm-12">
    <div class="row">
	<div class="col-sm-12">
	<div class="alert alert-success">
        {{ session('success') }}
    </div>
	</div>
	<div class="col-sm-12 text-right">
	<button class="btn btn-info mt-3" data-bs-toggle="modal" data-bs-target="#previewModal" id="previewmodalformbtn">
    Preview Submitted Form
</button>
	</div>
	</div>
    </div>
    

   

@endif

<div id="formafterlogin" class="col-sm-12" style="@if(session()->has('user_id')) {{'display:block'}} @else {{'display:none'}} @endif">

<div class="col-sm-12" style="text-align:end;">
@if(session('user_id'))
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" style="font-size: 13px;
    padding: 10px;">
       {{ session('user_name') }} 
    </button>

    <ul class="dropdown-menu dropdown-menu-end">
        

        <li>
            <a class="dropdown-item text-danger" href="{{url('logoutgppitool')}}">
                Logout
            </a>
        </li>
    </ul>
</div>


@endif

</div>

<div class="container mt-5">
        <form id="multiStepForm" class="form-css" action="{{ route('gppi.submit') }}" method="post" enctype="multipart/form-data">
		@csrf
		     <div class="form-step active">
            <h3 style="color: #fff; background:#15449e; padding:8px;">I. Port Details</h3>
            
            <div class="row mb-3">
                <label class="col-sm-4 col-form-label" style="color:#000;">Name of the Port / Terminal<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="port_name" id="port_name">
					<span style="color:red; display:none;" id="portnameerror">Please enter port name</span>
                </div>
            </div>

            <div class="row mb-3">
                <label class="col-sm-4 col-form-label" style="color:#000;">Financial Year <small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <select class="form-control" name="financial_year" id="financial_year">
                        <option value="">--Select Year--</option>
                        @for ($i = 2021; $i <= date('Y'); $i++)
                            <option value="{{ $i }}">{{ $i }}</option>
                        @endfor
                    </select>
					<span style="color:red; display:none;" id="financialyearerror">Please Select Financial Year</span>
                </div>
            </div>

            <div class="row mb-3">
                <label class="col-sm-4 col-form-label" style="color:#000;">Name of Official filling the Form<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="official_name" id="official_name">
					<span style="color:red; display:none;" id="officialnameerror">Please enter official name</span>
                </div>
            </div>

            <div class="row mb-3">
                <label class="col-sm-4 col-form-label" style="color:#000;">Official Email ID<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="email" class="form-control" name="official_email">
                </div>
            </div>

            <div class="row mb-3">
                <label class="col-sm-4 col-form-label" style="color:#000;">Contact Number<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="tel" class="form-control" name="contact_number">
                </div>
            </div>

            <div class="row mb-3">
                <label class="col-sm-4 col-form-label" style="color:#000;">Cargo Handled<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="number" class="form-control" name="cargo_handled" placeholder="Metric Tonnes">
                </div>
            </div>

            <div class="row mb-3">
                <label class="col-sm-4 col-form-label" style="color:#000;">Total Land Area Owned by Port<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="number" class="form-control" name="land_area" placeholder="Acres">
                </div>
            </div>

            <div class="mt-3" style="text-align:end;">
                <button type="button" class="btn btn-primary next-btn">Next</button>
            </div>
        </div>
		
		 <div class="form-step">
            <h3 style="color: #fff; background:#15449e; padding:8px;">II. Fuel consumed by port owned / leased assets</h3>
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Sr. No.</th>
                        <th>Particulars</th>
                        <th>Quantity</th>
                        <th>Units</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $fuelTypes = [
                            ['Marine Diesel Oil','Liters'], ['High-Speed Diesel','Liters'], ['Low Sulphur Fuel Oil','Liters'], ['Heavy Fuel Oil','Liters'],
                            ['CNG / LNG','Kg'], ['Ammonia','Kg'], ['Methanol','Kg'], ['Hydrogen','Kg'],
                            ['Waste','Kg'], ['Others','-']
                        ];
                    @endphp
                    @foreach($fuelTypes as $index => $fuel)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $fuel[0] }}<small style="color:red;">*</small></td>
                            <td>
                                @if($fuel[0] == 'Others')
                                <input type="text" class="form-control" name="fuel_others">
                                @else
                                <input type="number" class="form-control" name="fuel_{{ strtolower(str_replace(' ', '_', $fuel[0])) }}">
                                @endif
                            </td>
                            <td>{{ $fuel[1] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            
            <div class="mt-3">
                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                <button type="button" class="btn btn-primary next-btn" >Next</button>
            </div>
			
        </div>
		
		       <div class="form-step">
            <h3 style="color: #fff; background:#15449e; padding:8px;">III. Fuel consumed by ships while berthed</h3>
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Sr. No.</th>
                        <th>Particulars</th>
                        <th>Quantity</th>
                        <th>Units</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($fuelTypes as $index => $fuel)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $fuel[0] }}<small style="color:red;">*</small></td>
                            <td>
                                @if($fuel[0] == 'Others')
                                <input type="text" class="form-control" name="ship_fuel_others">
                                @else
                                <input type="number" class="form-control" name="ship_fuel_{{ strtolower(str_replace(' ', '_', $fuel[0])) }}">
                                @endif
                            </td>
                            <td>{{ $fuel[1] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-3">
                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                <button type="button" class="btn btn-primary next-btn" style="text-align: end;">Next</button>
            </div>
        </div>
		
		  <div class="form-step">
            <h3 style="color: #fff; background:#15449e; padding:8px;">IV. Refrigerants Consumption</h3>
            <div class="row mb-3">
                <label class="col-sm-4 col-form-label">Refrigerants Leaked / released</label>
                <div class="col-sm-8">
                    <input type="number" class="form-control" name="refrigerants_leaked" placeholder="Kg">
                </div>
            </div>

            <div class="mt-3">
                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                <button type="button" class="btn btn-primary next-btn">Next</button>
            </div>
        </div>
		
		  <div class="form-step">
            <h3 style="color: #fff; background:#15449e; padding:8px;">V. Electricity Consumption</h3>
            <div class="row mb-3">
                <label class="col-sm-4 col-form-label">Total Electricity Consumption<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="number" class="form-control" name="total_electricity" placeholder="KWH">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-4 col-form-label">RE generated by the Port<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="number" class="form-control" name="re_generated" placeholder="KWH">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-4 col-form-label">RE purchased from grid<small style="color:red;">*</small></label>
                <div class="col-sm-8">
                    <input type="number" class="form-control" name="re_purchased" placeholder="KWH">
                </div>
            </div>

            <div class="mt-3">
                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                <button type="button" class="btn btn-primary next-btn">Next</button>
            </div>
        </div>
		
		      <div class="form-step">
            <h3 style="color: #fff; background:#15449e; padding:8px;">VI. Emissions from Trucking Operations</h3>

            @php
                $truckingSections = [
                    '(a) Intra-Terminal Operations',
                    '(b) Inter-Terminal Operations (within Port boundary)',
                    '(c) Port to nearby railyard / CFS / Warehouse / Customer Facility etc',
                    '(d) Port to Hinterland and Vice-Versa'
                ];
            @endphp

            @foreach($truckingSections as $index => $section)
                <div class="mb-2 d-flex justify-content-between align-items-center">
                    <h5>{{ $section }}<small style="color:red;">*</small></h5>
                    <button type="button" class="btn btn-success btn-sm add-truck-row" style="background: green;
		color: fff;
		padding: 4px;
		font-size: 12px;">Add More</button>
                </div>
                <table class="table table-bordered trucking-table" data-section="{{ $index }}">
                    <thead class="table-light">
                        <tr>
                            <th>GVW of trucks (Tons) <small style="color:red;">*</small></th>
                            <th>Avg. # of daily Trucks (Electric) <small style="color:red;">*</small></th>
                            <th>Avg. # of daily Trucks (Diesel)<small style="color:red;">*</small></th>
                            <th>Avg. distance travelled (km) per trip<small style="color:red;">*</small></th>
                            <th>Avg. # of daily trips per truck<small style="color:red;">*</small></th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="number" name="trucking[{{ $index }}][gvw][]" class="form-control"></td>
                            <td><input type="number" name="trucking[{{ $index }}][daily_electric][]" class="form-control"></td>
                            <td><input type="number" name="trucking[{{ $index }}][daily_diesel][]" class="form-control"></td>
                            <td><input type="number" name="trucking[{{ $index }}][distance][]" class="form-control"></td>
                            <td><input type="number" name="trucking[{{ $index }}][trips][]" class="form-control"></td>
                            <td><button type="button" class="btn btn-danger btn-sm remove-truck-row" style="background: red;color: fff;
		padding: 4px;
		font-size: 12px;">Remove</button></td>
                        </tr>
                    </tbody>
                </table>
            @endforeach

            <div class="mt-3">
                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                <button type="button" class="btn btn-primary next-btn" style="text-align: end;">Next</button>
            </div>
        </div>
		
		   <div class="form-step">
            <h3 style="color: #fff; background:#15449e; padding:8px;">VII. Others</h3>
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Sr. No.</th>
                        <th style="width:40%;">Particulars</th>
                        <th>Quantity</th>
                        <th>Units</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>Area under green vegetation<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="green_area"></td><td>Acres</td></tr>
                    <tr><td>2</td><td>Total material dredged (capital + maintenance)<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="material_dredged"></td><td>Cubic meters</td></tr>
                    <tr><td>3</td><td>Dredged material repurposed<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="dredged_repurposed"></td><td>Cubic meters</td></tr>
                    <tr><td>4</td><td>Sewage generated at the port<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="sewage_generated"></td><td>Cubic meters</td></tr>
                    <tr><td>5</td><td>Sewage treated by the port<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="sewage_treated"></td><td>Cubic meters</td></tr>
                    <tr><td>6</td><td>Waste disposed to Municipal Corporation or to landfill (onsite or offsite)<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="waste_disposed"></td><td>Cubic meters</td></tr>
                    <tr><td>7</td><td>Waste incinerated (not including Waste to Energy plants)<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="waste_incinerated"></td><td>Cubic meters</td></tr>
                    <tr><td>8</td><td>Total water consumption of the port / terminal from all sources including rainwater, recycled, treated water<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="water_consumption"></td><td>Cubic meters</td></tr>
                    <tr><td>9</td><td>Total fresh water taken from rivers, lakes, Municipal Corporation<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="fresh_water_taken"></td><td>Cubic meters</td></tr>
                </tbody>
            </table>

            <div class="mt-3">
                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                <button type="button" class="btn btn-primary next-btn" style="text-align: end;">Next</button>
            </div>
        </div>
		
		  <div class="form-step">
            <h3 style="color: #fff; background:#15449e; padding:8px;">VIII. Environmental Health Monitoring</h3>
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Sr. No.</th>
                        <th style="width:40%;">Particulars</th>
                        <th>Quantity</th>
                        <th>Units</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>No. of Continuous ambient air quality monitors installed<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="no_of_contionous_ambient_installed"></td><td>NO</td></tr>
                    <tr><td>2</td><td>No. of Continuous ambient air quality monitors required to be installed as per SPCB / CPCB<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="no_of_contionous_ambient_tobe_installed"></td><td>NO</td></tr>
                    <tr><td>3</td><td>No. of Continuous marine water quality monitors installed<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="no_of_marine_water_quality_installed"></td><td>No</td></tr>
                    <tr><td>4</td><td>No. of Continuous marine water quality monitors required to be installed as per SPCB / CPCB<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="no_of_marine_water_quality_tobe_installed"></td><td>NO</td></tr>
                    <tr><td>5</td><td>No. of Continuous Noise monitors installed <small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="no_noise_monitors_installed"></td><td>NO</td></tr>
                    <tr><td>6</td><td>No. of Continuous Noise monitors required to be installed as per SPCB / CPCB<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="no_noise_monitors_tobe_installed"></td><td>NO</td></tr>
                    <tr><td>7</td><td>No. of continuous emission monitors installed<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="emission_monitors_installed"></td><td>NO</td></tr>
                    <tr><td>8</td><td>No. of continuous emission monitors required to be installed as per SPCB / CPCB<small style="color:red;">*</small></td>
					<td><input type="number" class="form-control" name="emission_monitors_tobe_installed"></td><td>NO</td></tr>
                    <tr><td>9</td><td>Air Quality<small style="color:red;">*</small></td><td>
					<input type="file" class="form-control" name="air_quality" accept=".pdf,.DOC,.Docx,.doc"></td><td>@if((session('air_quality_old')) != '')<a href="{{ asset('local/public/uploads/air_quality_docs/'.session('air_quality_old')) }}">Download document</a> @endif</td></tr>
					<tr><td>10</td><td>Harbour Water Quality<small style="color:red;">*</small></td><td><input type="file" class="form-control" name="harbour_water_quality" accept=".pdf,.DOC,.Docx,.doc"></td><td>@if((session('harbour_water_quality_old')) != '')<a href="{{ asset('local/public/uploads/air_quality_docs/'.session('harbour_water_quality_old')) }}">Download document</a> @endif</td></tr>
					<tr><td>11</td><td>Noise Levels<small style="color:red;">*</small></td><td><input type="file" class="form-control" name="noise_levels" accept=".pdf,.DOC,.Docx,.doc"></td><td>@if((session('noise_levels_old')) !='')<a href="{{ asset('local/public/uploads/air_quality_docs/'.session('noise_levels_old')) }}">Download document</a> @endif</td></tr>
					<tr><td>12</td><td>STP Effluent discharge quality <small style="color:red;">*</small></td><td><input type="number" class="form-control" name="stp_effulent_dischage_auality"></td><td>-</td></tr>
                </tbody>
            </table>

            <div class="mt-3 text-center">
			<input type="hidden" name="userids" value="{{ session('user_id') }}" id="userids">
			<input type="hidden" name="gppi_id" id="gppi_id">
			<input type="hidden" name="air_quality_old" id="air_quality_old" value="{{ session('air_quality_old') }}">
			<input type="hidden" name="harbour_water_quality_old" id="harbour_water_quality_old" value="{{ session('harbour_water_quality_old') }}">
			<input type="hidden" name="noise_levels_old" id="noise_levels_old" value="{{ session('noise_levels_old') }}">
                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                <button type="button" id="submitformdata" class="btn btn-success submitform" style="text-align: end;">Submit Form</button>
            </div>
        </div>


		</form>

  
</div>
</div>


</div>
</div>









@endsection
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Form Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body" id="previewContent" style="padding-left:10px; padding-right:10px;">
               
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="submitfinalformdatasss">Submit Data</button>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>

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

<style>
.form-css {
    border: 1px solid #4f494545;
    padding: 10px;
    box-shadow: 0px 4px 2px 2px #4f49456e;
    margin-bottom:50px;
}

.form-step { display:none; }
.form-step.active { display:block; }
.next-btn
{
	background: #115d92 !important;
    color: #fff!important;
    font-size: 15px!important;
    padding-top: 5px!important;
    padding-bottom: 5px!important;
    padding-right: 10px!important;
    padding-left: 10px!important;
}

.prev-btn

{
	background: #115d92 !important;
    color: #fff!important;
    font-size: 15px!important;
    padding-top: 5px!important;
    padding-bottom: 5px!important;
    padding-right: 10px!important;
    padding-left: 10px!important;
}
.submitform
{
	background: #115d92 !important;
    color: #fff!important;
    font-size: 15px!important;
    padding-top: 5px!important;
    padding-bottom: 5px!important;
    padding-right: 10px!important;
    padding-left: 10px!important;
}

.is-invalid {
    border: 1px solid red;
}
.text-danger {
    font-size: 12px;
    margin-top: 2px;
    display: block;
}

.modal {
    position: fixed;
    top: 33px;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    z-index: 9999;
}
.modal-content
{
	padding:20px;
}

#submitfinalformdatasss
{
	background: #115d92;
    margin: 0px 10px 4px 0;
    display: inline-block;
    font-family: "Heebo", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: var(--e-global-typography-3b8b470-line-height);
    letter-spacing: var(--e-global-typography-3b8b470-letter-spacing);
    word-spacing: var(--e-global-typography-3b8b470-word-spacing);
    color: #fff;
    padding: 8px;
    border-radius: 15px;
}
.btn-danger
{
	margin: 0px 10px 4px 0;
    display: inline-block;
    font-family: "Heebo", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: var(--e-global-typography-3b8b470-line-height);
    letter-spacing: var(--e-global-typography-3b8b470-letter-spacing);
    word-spacing: var(--e-global-typography-3b8b470-word-spacing);
    color: #fff;
    padding: 8px;
    border-radius: 15px;
	    background: red;
}

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>


 <script>
 

$(document).ready(function () {
	
	  var validator = $("#multiStepForm").validate({
		
        ignore: [],

        rules: {
            port_name: { required: true },
            financial_year: { required: true },
            official_name: { required: true },
            official_email: { required: true, email: true },
            contact_number: { required: true, digits: true, minlength: 10 },
            cargo_handled: { required: true, number: true },
            land_area: { required: true, number: true },
			fuel_marine_diesel_oil: { required: true, number: true },
			'fuel_high-speed_diesel': { required: true, number: true },
			ship_fuel_low_sulphur_fuel_oil: { required: true, number: true },
			fuel_heavy_fuel_oil: { required: true, number: true },
            'fuel_cng_/_lng': { required: true, number: true },
            fuel_ammonia: { required: true, number: true },
			fuel_methanol: { required: true, number: true },
			fuel_hydrogen: { required: true, number: true },
			fuel_waste: { required: true, number: true },
			fuel_others: { required: true, number: true },
			ship_fuel_marine_diesel_oil: { required: true, number: true },
			'ship_fuel_high-speed_diesel': { required: true, number: true },
			ship_fuel_low_sulphur_fuel_oil: { required: true, number: true },
			ship_fuel_heavy_fuel_oil: { required: true, number: true },
			'ship_fuel_cng_/_lng': { required: true, number: true },
			ship_fuel_ammonia: { required: true, number: true },
			ship_fuel_methanol: { required: true, number: true },
			ship_fuel_hydrogen: { required: true, number: true },
			ship_fuel_waste: { required: true, number: true },
			ship_fuel_others: { required: true, number: true },
			refrigerants_leaked: { required: true, number: true },
			
            total_electricity: { required: true, number: true },
            re_generated: { required: true, number: true },
            re_purchased: { required: true, number: true },
			green_area: { required: true, number: true },
			material_dredged: { required: true, number: true },
			dredged_repurposed: { required: true, number: true },
			sewage_generated: { required: true, number: true },
			sewage_treated: { required: true, number: true },
			waste_disposed: { required: true, number: true },
			waste_incinerated: { required: true, number: true },
			water_consumption: { required: true, number: true },
			fresh_water_taken: { required: true, number: true },
			no_of_contionous_ambient_installed: { required: true, number: true },
			no_of_contionous_ambient_tobe_installed: { required: true, number: true },
			no_of_marine_water_quality_installed: { required: true, number: true },
			no_of_marine_water_quality_tobe_installed: { required: true, number: true },
			no_noise_monitors_installed: { required: true, number: true },
			no_noise_monitors_tobe_installed: { required: true, number: true },
			emission_monitors_installed: { required: true, number: true },
			emission_monitors_tobe_installed: { required: true, number: true }
			
		 },

        errorClass: "text-danger",
        highlight: function (el) {
            $(el).addClass('is-invalid');
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        unhighlight: function (el) {
            $(el).removeClass('is-invalid');
        }
    });

 $('#userpasswords, #userconfirmpassword').on('keyup', function () {
  if ($('#userpasswords').val() == $('#userconfirmpassword').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else {
    $('#message').html('Not Matching').css('color', 'red');
  }
});

    let currentStep = 0;
    const steps = $('.form-step');
    let saveTimer;
	let gppi_id = $('#gppi_id').val() || null;

 function showStep(index) {
    if (index < 0) index = 0;
    if (index >= steps.length) index = steps.length - 1;

    currentStep = index;

    steps.removeClass('active');
    steps.eq(currentStep).addClass('active');

    // optional: scroll top
    window.scrollTo(0, 0);
}




    
    showStep(currentStep);

   
  
   
    function validateCurrentStep() {
    let valid = true;

    let fields = steps.eq(currentStep).find('input, select, textarea');

    fields.each(function () {

        let $el = $(this);

      
        if ($el.is(':disabled')) return;

        
        let result = validator.element(this);

        if (result === false) {
            valid = false;
        }
    });

    return valid;
}


   
    // function updateNextButton() {
        // let isValid = true;

        // steps.eq(currentStep).find('input, select').each(function () {
            // if (!validator.element(this)) {
                // isValid = false;
            // }
        // });

        // steps.eq(currentStep).find('.next-btn').prop('disabled', !isValid);
    // }

    
    // function saveToDatabase() {

        // let formData = new FormData($('#multiStepForm')[0]);
        // formData.append('step', currentStep);

        // $.ajax({
            // url: "{{ url('../save-draft') }}",
            // method: "POST",
            // data: formData,
            // processData: false,
            // contentType: false,
            // headers: {
                // 'X-CSRF-TOKEN': '{{ csrf_token() }}'
            // }
        // });
    // }

    // function autoSaveDebounced() {
        // clearTimeout(saveTimer);
        // saveTimer = setTimeout(saveToDatabase, 1000);
    // }
	
	function generatePreview() {

    let html = '';

   
    html += `<h5 class="text-primary">I. Port Details</h5>`;
    html += `<p><strong>Port Name:</strong>&nbsp; ${$('#port_name').val()}</p>`;
    html += `<p><strong>Financial Year:</strong>&nbsp; ${$('#financial_year').val()}</p>`;
    html += `<p><strong>Official Name:</strong>&nbsp; ${$('#official_name').val()}</p>`;
    html += `<p><strong>Email:</strong>&nbsp; ${$('input[name="official_email"]').val()}</p>`;
    html += `<p><strong>Contact:</strong>&nbsp; ${$('input[name="contact_number"]').val()}</p>`;
    html += `<p><strong>Cargo Handled:</strong>&nbsp; ${$('input[name="cargo_handled"]').val()}</p>`;
    html += `<p><strong>Land Area:</strong>&nbsp; ${$('input[name="land_area"]').val()}</p>`;


    html += `<hr><h5 class="text-primary">II. Fuel consumed by port owned / leased assets</h5><ul>`;
    html += `<li><strong>Marine Diesel Oil:</strong> &nbsp; ${$('input[name="fuel_marine_diesel_oil"]').val()}</li>`;
    html += `<li><strong>High-Speed Diesel:</strong> &nbsp; ${$('input[name="fuel_high-speed_diesel"]').val()}</li>`;
    html += `<li><strong>Low Sulphur Fuel Oil:</strong>&nbsp;  ${$('input[name="fuel_low_sulphur_fuel_oil"]').val()}</li>`;
    html += `<li><strong>Heavy Fuel Oil:</strong> &nbsp; ${$('input[name="fuel_heavy_fuel_oil"]').val()}</li>`;
    html += `<li><strong>CNG/LNG:</strong> &nbsp; ${$('input[name="fuel_cng_/_lng"]').val()}</li>`;
	html += `<li><strong>Ammonia:</strong> &nbsp; ${$('input[name="fuel_ammonia"]').val()}</li>`;
	html += `<li><strong>Methanol:</strong> &nbsp;${$('input[name="fuel_methanol"]').val()}</li>`;
	html += `<li><strong>Hydrogen:</strong>&nbsp; ${$('input[name="fuel_hydrogen"]').val()}</li>`;
	html += `<li><strong>Waste:</strong>&nbsp; ${$('input[name="fuel_waste"]').val()}</li>`;
    html += `<li><strong>Others:</strong>&nbsp; ${$('input[name="fuel_others"]').val()}</li>`;
    html += `</ul>`;
	
	
	html += `<hr><h5 class="text-primary">III. Fuel consumed by ships while berthed</h5><ul>`;
    html += `<li>Marine Diesel Oil: ${$('input[name="ship_fuel_marine_diesel_oil"]').val()}</li>`;
    html += `<li>High-Speed Diesel: ${$('input[name="ship_fuel_high-speed_diesel"]').val()}</li>`;
    html += `<li>Low Sulphur Fuel Oil: ${$('input[name="ship_fuel_low_sulphur_fuel_oil"]').val()}</li>`;
    html += `<li>Heavy Fuel Oil: ${$('input[name="ship_fuel_heavy_fuel_oil"]').val()}</li>`;
    html += `<li>CNG/LNG: ${$('input[name="ship_fuel_cng_/_lng"]').val()}</li>`;
	html += `<li>Ammonia: ${$('input[name="ship_fuel_ammonia"]').val()}</li>`;
	html += `<li>Methanol: ${$('input[name="ship_fuel_methanol"]').val()}</li>`;
	html += `<li>Hydrogen: ${$('input[name="ship_fuel_hydrogen"]').val()}</li>`;
	html += `<li>Waste: ${$('input[name="ship_fuel_waste"]').val()}</li>`;
    html += `<li>Others: ${$('input[name="ship_fuel_others"]').val()}</li>`;
    html += `</ul>`;
	
    html += `<hr><h5 class="text-primary">IV. Refrigerants Consumption</h5><ul>`;
    html += `<li>Refrigerants Leaked / released: ${$('input[name="refrigerants_leaked"]').val()}</li>`;

    html += `</ul>`;

    
    html += `<hr><h5 class="text-primary">V. Electricity</h5>`;
    html += `<p>Total Electricity Consumption: ${$('input[name="total_electricity"]').val()}</p>`;
    html += `<p>RE generated by the Port: ${$('input[name="re_generated"]').val()}</p>`;
    html += `<p>RE purchased from grid: ${$('input[name="re_purchased"]').val()}</p>`;
	
	
html += `<hr><h5 class="bg-primary text-white p-2">VI. Emissions from Trucking Operations</h5>`;

const sectionTitles = [
    '(a) Intra-Terminal Operations',
    '(b) Inter-Terminal Operations (within Port boundary)',
    '(c) Port to nearby railyard / CFS / Warehouse / Customer Facility etc',
    '(d) Port to Hinterland and Vice-Versa'
];


$('.trucking-table').each(function (sectionIndex) {

    html += `<h6 class="mt-3">${sectionTitles[sectionIndex]}</h6>`;

    html += `
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>GVW</th>
                    <th>Electric</th>
                    <th>Diesel</th>
                    <th>Distance</th>
                    <th>Trips</th>
                </tr>
            </thead>
            <tbody>
    `;

    
    $(this).find('tbody tr').each(function () {

        let gvw = $(this).find('input[name*="[gvw]"]').val();
        let electric = $(this).find('input[name*="[daily_electric]"]').val();
        let diesel = $(this).find('input[name*="[daily_diesel]"]').val();
        let distance = $(this).find('input[name*="[distance]"]').val();
        let trips = $(this).find('input[name*="[trips]"]').val();

        html += `
            <tr>
                <td>${gvw || '-'}</td>
                <td>${electric || '-'}</td>
                <td>${diesel || '-'}</td>
                <td>${distance || '-'}</td>
                <td>${trips || '-'}</td>
            </tr>
        `;
    });

    html += `</tbody></table>`;
});


    
    html += `<hr><h5 class="text-primary">VII. Others</h5>`;
    html += `<p>Area under green vegetation: ${$('input[name="green_area"]').val()}</p>`;
    html += `<p>Total material dredged (capital + maintenance): ${$('input[name="material_dredged"]').val()}</p>`;
    html += `<p>Dredged material repurposed: ${$('input[name="dredged_repurposed"]').val()}</p>`;
	html += `<p>Sewage generated at the port: ${$('input[name="sewage_generated"]').val()}</p>`;
	html += `<p>Sewage treated by the port: ${$('input[name="sewage_treated"]').val()}</p>`;
	html += `<p>Waste disposed to Municipal Corporation or to landfill (onsite or offsite): ${$('input[name="waste_disposed"]').val()}</p>`;
    html += `<p>Waste incinerated (not including Waste to Energy plants): ${$('input[name="waste_incinerated"]').val()}</p>`;
	html += `<p>Total water consumption of the port / terminal from all sources including rainwater, recycled, treated water: ${$('input[name="water_consumption"]').val()}</p>`;
	html += `<p>Total fresh water taken from rivers, lakes, Municipal Corporation: ${$('input[name="fresh_water_taken"]').val()}</p>`;
	
	    html += `<hr><h5 class="text-primary">VIII. Environmental Health Monitoring</h5>`;
    html += `<p>No. of Continuous ambient air quality monitors installed: ${$('input[name="no_of_contionous_ambient_installed"]').val()}</p>`;
    html += `<p>No. of Continuous ambient air quality monitors required to be installed as per SPCB / CPCB: ${$('input[name="no_of_contionous_ambient_tobe_installed"]').val()}</p>`;
    html += `<p>No. of Continuous marine water quality monitors installed: ${$('input[name="no_of_marine_water_quality_installed"]').val()}</p>`;
	html += `<p>No. of Continuous marine water quality monitors required to be installed as per SPCB / CPCB: ${$('input[name="no_of_marine_water_quality_tobe_installed"]').val()}</p>`;
	html += `<p>No. of Continuous Noise monitors installed: ${$('input[name="no_noise_monitors_installed"]').val()}</p>`;
	html += `<p>No. of Continuous Noise monitors required to be installed as per SPCB / CPCB: ${$('input[name="no_noise_monitors_tobe_installed"]').val()}</p>`;
    html += `<p>No. of continuous emission monitors installed: ${$('input[name="emission_monitors_installed"]').val()}</p>`;

	html += `<p>No. of continuous emission monitors required to be installed as per SPCB / CPCB: ${$('input[name="emission_monitors_tobe_installed"]').val()}</p>`;
	
	return html;
}


   
   function loadDraft() {

    let gppi_id = $('#userids').val();
	

    if (!gppi_id || gppi_id === 'null') return;

    $.get('/get-draft/' + gppi_id, function (res) {

        

        if (res.form_data) {
            $.each(res.form_data, function (key, value) {
                let field = $('[name="' + key + '"]');
                if (!field.length) return;
                if (field.attr('type') === 'file') return;
                 field.val(value);
            });
        }

        console.log("Before trucking check");

			if (res.trucking) {
				console.log("Calling loadTrucking");
				loadTrucking(res.trucking);
			} else {
				console.log("No trucking data");
			}
		
		if (res.form_data.id) {
        $('#gppi_id').val(res.form_data.id);
		
		  
		
    }
    });
}

function loadTrucking(trucking) {
	 

    if (!trucking) return;
	

    $.each(trucking, function (sectionIndex, rows) {
		

        let table = $('.trucking-table[data-section="' + sectionIndex + '"]');

        if (!table.length) return;

        let tbody = table.find('tbody');

        tbody.empty(); 

        $.each(rows, function (i, row) {

            let newRow = `<tr>
                <td><input type="number" name="trucking[${sectionIndex}][gvw][]" value="${row.gvw ?? ''}" class="form-control"></td>
                <td><input type="number" name="trucking[${sectionIndex}][daily_electric][]" value="${row.daily_electric ?? ''}" class="form-control"></td>
                <td><input type="number" name="trucking[${sectionIndex}][daily_diesel][]" value="${row.daily_diesel ?? ''}" class="form-control"></td>
                <td><input type="number" name="trucking[${sectionIndex}][distance][]" value="${row.distance ?? ''}" class="form-control"></td>
                <td><input type="number" name="trucking[${sectionIndex}][trips][]" value="${row.trips ?? ''}" class="form-control"></td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-truck-row">Remove</button>
                </td>
            </tr>`;
           
            tbody.append(newRow);
        });

    });
}





   
    $('#multiStepForm').on('keyup change', 'input, select', function () {

        validator.element(this);
        //updateNextButton();
        //autoSaveDebounced();
    });

   
   
   $(document).on('click', '.next-btn', function (e) {
    e.preventDefault();

     let formData = new FormData($('#multiStepForm')[0]);
    formData.append('step', currentStep + 1);

    if (gppi_id) {
        formData.append('gppi_id', gppi_id);
    }

    $.ajax({
        url: '../save-step',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {

          $('#gppi_id').val(res.gppi_id);
		
            currentStep++;
            showStep(currentStep);
        }
    });
});



    
    $('.prev-btn').click(function () {
        currentStep--;
        showStep(currentStep);
    });

   
$('#submitformdata').click(function (e) {
    e.preventDefault();

    
    let isValid = validator.form();

    if (!isValid) {
        alert("Please fill all required fields.");
        return;
    }
	

   
    $('#previewContent').html(generatePreview());

    
    var modal = new bootstrap.Modal(document.getElementById('previewModal'));
    modal.show();
	
	
});



$('#submitfinalformdatasss').on('click', function (e) {
    e.preventDefault();

    let form = $("#multiStepForm");

    if (!form.valid()) {
        alert('Please fill all required fields');
        return;
    }

    let formData = new FormData(form[0]);
    
    
    formData.append('is_final', 1); 

    $.ajax({
        url: '../save-step',   
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {

            if (res.success) {


                if (res.redirect) {
					alert('Data Submitted Successfully');
					
                    window.location.href = res.redirect; 
                }
            }
        }
    });
});










    $(document).on('click', '.add-truck-row', function () {

        const table = $(this).closest('.mb-2').next('table');
        const tbody = table.find('tbody');

        let newRow = tbody.find('tr:first').clone();

        newRow.find('input').val('').removeClass('is-invalid');

        tbody.append(newRow);
    });

    
    $(document).on('click', '.remove-truck-row', function () {

        const row = $(this).closest('tr');
        const tbody = row.closest('tbody');

        if (tbody.find('tr').length > 1) {
            row.remove();
        } else {
            alert('At least one row required');
        }
    });

   
    loadDraft();
	
	


});
</script>