@extends('layouts.app')
@section('title', 'blog')
@section('idname', 'single')
@section('content')

<div class="container " style="margin-top: 200px;">
	 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-custom">
    <div class="card-custom">
        <div class="form">
            <div class="left-side">
                <div class="left-heading">
                    <h3>Register a Recording</h3>
                </div>
                <div class="steps-content">
                    <h3>Step <span class="step-number">1</span></h3>
                    <p style="display:none;" class="step-number-content active">Enter your personal information to get closer to companies.</p>
                    <p class="step-number-content d-none">Get to know better </p>
                    <p class="step-number-content d-none">Help companies get to know you better by telling then about your past experiences.</p>
                    <p class="step-number-content d-none">Add your profile piccture and let companies find youy fast.</p>
                </div>
                <ul class="progress-bar-custom">
                    <li class="active">General Information</li>
                    <li>Rights</li>
                    <li>Recording Information</li>
                    <li>Performer line up</li>
					<li>Review</li>
                </ul>
                

                
            </div>
            <div class="right-side">
                @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
                 <form action="{{ route('recordings.edit', $recording->id) }}" method="post">
                     @csrf
                <div class="main active">

                    			<div class="form-row">
            <div class="form-group col-md-6">
                <label for="birthdate">ISRC</label>
                <input placeholder="Write here" value="{{ old('isrc', $recording->isrc) }}" require type="text" class="form-control" name="isrc" value="{{ old('isrc') }}" id="birthdate" >
            </div>
            <div class="form-group col-md-6">
                <label></label>
                <small class="form-text text-muted">Provide accurate information for better service.</small>
            </div>
        </div>
		
		      
		<div class="form-row">
            
            <div class="form-group col-md-6">
                <label for="lastName">Band/Artist Name</label>
                <input value="{{ old('band_artist_name', $recording->band_artist_name) }}" require type="text" class="form-control" id="lastName"  name="band_artist_name" placeholder="Write here" >
            </div>
        </div>
		
		<div class="form-row">
		<div class="form-group col-md-6">
            <label for="username">Recording Title</label>
            <div class="input-group">
                <input value="{{ old('recording_title', $recording->recording_title) }}" type="text" class="form-control" id="username" name="recording_title" placeholder="Write here" >
               
            </div>
            <small class="form-text text-muted">Choose a unique username for your account.</small>
        </div>
		</div>	
		
<div class="form-row">
    <div class="form-group col-md-6">
        <label for="lastName">Version type</label>
        <input value="{{ old('version_type', $recording->version_type) }}" type="text" class="form-control" id="lastName" name="version_type" placeholder="Write here" >
    </div>

    <div class="form-group col-md-6">
        <label for="agreeTerms">Remastered</label>
        <div class="form-check">
            
            <label class="form-check-label" for="agreeTerms">The record is remastered</label>
			
			<label class="switch ml-2">
        <input name="remastered" type="checkbox" value="yes" id="toggleSwitch">
        <span class="slider"></span>
    </label>
        </div>
    </div>
</div>

		
		
		<div class="form-row">
            
            <div class="form-group col-md-6">
                <label for="lastName">Genre</label>
                <input value="{{ old('genre', $recording->genre) }}"  type="text" class="form-control" id="lastName" name="genre" placeholder="Write here" >
            </div>
        </div>
		
		
					
                    
		
		<div class="form-row">
            <div class="form-group col-md-4">
                <label for="email">Content Type</label>
                
                <select name="content_type" class="form-control" id="fieldDepartment">
                    <option value="" selected disabled>Select Type</option>
                    <option value="music">Music</option>
                    <option value="musicvideo">Music Video</option>
                    
                </select>
            
            </div>
            <div class="form-group col-md-4">
                <label for="phone">P(Date):</label>
               
                <div class="input-group date">
        <input value="{{ old('performance_date', $recording->performance_date) }}" name="performance_date" type="text" class="form-control" id="pdate" autocomplete="off">
        <div class="input-group-append">
            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
        </div>
    </div>
            </div>
        </div>
                    <div class="buttons">
                        <button class="next_button">Next Step</button>
                        <button name="save" value="save_as_draft" class="">Save As draft</button>
                    </div>
                </div>
                <div class="main">
                    <div class="form-group col-md-12">
        
        <div class="form-check">
            
            <label class="form-check-label" for="agreeTerms">I do not own the rights to this recording</label>
			
			<label class="switch ml-2">
        <input  name="right_record" value="yes" type="checkbox" id="toggleSwitch">
        <span class="slider"></span>
    </label>
        </div>
    </div>
	
	<div class="form-row">
            
            <div class="form-group col-md-12">
                <label for="lastName">Rightsholder details</label>
                <!-- <input value="{{ old('non_featured_performers') }}" require name="non_featured_performers" type="text" class="form-control" id="lastName" placeholder="Write here" > -->
                <textarea require name="rightholder" type="text" class="form-control" id="lastName">{{ old('rightholder', $recording->rightholder) }}</textarea>
            </div>
        </div>
		
		
		<h2>Ownership</h2>
		<!-- <button type="button" id='addOwnershipBtn' class='btn btn-primary'>Add Ownership</button> -->
		<div id='ownership'><div class="form-row">
            
            <div class="form-group col-md-6">
                <label for="lastName">Repertoire ownership name</label>
                <input value="{{ old('country_of_performance', $recording->country_of_performance) }}"   type="text" class="form-control" name='ownername' id="ownershipname1" placeholder="Repertoire ownership name" >
            </div>
			
			<div class="form-group col-md-6">
                
                
                <label for="email">Repertoire ownership type</label>
                
                <select name="ownertype" class="form-control"  id="ownershiptype1">
                    <option value="" selected disabled>Select ownership type</option>
                    <option value="sales">Sales</option>
                    <option value="support">Support</option>
                    <option value="billing">Billing</option>
                </select>
            
            
            </div>
        </div>
		
		<div class="form-row">
            
            <div class="form-group col-md-6">
                <label for="lastName">Ownership start date</label>
                
                <div class="input-group date">
        <input value="{{ old('ownerdate', $recording->ownerdate) }}" name="ownerdate" type="text" class="form-control" name="ownerdate" id="startdate1" autocomplete="off" >
        <div class="input-group-append">
            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
        </div>
    </div>
            </div>
			
			<div class="form-group col-md-6">
                <label for="lastName">Ownership percentage</label>
                <input value="{{ old('ownerpercentage', $recording->ownerpercentage) }}" name="alternative_title" type="text" class="form-control" name="ownerpercentage" id="ownerpercentage1" placeholder="Ownership percentage" >
            </div>
        </div>
		</div>
                    <div class="buttons button_space">
                        <button class="back_button">Back</button>
                        <button class="next_button">Next Step</button>
                        <button name="save" value="save_as_draft" class="">Save As draft</button>
                    </div>
                </div>
                <div class="main">
                            <div class="form-row">
            <div class="form-group col-md-6">
                <label for="recordingCpName">(P)Name</label>
                <input value="{{ old('recording_cp_name', $recording->recording_cp_name) }}" name="recording_cp_name" type="text" class="form-control" id="recordingCpName" placeholder="Enter Recording CP Name">
            </div>
            <div class="form-group col-md-6">
                <label for="primaryCountry">Primary Country of Recording</label>
                <input value="{{ old('primary_country_of_recording',$recording->primary_country_of_recording) }}" name="primary_country_of_recording" type="text" class="form-control" id="primaryCountry" placeholder="Enter Primary Country">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="alternativeTitle">Alternative Title</label>
                <input value="{{ old('alternative_title',$recording->alternative_title) }}" name="alternative_title" type="text" class="form-control" id="alternativeTitle" placeholder="Enter Alternative Title">
            </div>
            <div class="form-group col-md-6">
    <label for="recordingDate">Recording Date</label>
    <div class="input-group date">
        <input value="{{ old('recording_date',$recording->recording_date) }}" name="recording_date" type="text" class="form-control" id="recordingDate" autocomplete="off">
        <div class="input-group-append">
            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
        </div>
    </div>
</div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-3">
                <label for="duration">Duration</label>
                <input value="{{ old('duration',$recording->duration) }}" name="duration" type="text" class="form-control" id="alternativeTitle" placeholder="min:ss ex: 02:01">
            </div>
            <div class="form-group col-md-3">
                <label for="agreeTerms"></label>
        <div class="form-check">
            
            <label class="form-check-label" for="agreeTerms">Explicit</label>
            
            <label class="switch ml-2">
        <input name="explicit" type="checkbox" value="yes" id="toggleSwitch">
        <span class="slider"></span>
    </label>
        </div>
            </div>
            <div class="form-group col-md-3">
                <label for="agreeTerms"></label>
        <div class="form-check">
            
            <label class="form-check-label" for="agreeTerms">Sample</label>
            
            <label class="switch ml-2">
        <input name="sample" type="checkbox" value="yes" id="toggleSwitch">
        <span class="slider"></span>
    </label>
        </div>
            </div>
            <div class="form-group col-md-3">
                <label for="agreeTerms"></label>
        <div class="form-check">
            
            <label class="form-check-label" for="agreeTerms">Medley</label>
            
            <label class="switch ml-2">
        <input name="medley" type="checkbox" value="yes" id="toggleSwitch">
        <span class="slider"></span>
    </label>
        </div>
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="language">Language</label>
                <select name="language" class="form-control" id="language">
                    <option value="english">English</option>
                    <!-- Add more language options as needed -->
                </select>
            </div>
            <div class="form-group col-md-6">
                <label for="recordingVenue">Recording Venue</label>
                <input value="{{ old('recording_venue',$recording->recording_venue) }}" name="recording_venue" type="text" class="form-control" id="recordingVenue" placeholder="Enter Recording Venue">
            </div>
        </div>

       <div class="form-row">
    <div class="form-group col-md-6">
        <label for="countryCommissioning">Country of Commissioning</label>
        <select name="country_of_commissioning" class="form-control" id="countryCommissioning">
            <option value="" selected disabled>Choose a country</option>
        </select>
    </div>
    <div class="form-group col-md-6">
        <label for="countryFirstPublication">Country of First Publication</label>
        <select name="country_of_first_publication" class="form-control" id="countryFirstPublication">
            <option value="" selected disabled>Choose a country</option>
        </select>
    </div>
</div>

       <div class="form-row">
    <div class="form-group col-md-6">
        <label for="countryCommissioning">Publisher Name</label>
                <input value="{{ old('pub_name',$recording->pub_name) }}" name="pub_name" type="text" class="form-control" id="pub_name" placeholder="Publisher Name">
    </div>
    <div class="form-group col-md-6">
        <label for="recordingVenue">Publisher Percentage</label>
                <input value="{{ old('pub_per',$recording->pub_per) }}" name="pub_per" type="text" class="form-control" id="pub_per" placeholder=" 0.00%">
    </div>
</div>


                    <div class="buttons button_space">
                        <button class="back_button">Back</button>
                        <button class="next_button">Next Step</button>
                        <button name="save" value="save_as_draft" class="">Save As draft</button>
                    </div>
                </div>
                
                
                
                <div class="main">
                    <div class="col-md-6">
      
                <div class="form-group">
                    <label for="featuredPerformers">Number of Featured Performers</label>
                    <input value="{{ old('featured_performers',$recording->featured_performers) }}" name="featured_performers" type="number" class="form-control" id="featuredPerformers" placeholder="Enter the number of featured performers">
                </div>

                <div class="form-group">
                    <label for="nonFeaturedPerformers">Number of Non-Featured Performers</label>
                    <input value="{{ old('non_featured_performers',$recording->non_featured_performers) }}" name="non_featured_performers" type="number" class="form-control" id="nonFeaturedPerformers" placeholder="Enter the number of non-featured performers">
                </div>

                <div class="form-group">
                    <label for="performanceDate">Date of Performance</label>
                    <input value="{{ old('performance_date2',$recording->performance_date2) }}" name="performance_date2" type="date" class="form-control" id="performanceDate">
                </div>

                <div class="form-group">
                    <label for="country">Country of Performance</label>
                    <select name="country_of_performance" class="form-control" id="country">
                       <option disabled selected disabled>Choose a country</option>
                    </select>
                </div>
           
        </div>
                    <div class="buttons button_space">
                        <button class="back_button">Back</button>
                        <button class="next_button">Next Step</button>
                        <button name="save" value="save_as_draft" class="">Save As draft</button>
                    </div>
                </div>
				
				                    <div class="main">
                        <h2>Review</h2>
                        <p>Please review the information below before submitting:</p>

                        <!-- Display User Information from Step 1 -->
                        <ul>
                            <li><strong>ISRC:</strong> <span id="reviewISRC"></span></li>
                            <li><strong>Band/Artist Name:</strong> <span id="reviewBandName"></span></li>
                            <li><strong>Recording Title:</strong> <span id="reviewRecordingTitle"></span></li>
                            <!-- Add more fields from Step 1 as needed -->
                        </ul>

                        <!-- Display User Information from Step 2 -->
                        <ul>
                            <li><strong>Version Type:</strong> <span id="reviewVersionType"></span></li>
                            <li><strong>Remastered:</strong> <span id="reviewRemastered"></span></li>
                            <li><strong>Genre:</strong> <span id="reviewGenre"></span></li>
                            <!-- Add more fields from Step 2 as needed -->
                        </ul>

                        <!-- Display User Information from Step 3 -->
                        <ul>
                            <li><strong>Content Type:</strong> <span id="reviewContentType"></span></li>
                            <li><strong>Date of Performance:</strong> <span id="reviewDateOfPerformance"></span></li>
                            <!-- Add more fields from Step 3 as needed -->
                        </ul>

                        <!-- Display User Information from Step 4 -->
                        <ul>
                            <li><strong>Number of Featured Performers:</strong> <span
                                    id="reviewFeaturedPerformers"></span></li>
                            <li><strong>Number of Non-Featured Performers:</strong> <span
                                    id="reviewNonFeaturedPerformers"></span></li>
                            <li><strong>Date of Performance:</strong> <span id="reviewPerformanceDate"></span></li>
                            <li><strong>Country of Performance:</strong> <span id="reviewCountry"></span></li>
                            <!-- Add more fields from Step 4 as needed -->
                        </ul>

                        <div class="buttons button_space">
                            <button class="back_button">Back</button>
                            <button type="submit" class="submit_button">Submit</button>
                            <button name="save" value="save_as_draft" class="">Save As draft</button>
                        </div>
                    </div>

                 <div class="main">
                     <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                         <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                        <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                    </svg>
                     
                    <div class="text congrats">
                        <h2>Congratulations!</h2>
                        <p>Thanks Mr./Mrs. <span class="shown_name"></span> your information have been submitted successfully for the future reference we will contact you soon.</p>
                    </div>
                </div>
                
            
              

             </form>

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


<style>

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
</style>

<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

*{
    padding:0;
    margin:0;
}
.container-custom{
    min-height:100vh;
/*    display:flex;*/
    justify-content:center;
    align-items:center;
/*    background-color:#eee;*/
}
.container-custom .card-custom{
    height:auto;
    width:100%;
    background-color:#fff;
    position:relative;
    /*//box-shadow:0 15px 30px rgba(0,0,0,0.1);
    //font-family: 'Poppins', sans-serif;*/
/*    border-radius:20px;*/
}
.container-custom .card-custom .form{
    width:100%;
    height:100%;
    
    display:flex;
}
.container-custom .card-custom .left-side{
    width:35%;
    background-color:#304767;
    height:auto;
/* border-top-left-radius:20px;
 border-bottom-left-radius:20px;*/
  padding:20px 30px;
  box-sizing:border-box;

}
/*left-side-start*/
.left-heading{
    color:#fff;
   
}
.steps-content{
    margin-top:30px;
    color:#fff;
}
.steps-content p{
    font-size:12px;
    margin-top:15px;
}
.progress-bar-custom{
    list-style:none;
    /*color:#fff;*/
    margin-top:30px;
    font-size:13px;
    font-weight:700;
    counter-reset:container-custom 0;
}
.progress-bar-custom li{
       position:relative;
       margin-left:40px;
       margin-top:50px;
       counter-increment:container-custom 1;
      color:#4f6581;
}
.progress-bar-custom li::before{
    content:counter(container-custom);
    line-height:25px;
    text-align:center;
    position:absolute;
    height:25px;
    width:25px;
    border:1px solid #4f6581;
    border-radius:50%;
    left:-40px;
    top:-5px;
    z-index:10;
    background-color:#304767;

     
}


.progress-bar-custom li::after{
    content: '';
    position: absolute;
    height: 90px;
    width: 2px;
    background-color: #4f6581;
    z-index: 1;
    left: -27px;
    top: -70px;
}


.progress-bar-custom li.active::after{
    background-color: #fff;

}

.progress-bar-custom li:first-child:after{
  display:none;  
}

/*.progress-bar-custom li:last-child:after{*/
/*  display:none;  */
/*}*/
.progress-bar-custom li.active::before{
    color:#fff;
      border:1px solid #fff;
}
.progress-bar-custom li.active{
    color:#fff;
}
.d-none{
   display:none;   
}






















/*left-side-end*/
.container-custom .card-custom .right-side{
    width:65%;
    background-color:#fff;
    height:100%;
  border-radius:20px;
}
/*right-side-start*/
.main{
    display:none;
}
.active{
    display:block;
}
.main{
    padding:40px;
}
.main small{
    
}
.text{
    margin-top:20px;
}
.congrats{
    text-align:center;
}
.text p{
    margin-top:10px;
    font-size:13px;
    font-weight:700;
    color:#cbced4;
}
.input-text{
    margin:30px 0;
     display:flex;
    gap:20px;
}

.input-text .input-div{
    width:100%;
    position:relative;
    
}



input[type="text"]{
    width:100%;
    height:40px;
    border:none;
    outline:0;
    border-radius:5px;
    border:1px solid #cbced4;
    gap:20px;
    box-sizing:border-box;
    padding:0px 10px;
}
select{
    width:100%;
    height:40px;
    border:none;
    outline:0;
    border-radius:5px;
    border:1px solid #cbced4;
    gap:20px;
    box-sizing:border-box;
    padding:0px 10px;
}
.input-text .input-div span{
    position:absolute;
    top:10px;
    left:10px;
    font-size:14px;
    transition:all 0.5s;
}
.input-div input:focus ~ span,
.input-div input:valid ~ span,
.input-div input:focus {
    top: -15px;
    left: 6px;
    font-size: 10px;
    font-weight: 600;
}


.input-div span{
    top:-15px;
    left:6px;
    font-size:10px;
}
.buttons button{
    height:40px;
    width:100px;
    border:none;
    border-radius:5px;
    background-color:#0075ff;
    font-size:12px;
    color:#fff;
    cursor:pointer;
}
.button_space{
    display:flex;
    gap:20px;
    
}
.button_space button:nth-child(1){
    background-color:#fff;
    color:#000;
    border:1px solid#000;
}
.user_card-custom{
    margin-top:20px;
    margin-bottom:40px;
    height:200px;
    width:100%;
    border:1px solid #c7d3d9;
    border-radius:10px;
    display:flex;
    overflow:hidden;
    position:relative;
    box-sizing:border-box;
}
.user_card-custom span{
    height:80px;
    width:100%;
    background-color:#dfeeff;
}
.circle{
    position:absolute;
    top:40px;
    left:60px;
}
.circle span{
    height:70px;
    width:70px;
    background-color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #fff;
    border-radius:50%;
}
.circle span img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}
.social{
    display:flex;
    position:absolute;
    top:100px;
    right:10px;
}
.social span{
    height:30px;
    width:30px;
    border-radius:7px;
    background-color:#fff;
    border:1px solid #cbd6dc;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:10px;
    color:#cbd6dc;

}
.social span i{
        cursor:pointer;
}
.heart{
    color:red !important;
}
.share{
        color:red !important;
}
.user_name{
    position:absolute;
    top:110px;
    margin:10px;
    padding:0 30px;
    display:flex;
    flex-direction:column;
    width:100%;
    
} 
.user_name h3{
    color:#4c5b68;
}
.detail{
    /*margin-top:10px;*/
   display:flex;
   justify-content:space-between;
   margin-right:50px;
}
.detail p{
    font-size:12px;
    font-weight:700;

}
.detail p a{
    text-decoration:none;
    color:blue;
}






.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}










.warning{
    border:1px solid red !important;
}


/*right-side-end*/
@media (max-width:750px) {
    .container-custom{
        height:scroll;
       
        
    }
    .container-custom .card-custom {
        max-width: 350px;
        height:auto !important;
        margin:30px 0;
    }
    .container-custom .card-custom .right-side {
     width:100%;
            
    }
     .input-text{
         display:block;
     }
     
     .input-text .input-div{
  margin-top:20px;
    
}

    .container-custom .card-custom .left-side {
           
     display: none;
    }
}
</style>

<script>





var next_click=document.querySelectorAll(".next_button");
var main_form=document.querySelectorAll(".main");
var step_list = document.querySelectorAll(".progress-bar-custom li");
var num = document.querySelector(".step-number");
let formnumber=0;

next_click.forEach(function(next_click_form){
    next_click_form.addEventListener('click',function(){
        event.preventDefault();
        if(!validateform()){
            return false
        }
       formnumber++;
       updateform();
       progress_forward();
       contentchange();
       if (formnumber === main_form.length - 1) {
            // If it's the last step, allow form submission
            document.querySelector('form').submit();
        }
    });
}); 

var back_click=document.querySelectorAll(".back_button");
// back_click.forEach(function(back_click_form){
//     back_click_form.addEventListener('click',function(){
//        formnumber--;
//        updateform();
//        progress_backward();
//        contentchange();
//     });
// });

back_click.forEach(function(back_click_form){
    back_click_form.addEventListener('click', function(event){
        event.preventDefault();  // Prevent the default behavior
        formnumber--;
        updateform();
        progress_backward();
        contentchange();
    });
});









 

function updateform(){
    main_form.forEach(function(mainform_number){
        mainform_number.classList.remove('active');
    })
    main_form[formnumber].classList.add('active');
} 
 
function progress_forward(){
    // step_list.forEach(list => {
        
    //     list.classList.remove('active');
         
    // }); 
    
     
    num.innerHTML = formnumber+1;
    step_list[formnumber].classList.add('active');
}  

function progress_backward(){
    var form_num = formnumber+1;
    step_list[form_num].classList.remove('active');
    num.innerHTML = form_num;
} 
 
var step_num_content=document.querySelectorAll(".step-number-content");

 function contentchange(){
     step_num_content.forEach(function(content){
        content.classList.remove('active'); 
        content.classList.add('d-none');
     }); 
     step_num_content[formnumber].classList.add('active');
 } 
 
 
function validateform(){
    validate=true;
    var validate_inputs=document.querySelectorAll(".main.active input");
    validate_inputs.forEach(function(vaildate_input){
        vaildate_input.classList.remove('warning');
        if(vaildate_input.hasAttribute('require')){
            if(vaildate_input.value.length==0){
                validate=false;
                vaildate_input.classList.add('warning');
            }
        }
    });
    return validate;
    
}


    // Function to update the review step with user input
    function updateReviewStep() {
    // Step 1
    document.getElementById('reviewISRC').textContent = document.getElementById('birthdate').value;
    document.getElementById('reviewBandName').textContent = document.getElementById('lastName').value;
    document.getElementById('reviewRecordingTitle').textContent = document.getElementById('username').value;

    // Step 2
    document.getElementById('reviewVersionType').textContent = document.getElementById('lastName').value;
    document.getElementById('reviewRemastered').textContent = document.getElementById('toggleSwitch').checked ? 'Yes' : 'No';
    document.getElementById('reviewGenre').textContent = document.getElementById('lastName').value;

    // Step 3
    document.getElementById('reviewContentType').textContent = document.getElementById('fieldDepartment').value;
    document.getElementById('reviewDateOfPerformance').textContent = document.getElementById('performanceDate').value;

    // Step 4
    document.getElementById('reviewFeaturedPerformers').textContent = document.getElementById('featuredPerformers').value;
    document.getElementById('reviewNonFeaturedPerformers').textContent = document.getElementById('nonFeaturedPerformers').value;
    document.getElementById('reviewPerformanceDate').textContent = document.getElementById('performanceDate').value;
    document.getElementById('reviewCountry').textContent = document.getElementById('country').value;
console.log(document.getElementById('reviewISRC').textContent);
    // Update other fields as needed
}
console.log('Input changed!');
// Add event listeners for input fields to update the review step
// Step 1
document.getElementById('birthdate').addEventListener('input', updateReviewStep);
document.getElementById('lastName').addEventListener('input', updateReviewStep);
document.getElementById('username').addEventListener('input', updateReviewStep);

// Step 2
document.getElementById('lastName').addEventListener('input', updateReviewStep);
document.getElementById('toggleSwitch').addEventListener('change', updateReviewStep);
document.getElementById('lastName').addEventListener('input', updateReviewStep);

// Step 3
document.getElementById('fieldDepartment').addEventListener('change', updateReviewStep);
document.getElementById('performanceDate').addEventListener('input', updateReviewStep);

// Step 4
document.getElementById('featuredPerformers').addEventListener('input', updateReviewStep);
document.getElementById('nonFeaturedPerformers').addEventListener('input', updateReviewStep);
document.getElementById('performanceDate').addEventListener('input', updateReviewStep);
document.getElementById('country').addEventListener('input', updateReviewStep);
// Add event listeners for other fields as needed
</script>

<script>
    // Fetch country data from Restcountries API
    $.ajax({
        url: 'https://restcountries.com/v3.1/all',
        type: 'GET',
        success: function (data) {
            // Sort countries in A-Z order
            data.sort(function (a, b) {
                return a.name.common.localeCompare(b.name.common);
            });

            // Populate the Country of Commissioning dropdown
            var commissioningDropdown = $('#countryCommissioning');
            $.each(data, function (index, country) {
                commissioningDropdown.append($('<option></option>').attr('value', country.name.common).text(country.name.common));
            });

            // Populate the Country of First Publication dropdown
            var publicationDropdown = $('#countryFirstPublication');
            $.each(data, function (index, country) {
                publicationDropdown.append($('<option></option>').attr('value', country.name.common).text(country.name.common));
            });


            // Populate the Country of First Publication dropdown
            var publicationDropdown = $('#country');
            $.each(data, function (index, country) {
                publicationDropdown.append($('<option></option>').attr('value', country.name.common).text(country.name.common));
            });
        },
        error: function () {
            console.error('Error fetching country data');
        }
    });
</script>

<!-- Add these lines to include Bootstrap Datepicker CSS and JS files -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
    // Initialize Bootstrap Datepicker
    $(document).ready(function () {
        $('#recordingDate, #startdate1, #pdate').datepicker({
            format: 'yyyy-mm-dd', // Choose the desired date format
            autoclose: true,
            todayHighlight: true,
        });
    });
</script>

@endsection