@extends('admin.layouts.header')
@section('styles') 
<style>
    .dropzone-row {
        height: 200px;
        overflow-y: auto;
    }
   
</style>  
@endsection
@section('content')

<main class="admin-dashbaord-content">

    <h3 class="sub-heading mt-4">My Idea</h3>

    <div class="content-wrap">

        <div class="form-wizard container">

            
            

                <div class="form-wizard-header">

                    <ul class="list-unstyled form-wizard-steps clearfix">

                        <li id="w_1" class="active"><a href=""><i class="far fa-lightbulb"></i></a></li>

                        <li id="w_2"><a href=""><i class="fas fa-pencil-alt"></i></a></li>

                        <li id="w_3" ><a href=""><i class="far fa-user"></i></a></li>

                        <li id="w_4" ><a href=""><i class="far fa-eye"></i></a></li>

                    </ul>

                </div>

                <form action="{{route('save-project-admin')}}"  enctype="multipart/form-data" id="savedataform" method="post">
                {{ csrf_field() }}
                    <!-- @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @if($message = Session::get('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">{{ $message }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if($message = Session::get('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">{{ $message }}
                             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                             </button>
                        </div>
                    @endif -->

                <fieldset class="wizard-fieldset show" id="page_1">
                    @if(!empty($project_details))
                    @foreach($project_details as $project)
                    
                    <div class="row mb-5 pb-2 border-light-bottom">

                        <div class="col-3">

                            <h5 class="wizard-heading text-center">Project Detail</h5>

                        </div>

                    </div>

                    <h2 class="start-title text-center"><i class="far fa-lightbulb bulb me-3"></i>Tell About Your Project</h2>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project title*</h3>

                            <p class="detail-desc">Write a clear, brief title and subtitle to help people quickly understand your project. Both will appear on your project and pre-launch pages.</p>

                        </div>

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

                            <div class="form-group mt-0">
                                
                                    <input type="hidden" name="project_id" class="project_id" value="{{ $project->id }}">

                                    <input type="hidden" name="user_id" id="user_id" class="user_id" value="{{ $project->inventor_id }}">

                                <label for="usr" class="mb-3">Title</label>
                                
                                    <input type="text" class="form-control" value="{{ $project->project_title }}" id="project_title" name="project_title" placeholder="Write your project title" maxlength="100">
                                

                                    <div id="project_title_error" style="color:red">{{ $errors->first('project_title') }}</div>
                            </div>

                        </div>

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

                            <p class="detail-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat, illum. Voluptatibus commodi, facere inventore repellendus delectus impedit veritatis culpa deleniti temti excepturi. Voluptate!</p>

                        </div>

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

                            <div class="form-group mt-0">

                                <label for="usr" class="mb-3">A Short Description</label>
                                
                                    <input type="text" class="form-control" id="project_short_desc" name="project_short_desc" value="{{ $project->project_short_desc }}"  placeholder="Short description about your project" maxlength="150">
                                    <div id="project_short_desc_error" style="color:red">{{ $errors->first('project_short_desc') }}</div>
                                
                            </div>

                        </div>

                    </div>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project category*</h3>

                            <p class="detail-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus molestias deleniti minima laboriosam placeat nesciunt consectetur!</p>

                        </div>

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

                            <div class="form-group mt-0">

                                <label for="project_category" class="mb-3">Select Category</label>
                                
                                    <select name="project_category" id="project_category" class="form-select" aria-label="Default select example">
                                        <option value="">--Select--</option>
                                        @if(count($categories) > 0)
                                            @foreach($categories as $category)
                                                @if ($project->project_category == $category->id)
                                                    <option value="{{ $category->id }}" selected>{{ $category->name }}</option>
                                                @else
                                                    <option value="{{$category->id}}" >{{$category->name}}</option>
                                                @endif
                                                
                                            @endforeach
                                        @endif
                                    </select>
                                    <div id="project_category_error" style="color:red">{{ $errors->first('project_category') }}</div>

                            </div>

                        </div>

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

                            <p class="detail-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat, illum. Voluptatibus commodi, facere inventore repellendus delectus impedit veritatis culpa deleniti temti excepturi. Voluptate!</p>

                        </div>

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

                            <div class="form-group mt-0 mb-5">

                                <select name="project_subcategory" id="project_subcategory" class="form-select" aria-label="Default select example">

                                    <option value="">--Select--</option>
                                    @if(count($sub_categories) > 0)
                                        @foreach($sub_categories as $sub_category)
                                            @if ($project->project_subcategory == $sub_category->id)
                                                <option value="{{ $sub_category->id }}" selected>{{ $sub_category->name }}</option>
                                            @else
                                                
                                            @endif
                                        @endforeach
                                    @endif

                                </select>
                                <div id="project_subcategory_error" style="color:red">{{ $errors->first('project_subcategory') }}</div>

                            </div>

                            <div class="add-categories-inputs">
                                <div class="form-group mt-0 mb-5 ">

                                    <select name="project_category_2" id="project_category_2" class="form-select" aria-label="Default select example">
                                        <option value="">--Select--</option>
                                        @if(count($categories) > 0)
                                              @foreach($categories as $category)
                                                @if ($project->project_category_2 == $category->id)
                                                    <option value="{{ $category->id }}" selected>{{ $category->name }}</option>
                                                @else
                                                    <option value="{{$category->id}}" >{{$category->name}}</option>
                                                @endif
                                                  
                                              @endforeach
                                         @endif
                                    </select>
                                    


                                </div>

                                <div class="form-group mt-0 mb-3">

                                    <select name="project_subcategory_2" id="project_subcategory_2" class="form-select" aria-label="Default select example">

                                        <option value="">--Select--</option>
                                        @if(count($sub_categories) > 0)
                                            @foreach($sub_categories as $sub_category)
                                                  @if ($project->project_subcategory_2 == $sub_category->id)
                                                     <option value="{{ $sub_category->id }}" selected>{{ $sub_category->name }}</option>
                                                  @else
                                                     
                                                  @endif
                                            @endforeach
                                         @endif

                                    </select>
                                    
                                </div>
                            </div>
                            <div class="add-input-btn text-end">
                                <a href="#" class="d-flex justify-content-center align-items-center add-plus-btn"><i class="fas fa-plus "></i></a>
                            </div>


                        </div>

                    </div>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project image*</h3>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem dolor et tempore iusto rerum natus quis nostrum! Quas, maxime iste. Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                        </div>

                        <div class="col-md-6">
                        <!-- <input hidden id="file" name="file"/> -->
                            <!-- Upload Area -->
                            <div id="uploadArea" class="upload-area banner-img-wrap mb-4">
                            <!-- Header -->
                            <div class="upload-area__header d-flex align-items-center">
                                <div>
                                    <h1 class="upload-area__title">Upload your banner image</h1>
                                    <p class="upload-area__paragraph mb-0">
                                    File should be an image
                                    <strong class="upload-area__tooltip">
                                        Like
                                        <span class="upload-area__tooltip-data">jpeg, .png, .svg, .gif</span> <!-- Data Will be Comes From Js -->
                                    </strong>
                                    </p>
                                </div>
                                @if(!empty($project->project_banner_image))
                                <div class="banner-preview">
                                    
                                    <a href=""><img src="{{url('').'/'.$project->project_banner_image }}" alt="Preview Image"></a>
                                   
                                    <!-- <a href=""><img src="../assets/medias/dummy-img.png" alt=""></a> -->
                                </div>
                                @endif
                            </div>
                            <!-- End Header -->

                            <!-- Drop Zoon -->
                            <div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
                                <span class="drop-zoon__icon">
                                <i class='bx bxs-file-image'></i>
                                </span>
                                <p class="drop-zoon__paragraph mt-0">Drop your file here or Click to browse</p>
                                <span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
                                <img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
                                <!-- <input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*"> -->
                                <input type="file" id="fileInput" name="project_banner_image"  class="drop-zoon__file-input" accept="image/*" >
                            </div>
                            <!-- End Drop Zoon -->

                            <!-- File Details -->
                            <div id="fileDetails" class="upload-area__file-details file-details">
                                <h3 class="file-details__title">Uploaded File</h3>

                                <div id="uploadedFile" class="uploaded-file">
                                <div class="uploaded-file__icon-container">
                                    <i class='bx bxs-file-blank uploaded-file__icon'></i>
                                    <span class="uploaded-file__icon-text"></span> <!-- Data Will be Comes From Js -->
                                </div>

                                <div id="uploadedFileInfo" class="uploaded-file__info">
                                    <span class="uploaded-file__name">Proejct 1</span>
                                    <span class="uploaded-file__counter">0%</span>
                                </div>
                                </div>
                            </div>
                            <!-- End File Details -->
                            </div>
                            <!-- End Upload Area -->
                            <!--begin::Input group-->
                            <div class="multiple-upload">
                                <!-- <input type="file" id="img" accept="image/" multiple> -->
                                <input name="images[]" value="{{old('images')}}" type="file" id="img" accept="image/"  style="display:none" class="form-control"  multiple >
                                @if(!empty($project_images))
                                @if(count($project_images) > 0)
                                <div class="d-flex flex-wrap justify-content-center m-3 mt-0 multi-img-wrap">

                                        @foreach($project_images as $p_img)
                                        @php $ide = Crypt::encrypt($p_img->id); @endphp
                                            <div class="multi-img-prev position-relative me-3 mb-3">
                                                <a href="" class="d-block"><img src="{{url('').'/'.$p_img->media }}" alt=""></a>
                                                <a href="{{route('delete-image', $ide)}}" class=" ajaxdelete remove-prev-img"><i class="far fa-times-circle"></i></a>
                                            </div>
                                        @endforeach
                                        
                                </div>
                                @endif
                                @endif
                            </div>
                            <!--end::Input group-->
                        </div>

                    </div>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project video (Optional)</h3>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem dolor et tempore iusto rerum natus quis nostrum! Quas, maxime iste. Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                        </div>

                        <div class="col-md-6">
                            <div class="upload-video">
                            <h3 class="upload-area__title text-capitalize text-center mb-4">upload your video <span  data-bs-toggle="tooltip" title='<iframe  src="https://www.youtube.com/embed/k4yL3IZSPIc" title="YouTube video player" allow="autoplay; allowfullscreen></iframe>' class="ms-1 text-blue">Like</span></h3>
                                @php 
                                if(isset($project_videos)){
                                @endphp
                                @if(count($project_videos) > 0)
                                <div class="mb-3">
                                    <div class="video-wrap">
                                        <div class="h-166 d-flex flex-wrap justify-content-center align-items-center">
                                            @php 
                                                foreach($project_videos as $v){
                                                    if($project->id == $v->project_id ){ 
                                                        @endphp
                                                        @php $idv = Crypt::encrypt($v->id); @endphp
                                                        <div class="position-relative">
                                                            <a href="{{route('delete-video', $idv )}}" class=" ajaxdelete remove-video-btn"><i class="far fa-times-circle"></i></a>
                                                            @php echo $v->video_url; @endphp
                                                        </div>

                                                        @php
                                                    }
                                                }
                                            @endphp
                                            
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @php 
                                }
                                @endphp
                                <div class="d-flex justify-content-center">
                                    <div class="control-group" id="fields">
                                        <div class="my-controls">
                                            <div class="entry mt-6 input-group align-items-center upload-input-group mb-4">
                                            
                                                <div class="custom-file">
                                                    <input style="opacity:1" id="more_video" name="more_video[]" placeholder="Youtube Embed Video Code.." type="text" class="more_video custom-file-input external_photo form-control w-428">
                                                </div>
                                                <button  class="btn btn-success add-more-button rounded btn-add-new" type="button">  
                                                <i class="fa fa-plus"></i>  
                                                </button> 
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <input name="project_banner_image_old" value="@if(!empty($project->project_banner_image)){{old('project_banner_image_old', $project->project_banner_image)}}@endif" id="project_banner_image_old" type="hidden" class="form-control" >
                    <!-- <input name="project_banner_image" value="{{old('project_banner_image')}}" id="project_banner_image" type="file" class="form-control" > -->
                    <!-- <input name="images[]" value="{{old('images')}}" id="images" type="file" class="form-control" multiple > -->
                    <div class="form-group text-end clearfix">

                    <div class="container" style="margin-top: 150px;">
                        <div>
                            <!-- <input name="images[]" type="file" id="img" accept=".xlsx,.xls,image/*,.doc,audio/*,.docx,video/*,.ppt,.pptx,.txt,.pdf" multiple> -->
                        </div>
                    </div>

                    <button type="submit" id="saveProject_Btn" class="form-wizard-next-btn float-right border-0">Next</button>

                    </div>

                    @endforeach
                    
                    @else
                    
                    <div class="row mb-5 pb-2 border-light-bottom">

                        <div class="col-3">

                            <h5 class="wizard-heading text-center">Project Detail</h5>

                        </div>

                    </div>

                    <h2 class="start-title text-center"><i class="far fa-lightbulb bulb me-3"></i>Tell About Your Project</h2>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project title*</h3>

                            <p class="detail-desc">Write a clear, brief title and subtitle to help people quickly understand your project. Both will appear on your project and pre-launch pages.</p>

                        </div>

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

                            <div class="form-group mt-0">
                                

                                
                                    <input type="hidden" name="project_id" class="project_id" value="">
                                   
                                    
                                    <input type="hidden" name="user_id" id="user_id" class="user_id" value="{{ Auth::user()->id }}">

                                <label for="usr" class="mb-3">Title</label>
                                
                                    <input type="text" class="form-control" value="{{old('project_title')}}" id="project_title" name="project_title" placeholder="Write your project title" maxlength="100">
                                

                                    <div id="project_title_error" style="color:red">{{ $errors->first('project_title') }}</div>
                            </div>

                        </div>

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

                            <p class="detail-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat, illum. Voluptatibus commodi, facere inventore repellendus delectus impedit veritatis culpa deleniti temti excepturi. Voluptate!</p>

                        </div>

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

                            <div class="form-group mt-0">

                                <label for="usr" class="mb-3">A Short Description</label>
                                
                                    <input type="text" class="form-control" id="project_short_desc" name="project_short_desc" value="{{old('project_short_desc')}}"  placeholder="Short description about your project" maxlength="150">
                                    <div id="project_short_desc_error" style="color:red">{{ $errors->first('project_short_desc') }}</div>
                                
                            </div>

                        </div>

                    </div>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project category*</h3>

                            <p class="detail-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus molestias deleniti minima laboriosam placeat nesciunt consectetur!</p>

                        </div>

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

                            <div class="form-group mt-0">

                                <label for="project_category" class="mb-3">Select Category</label>
                                
                                
                                    <select name="project_category" id="project_category" class="form-select" aria-label="Default select example">
                                        <option value="">--Select--</option>
                                        @if(count($categories) > 0)
                                            @foreach($categories as $category)
                                                @if (old('project_category') == $category->id)
                                                    <option value="{{ $category->id }}" selected>{{ $category->name }}</option>
                                                @else
                                                    <option value="{{$category->id}}" >{{$category->name}}</option>
                                                @endif
                                                
                                            @endforeach
                                        @endif
                                    </select>
                                    <div id="project_category_error" style="color:red">{{ $errors->first('project_category') }}</div>

                            </div>

                        </div>

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

                            <p class="detail-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat, illum. Voluptatibus commodi, facere inventore repellendus delectus impedit veritatis culpa deleniti temti excepturi. Voluptate!</p>

                        </div>

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

                            <div class="form-group mt-0 mb-5">

                            
                            
                                <select name="project_subcategory" id="project_subcategory" class="form-select" aria-label="Default select example">

                                    <option value="">--Select--</option>
                                    @if(count($sub_categories) > 0)
                                        @foreach($sub_categories as $sub_category)
                                            @if (old('project_subcategory') == $sub_category->id)
                                                <option value="{{ $sub_category->id }}" selected>{{ $sub_category->name }}</option>
                                            @else
                                                
                                            @endif
                                        @endforeach
                                    @endif

                                </select>
                                <div id="project_subcategory_error" style="color:red">{{ $errors->first('project_subcategory') }}</div>


                            </div>

                            <div class="add-categories-inputs">
                                <div class="form-group mt-0 mb-5 ">

                                    <select name="project_category_2" id="project_category_2" class="form-select" aria-label="Default select example">
                                        <option value="">--Select--</option>
                                        @if(count($categories) > 0)
                                              @foreach($categories as $category)
                                                @if (old('project_category_2') == $category->id)
                                                    <option value="{{ $category->id }}" selected>{{ $category->name }}</option>
                                                @else
                                                    <option value="{{$category->id}}" >{{$category->name}}</option>
                                                @endif
                                                  
                                              @endforeach
                                         @endif
                                    </select>
                                  


                                </div>

                                <div class="form-group mt-0 mb-3">

                                    <select name="project_subcategory_2" id="project_subcategory_2" class="form-select" aria-label="Default select example">

                                        <option value="">--Select--</option>
                                        @if(count($sub_categories) > 0)
                                            @foreach($sub_categories as $sub_category)
                                                @if (old('project_subcategory_2') == $sub_category->id)
                                                    <option value="{{ $sub_category->id }}" selected>{{ $sub_category->name }}</option>
                                                @else
                                                    
                                                @endif
                                            @endforeach
                                        @endif

                                    </select>
                                </div>
                            </div>
                            <div class="add-input-btn text-end">
                                <a href="#" class="d-flex justify-content-center align-items-center add-plus-btn"><i class="fas fa-plus "></i></a>
                            </div>


                        </div>

                    </div>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project image*</h3>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem dolor et tempore iusto rerum natus quis nostrum! Quas, maxime iste. Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                        </div>

                        <div class="col-md-6">
                            <!-- Upload Area -->
                            <div id="uploadArea" class="upload-area banner-img-wrap mb-4">
                            <!-- Header -->
                            <div class="upload-area__header">
                                <h1 class="upload-area__title">Upload your banner image</h1>
                                <p class="upload-area__paragraph">
                                File should be an image
                                <strong class="upload-area__tooltip">
                                    Like
                                    <span class="upload-area__tooltip-data"></span> <!-- Data Will be Comes From Js -->
                                </strong>
                                </p>
                            </div>
                            <!-- End Header -->

                            <!-- Drop Zoon -->
                            <div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
                                <span class="drop-zoon__icon">
                                <i class='bx bxs-file-image'></i>
                                </span>
                                <p class="drop-zoon__paragraph mt-0">Drop your file here or Click to browse</p>
                                <span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
                                <input type="file" id="fileInput"  name="project_banner_image" class="drop-zoon__file-input" accept="image/*" >
                                <!-- <input name="images[]" value="{{old('images')}}" id="images" type="file" class="form-control" multiple > -->
                            </div>
                            <!-- End Drop Zoon -->

                            <!-- File Details -->
                            <div id="fileDetails" class="upload-area__file-details file-details">
                                <h3 class="file-details__title">Uploaded File</h3>

                                <div id="uploadedFile" class="uploaded-file">
                                <div class="uploaded-file__icon-container">
                                    <i class='bx bxs-file-blank uploaded-file__icon'></i>
                                    <span class="uploaded-file__icon-text"></span> <!-- Data Will be Comes From Js -->
                                </div>

                                <div id="uploadedFileInfo" class="uploaded-file__info">
                                    <span class="uploaded-file__name">Proejct 1</span>
                                    <span class="uploaded-file__counter">0%</span>
                                </div>
                                </div>
                            </div>
                            <!-- End File Details -->
                            </div>
                            <!-- End Upload Area -->
                            <!--begin::Input group-->
                            <div class="multiple-upload">
                                <!-- <input type="file" id="img" accept="image/" multiple> -->
                                <input name="images[]" value="{{old('images')}}" type="file" id="img" accept="image/"  style="display:none" class="form-control"  multiple  >
                                
                            </div>
                            <!--end::Input group-->
                        </div>

                    </div>

                    <div class="row justify-content-between border-light-bottom pb-3 mb-5">

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

                            <h3 class="project-sub-heading text-capitalize">project video (Optional)</h3>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem dolor et tempore iusto rerum natus quis nostrum! Quas, maxime iste. Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias dolore assumenda.</p>

                            <p class="detail-desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias, quidem Ex facilis eius, iste corporis deserunt cumque dolore assumenda.</p>

                        </div>

                        <div class="col-md-6">
                            <div class="upload-video">
                            <h3 class="upload-area__title text-capitalize text-center mb-4">upload your video <span  data-bs-toggle="tooltip" title='<iframe  src="https://www.youtube.com/embed/k4yL3IZSPIc" title="YouTube video player" allow="autoplay; allowfullscreen></iframe>' class="ms-1 text-blue">Like</span></h3>
                                
                                <div class="d-flex justify-content-center">
                                    <div class="control-group" id="fields">
                                        <div class="my-controls">
                                            <div class="entry mt-6 input-group align-items-center upload-input-group mb-4">
                                            
                                                <div class="custom-file">
                                                    <input style="opacity:1" id="more_video" name="more_video[]" placeholder="Youtube Embed Video Code.." type="text" class="more_video custom-file-input external_photo form-control w-428">
                                                </div>
                                                <button  class="btn btn-success add-more-button rounded btn-add-new" type="button">  
                                                <i class="fa fa-plus"></i>  
                                                </button> 
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- <input name="project_banner_image" value="{{old('project_banner_image')}}" id="project_banner_image" type="file" class="form-control" > -->
                    <!-- <input name="images[]" value="{{old('images')}}" id="images" type="file" class="form-control" multiple > -->
                    <div class="form-group text-end clearfix">
                                    
                    <div class="container" style="margin-top: 150px;">
                        <div>
                            <!-- <input name="images[]" type="file" id="img" accept=".xlsx,.xls,image/*,.doc,audio/*,.docx,video/*,.ppt,.pptx,.txt,.pdf" multiple> -->
                        </div>
                    </div>
                    
                        <button type="submit" id="saveProject_Btn" class="form-wizard-next-btn float-right">Next</button>

                    </div>

                    
                    @endif




                </fieldset> 

                </form>


                

            <!-- </form> -->

        </div>
    </div>
<!--</main>-->

@endsection
@section('scripts') 
    <script>
        var maxLength = 100;
        $(document).ready(function(){
            $('#project_title').on('keydown keyup change', function(){
                var char = $(this).val();
                var charLength = $(this).val().length;
                if(charLength > maxLength){
                    $('#project_title_error').text('You have exceeded the maximum character limit');
                    $(this).val(char.substring(0, maxLength));
                }else{
                    $('#project_title_error').text('');
                }
            });
        });
    </script>
    <script type="text/javascript">
        Dropzone.autoDiscover = false;
        jQuery(document).ready(function() {
            $("div#myAwesomeDropzone").dropzone({
                url: "/file/post"
            });

        });
        
     </script>
    <script>
        $(document).on('click', '.btn-add-new', function(e) {
          
          e.preventDefault();

          var controlForm = $('.my-controls:first'),

              currentEntry = $(this).parents('.entry:first'),

              newEntry = $(currentEntry.clone()).appendTo(controlForm);
              
              
          newEntry.find('input').val('');

          controlForm.find('.entry:not(:last) .btn-add-new')

              .removeClass('btn-add-new').addClass('btn-remove')

              .removeClass('btn-success').addClass('btn-danger')

              .html('<span class="fa fa-trash text-white"> </span>');

      }).on('click', '.btn-remove', function(e) {

          $(this).parents('.entry:first').remove();

          e.preventDefault();

          return false;

      });
    </script>
    <script>
        var myDropzone = new Dropzone("#file__upload", {
        url: "#", // Set the url for your upload script location
        paramName: "file", // The name that will be used to transfer the file
        maxFiles: 10,
        maxFilesize: 10, // MB
        addRemoveLinks: true,
        accept: function(file, done) {
          
            if (file.name == "wow.jpg") {
                done("Naha, you don't.");
            } else {
                done();
            }
        }
    });
    </script>
    <!-- <script src="{{ URL::asset('assets/js/dropzone.min.js') }}"></script> -->
    <script>
        $(document).ready(function(){
            // $("#city_section").hide();
            var option = '';
            option += "<option value=''>Select Category First</option>";
            $('#project_category').change(function(){ 
            var id = $(this).val();
            
                $.ajax({
                    url: "{{url('getSubCategories/register')}}/"+id,  
                    type: 'get',
                    
                    success: function(response){ 
                    var len = response.length;
                    var option = '';
                        if(len > 0){
                            for(var i=0; i<len; i++){
                                var id = response[i].id;
                                var name = response[i].name;
                                option += "<option value='"+id+"'>"+name+"</option>"; 
                            }
                            $("#project_subcategory").html(option); 
                           //  $("#city_section").show();
                        }
                    }
                });
            });
        });
    </script>

<script>
        $(document).ready(function(){
            // $("#city_section").hide();
            var option = '';
            option += "<option value=''>Select Category First</option>";
            $('#project_category_2').change(function(){ 
            var id = $(this).val();
            
                $.ajax({
                    url: "{{url('getSubCategories/register')}}/"+id,  
                    type: 'get',
                    
                    success: function(response){ 
                    var len = response.length;
                    var option = '';
                        if(len > 0){
                            for(var i=0; i<len; i++){
                                var id = response[i].id;
                                var name = response[i].name;
                                option += "<option value='"+id+"'>"+name+"</option>"; 
                            }
                            $("#project_subcategory_2").html(option); 
                           //  $("#city_section").show();
                        }
                    }
                });
            });
        });
    </script>
    <!-- <script>
       $(document).ready(function(){
            
            $('#savedataform').on('submit',(function(e) {
                e.preventDefault();
                 let project_title = $('#project_title').val();
                 let project_short_desc = $('#project_short_desc').val();
                 let project_category = $('#project_category').val();
                 let project_subcategory = $('#project_subcategory').val();
                 let project_category_2 = $('#project_category_2').val();
                 let project_subcategory_2 = $('#project_subcategory_2').val();
                 let user_id = $('#user_id').val();
                 $('#project_title_error').text("");
                 $('#project_short_desc_error').text("");
                 $('#project_category_error').text("");
                 $('#project_subcategory_error').text("");

                 if( project_title == "" ){ 
                    $('#project_title_error').append("Project title is required");
                    $('#page_1').addClass('show');
                    $('#w_2').removeClass('active');
                    $('#w_1').removeClass('activated');
                    $('#w_1').addClass('active');
                   
                     
                 }else if( project_short_desc == "" ){ 
                    $('#project_short_desc_error').append("Project short description is required");
                    $('#page_1').addClass('show');
                    $('#w_2').removeClass('active');
                    $('#w_1').removeClass('activated');
                    $('#w_1').addClass('active');

                 }else if( project_category == "" ){ 
                    $('#project_category_error').append("Please select project category");
                    $('#page_1').addClass('show');
                    $('#w_2').removeClass('active');
                    $('#w_1').removeClass('activated');
                    $('#w_1').addClass('active');
                   
                 }else if( project_subcategory == "" ){ 
                    $('#project_subcategory_error').append("Please select project sub category");
                    $('#page_1').addClass('show');
                    $('#w_2').removeClass('active');
                    $('#w_1').removeClass('activated');
                    $('#w_1').addClass('active');
                    
                     
                 }else{ 
                //  let project_id = $('.project_id').val();
                

                var formData = new FormData(this);

                // var more_video =  $('.more_video').map((_,el) => el.value).get()
                  
                  $.ajax({
                    type: "POST", 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    url: "{{route('save-project')}}",
                    // data:{user_id:user_id, more_video:more_video, project_id:project_id, project_title:project_title, project_short_desc:project_short_desc, project_category:project_category, project_subcategory:project_subcategory ,project_subcategory_2:project_subcategory_2, project_category_2:project_category_2},
                    data:formData,

                    cache:false,

                    contentType: false,

                    processData: false,
                    success:function(response){
                      if(response.success){
                        $('.project_id').val(response.id);
                        $('.more_video').val('');
                        $('#page_1').removeClass('show');
                        $('#page_2').addClass('show');
                       
                      }else{
                          alert("Error");
                      }
                    },
                    error:function(error){
                      console.log(error);
                    }

                  });
                // event.preventDefault();
                }
            }));
            
        });
 
    </script> -->

    <script>
       $(document).ready(function(){
            
            $('#editProjectBtn1').click(function(){ 
            
                 let project_desc = $('.project_desc').val();
                 let project_id = $('.project_id').val();
       
                  $.ajax({
                    type: "POST", 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    url: "{{route('edit-project-first')}}",
                    data:{project_desc:project_desc, project_id:project_id},

                    success:function(response){
                      if(response.success){
                        $('.project_id').val(response.id);
                        //   alert(response.id);
                      }else{
                          alert("Error");
                      }
                    },
                    error:function(error){
                      console.log(error);
                    }

                  });
                event.preventDefault();
            });
            
        });
 
    </script>

    <script>
       $(document).ready(function(){
            
            $('#editProjectBtn2').click(function(){ 
            
                 let name = $('#name').val();
                 let last_name = $('#last_name').val();
                 let email = $('#email').val();
                 let company_role = $('#company_role').val();
                 let company_website = $('#company_website').val();
                 let address = $('#address').val();
                 let linkedin_url = $('#linkedin_url').val();
                 let biography = $('#biography').val();
                 let contact_no = $('#contact_no').val();
                 let project_id = $('.project_id').val();
                 let user_id = $('#user_id').val();
         
                  $.ajax({
                    type: "POST", 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    url: "{{route('edit-user')}}",
                    data:{user_id:user_id, project_id:project_id, contact_no:contact_no, name:name, last_name:last_name, email:email, company_role:company_role, company_website:company_website, address:address, linkedin_url:linkedin_url, biography:biography },

                    success:function(response){
                      if(response.success){
                        $('#project_title_preview').val(response.project[0].project_title);
                        $('#project_short_desc_preview').val(response.project[0].project_short_desc);
                        $('#project_category_preview').val(response.project[0].project_category);
                        $('#project_subcategory_preview').val(response.project[0].project_subcategory);
                        if(response.project[0].project_category_2 == null){
                            $('.category_hide_show').css('display','none');
                        }
                        $('#project_category_preview_2').val(response.project[0].project_category_2);
                        $('#project_subcategory_preview_2').val(response.project[0].project_subcategory_2);
                        $('.project_desc_preview').val(response.project[0].project_desc);

                        $('.name').val(response.user[0].name);
                        $('.last_name').val(response.user[0].last_name);
                        $('.contact_no').val(response.user[0].contact_no);
                        $('.company_role').val(response.user[0].company_role);
                        $('.company_website').val(response.user[0].company_website);
                        $('.address').val(response.user[0].address);
                        $('.linkedin_url').val(response.user[0].linkedin_url);
                        $('.biography').val(response.user[0].biography);
                        $('.email').val(response.user[0].email);

                            var len = response.project_images.length;
                            var imgdiv = '';
                            if(len > 0){
                                for(var i=0; i<len; i++){
                                    var APP_URL = {!! json_encode(url('/')) !!};
                                    var id = response.project_images[i].id;
                                    var media = response.project_images[i].media;
                                    imgdiv += "<div class='me-3 mb-3'> <img src='"+APP_URL+"/"+media+"'alt='' class='img-fluid review-img'></div>"; 
                                }
                                $("#img_preview").html(imgdiv); 
                          
                            }

                            var lenv = response.project_videos.length;
                            var videodiv = '';
                            if(lenv > 0){
                                for(var i=0; i<len; i++){
                                    var APP_URL = {!! json_encode(url('/')) !!};
                                    var id = response.project_videos[i].id;
                                    var media = response.project_videos[i].video_url;
                                    videodiv += "<div class='me-3 mb-3'>"+media+"</div>"; 
                                }
                                
                                $("#video_div").html(videodiv); 
                          
                            }
                       
                           
                      }else{
                          alert("Error");
                      }
                    },
                    error:function(error){
                      console.log(error);
                    }

                  });
                event.preventDefault();
            });
            
        });
 
    </script>

<script>
       $(document).ready(function(){
            
            $('#submitProjecttoadminBtn').click(function(){ 

                 let project_id = $('.project_id').val();
         
                  $.ajax({
                    type: "POST", 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    url: "{{route('submit-project-to-admin')}}",
                    data:{project_id:project_id },

                    success:function(response){
                      if(response.success){
                       
                          alert("Project Idea submitted to admin, Get back to you soon");
                           
                      }else if(response.failTemp){

                        var pp = response.projectPercentage;

                        alert(pp);
                      }else{
                          alert("Error");
                      }
                    },
                    error:function(error){
                      console.log(error);
                    }

                  });
                event.preventDefault();
            });
            
        });
 
    </script>

    <script>
       $(document).ready(function(){
            
            $('#previous_three').click(function(){ 

                 let project_id = $('.project_id').val();
         
                  $.ajax({
                    type: "POST", 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    url: "{{route('edit-project-first')}}",
                    data:{project_id:project_id },

                    success:function(response){
                      if(response.success){
                        $('.project_id').val(response.id);
                   
                      }else{
                          alert("Error");
                      }
                    },
                    error:function(error){
                      console.log(error);
                    }

                  });
                event.preventDefault();
            });
            
        });


        $(document).ready(function(){
            
            $('#previous_two').click(function(){ 

                 let project_id = $('.project_id').val();
         
                  $.ajax({
                    type: "POST", 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    url: "{{route('previous-to-sec')}}",
                    data:{project_id:project_id },

                    success:function(response){
                      if(response.success){
                        $('.project_id').val(response.id);
                   
                      }else{
                          alert("Error");
                      }
                    },
                    error:function(error){
                      console.log(error);
                    }

                  });
                event.preventDefault();
            });
            
        });

        $(document).ready(function(){
            
            $('#previous_one').click(function(){ 

                 let project_id = $('.project_id').val();
         
                  $.ajax({
                    type: "POST", 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    url: "{{route('review-project')}}",
                    data:{project_id:project_id },

                    success:function(response){
                      if(response.success){
                        $('.project_id').val(response.id);
                        $('#page_2').removeClass('show');
                        $('#page_1').addClass('show');
                   
                      }else{
                          alert("Error");
                      }
                    },
                    error:function(error){
                      console.log(error);
                    }

                  });
                event.preventDefault();
            });
            
        });
 
    </script>

    <script>
        $(document).ready(function() {

          $(".add-plus-btn").click(function() {

            $(".add-categories-inputs").toggleClass("show-input");

          });

        });
    </script>


    <!-- <script type="text/javascript">
        $(document).ready(function (e) {
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#project_idea_form').submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                let TotalFiles = $('#files')[0].files.length; //Total files
                let files = $('#files')[0];
                for (let i = 0; i < TotalFiles; i++) {
                    formData.append('files' + i, files.files[i]);
                }
                 formData.append('TotalFiles', TotalFiles);
                $.ajax({
                    type:'POST',
                    url: "{{ url('store-multi-file-ajax')}}",
                    data: formData,
                    cache:false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: (data) => {
                    this.reset();
                    alert('Files has been uploaded using jQuery ajax');
                    },
                    error: function(data){
                    alert(data.responseJSON.errors.files[0]);
                    console.log(data.responseJSON.errors);
                    }
                });
            });
        });
    </script> -->
    
   

<script type="text/javascript">
    $(document).ready(function() {
        $('#img').imageuploadify();
    })
</script>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>



@endsection