@section('title', $title)
@section('description', $description)
@extends('layout.app')
@section('content')

<script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
<link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />


<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="breadcrumb-main">
                <h4 class="text-capitalize breadcrumb-title">{{ trans('menu.form-validation') }}</h4>
                <div class="breadcrumb-action justify-content-center flex-wrap">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"><i class="las la-home"></i>Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ trans('menu.form-validation') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="form-element">
        <div class="row">
            <div class="col-lg-12">
                <div class="card card-default card-md mb-4">
                    <div class="card-header">
                        <h6>Product Add</h6>
                    </div>
                    
                    <div class="card-body pb-md-50">
                         @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        <form   method="POST" action="{{route('product.store')}}" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="row mx-n15">
                               <div class="col-md-4 mb-20 px-15">
                                    <label for="product_name">Product Name *</label>
                                    <input list="profileOptions" name="product_name" id="product_name" 
                                        class="form-control select-arrow-none ih-medium radius-xs b-light shadow-none color-light fs-14" 
                                        placeholder="Select or Type Profile">
                                    
                                    <datalist id="profileOptions">
                                        @foreach ($profiles as $profile)
                                            <option value="{{ $profile->name }}" data-id="{{ $profile->id }}">{{ $profile->name }}</option>
                                        @endforeach
                                    </datalist>

                                    <!-- Hidden input for profile_id -->
                                    <input type="hidden" name="profile_id" id="profile_id">
                                    @if ($errors->has('product_name'))
                                        <div class="text-danger">{{ $errors->first('product_name') }}</div>
                                    @endif
                                </div>
                               
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Product Cost *</label>
                                    <input type="number" name="product_cost" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Enter Product Cost">
                                    @if ($errors->has('product_cost'))
                                        <div class="text-danger">{{ $errors->first('product_cost') }}</div>
                                    @endif
                                    <option value="product_cost"></option>
                                    
                                </div>



                                <div class="col-md-4 mb-20 px-15">
                                    <label>Account Holder *</label>
                                    <input list="holderOptions" name="account_holder" id="account_holder"  
                                    class="form-control select-arrow-none ih-medium radius-xs b-light shadow-none color-light fs-14" 
                                    placeholder="Select or Type Account Holder">
                                    
                                    @if(!empty($holders) && count($holders) > 0)
                                        <datalist id="holderOptions">
                                            @foreach ($holders as $holder)
                                                <option value="{{ $holder->name }}" data-id="{{ $holder->id }}">{{ $holder->name }}</option>
                                            @endforeach
                                        </datalist>
                                    @endif
                                    <!-- Hidden input for profile_id -->
                                    <input type="hidden" name="account_holder_id" id="account_holder_id">
                                    @if ($errors->has('account_holder'))
                                        <div class="text-danger">{{ $errors->first('account_holder') }}</div>
                                    @endif
                                </div>
                            </div>

                            
                            <div class="row mx-n15">
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Email</label>
                                    <input type="email" name="email" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Email Address">
                                  
                                </div>
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Email Password</label>
                                    <input type="text" name="password" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Email Password">
                                    <option value="password"></option>
                                   
                                </div>
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Recovery Email</label>
                                    <input type="email" name="recovery_email" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Recovery Email">
                                </div>
                            </div>
                            <div class="row mx-n15">
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Account Email</label>
                                    <input type="email"name="account_email"  class="form-control ih-medium ip-light radius-xs b-light" placeholder="Account Email Address">
                                </div>
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Account Password</label>
                                    <input type="text" name="account_password" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Account Password">
                                </div>
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Passcode or Pin</label>
                                    <input type="number" name="passcode_pin" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Passcode or Pin">
                                </div>
                            </div>



                            <div class="row mx-n15">
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Number Provider</label>
                                    <input type="text" name="number_provider" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Company Name">
                                </div>


                            
                                <div class="col-md-4 mb-20 px-15">
                                    <label>Username or Email</label>
                                    <input type="text" name="number_email" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Username or Email">
                                </div>

                                <div class="col-md-4 mb-20 px-15">
                                    <label>Password for Number</label>
                                    <input type="text"  name="number_password" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Password for Number">
                                </div>
                            </div>

                            <div class="row mx-n15">
                            <div class="col-md-4 mb-20 px-15">
                                <label>Number</label>
                                <input type="text"  name="number" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Password for Number">
                            </div> 
                        
                           
                            <div class="col-md-4 mb-20 px-15">
                                <label>Proxy Info</label>
                                <input type="text" name="proxy" class="form-control ih-medium ip-light radius-xs b-light" placeholder="Proxy Info">
                            </div>
                            <div class="col-md-4 mb-20 px-15">
                                <label>File type</label>
                                <select name="" id="file_type" class="form-control ih-medium ip-light radius-xs b-light">
                                    <option value="">Select one</option>
                                    <option value="1">Existing File</option>
                                    <option value="2">New File</option>
                                </select>
                            </div>
                            <div class="row mx-n15">
                                <div class="col-md-12 mb-20 px-15">
                                    <label>Please provide any details</label>
                                    <textarea  name="note" class=" form-control ih-medium ip-light radius-xs b-light" placeholder="Please provide any details"></textarea>
                                </div>
                            </div>

                            <fieldset id="existing_file_section" style="display: none;">
                                <legend>Existing File Details</legend>
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-6">
                                        <label>Use Existing Attachment</label>
                                        <select name="attachment_id" class="form-control select-arrow-none ih-medium radius-xs b-light shadow-none color-light fs-14">
                                            <option value="">Select existing attachment</option>
                                            @foreach ($Aattachments as $attachment)
                                                <option value="{{ $attachment->id }}">{{ $attachment->attachment_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset id="new_file_section" style="display: none;">
                                <legend>Upload New File</legend>
                                <label for="attachment_name">Attachment Folder Name:</label>
                                <input type="text" id="attachment_name" name="attachment_custom_name" class="form-control">
                                
                                <div class="upload-container mt-3" id="dropArea">
                                    <p>Drop files here or <span style="color:blue; text-decoration:underline;">browse files</span></p>
                                    <input type="file" name="images[]" id="fileInput" multiple hidden>
                                </div>
                                
                                <div class="preview-container" id="previewContainer"></div>
                            </fieldset>
           
                            <button class="btn btn-primary px-30 mt-3" type="submit">Submit</button>
                        </form>
                       
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
</div>

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

    <!-- Uppy CSS -->
<link rel="stylesheet" href="https://releases.transloadit.com/uppy/v3.6.1/uppy.min.css">

<!-- Uppy JS -->
<script src="https://releases.transloadit.com/uppy/v3.6.1/uppy.min.js"></script>

<script>
    //  select value set in the hidden file
    document.getElementById('account_holder').addEventListener('input', function() {
        let input = this.value;
        let options = document.getElementById('holderOptions').options;
        let accountHolderIdField = document.getElementById('account_holder_id');
        accountHolderIdField.value = ''; // Reset in case of manual entry

        for (let option of options) {
            console.log(option.getAttribute('data-id'));
            if (option.value === input) {

                accountHolderIdField.value = option.getAttribute('data-id');
                break;
            }
        }
    });
//  select value set in the hidden file
    document.getElementById('product_name').addEventListener('input', function() {
        let input = this.value;
        let options = document.getElementById('profileOptions').options;
        let profileIdField = document.getElementById('profile_id');
        profileIdField.value = ''; // Reset in case of manual entry

        for (let option of options) {
            if (option.value === input) {
                profileIdField.value = option.getAttribute('data-id');
                break;
            }
        }
    });

// File upload type hide and show section
   document.getElementById('file_type').addEventListener('change', function() {
        let existingSection = document.getElementById('existing_file_section');
        let newSection = document.getElementById('new_file_section');

        if (this.value === "1") {
            existingSection.style.display = "block";
            newSection.style.display = "none";
        } else if (this.value === "2") {
            existingSection.style.display = "none";
            newSection.style.display = "block";
        } else {
            existingSection.style.display = "none";
            newSection.style.display = "none";
        }
    });
// For image drag and drop
 const dropArea = document.getElementById("dropArea");
        const fileInput = document.getElementById("fileInput");
        const previewContainer = document.getElementById("previewContainer");
        
        dropArea.addEventListener("click", () => fileInput.click());
        
        fileInput.addEventListener("change", handleFiles);
        dropArea.addEventListener("dragover", (event) => {
            event.preventDefault();
            dropArea.style.backgroundColor = "#e3e3e3";
        });
        
        dropArea.addEventListener("dragleave", () => {
            dropArea.style.backgroundColor = "#f9f9f9";
        });
        
        dropArea.addEventListener("drop", (event) => {
            event.preventDefault();
            dropArea.style.backgroundColor = "#f9f9f9";
            handleFiles(event.dataTransfer);
        });
        
        function handleFiles(event) {
            const files = event.files || event.target.files;
            for (const file of files) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const previewItem = document.createElement("div");
                    previewItem.classList.add("preview-item");
                    
                    const img = document.createElement("img");
                    img.src = e.target.result;
                    previewItem.appendChild(img);
                    
                    const removeBtn = document.createElement("button");
                    removeBtn.innerHTML = "&times;";
                    removeBtn.classList.add("remove-btn");
                    removeBtn.onclick = () => previewItem.remove();
                    previewItem.appendChild(removeBtn);
                    
                    previewContainer.appendChild(previewItem);
                };
                if (file.type.startsWith("image/")) {
                    reader.readAsDataURL(file);
                }
            }
        }
 

</script>

<style>
    fieldset {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    background: #f9f9f9;
}

legend {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 0 10px;
    background: #fff;
    border-radius: 5px;
}
/* image  */
.upload-container {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            background-color: #f9f9f9;
        }
        .upload-container:hover {
            background-color: #f1f1f1;
        }
        .preview-container {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .preview-item {
            position: relative;
            display: inline-block;
        }
        .preview-item img {
            max-width: 100px;
            max-height: 100px;
            border-radius: 5px;
        }
        .remove-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            background: red;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            width: 20px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
        }
/*  */
/*  */

</style>

@endsection