@extends('layouts.app',['title'=>'Seller Application'])

@section('content')
<section class="ptb-100 pt-0">
    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(!$errors->isEmpty())
        <div class="alert alert-danger col-sm-12 text-center"> <!-- offset-sm-1 -->
            <i class="fa fa-warning"></i>
            <strong>Please check and fix issues in the Form!</strong><br/>
            <ul class="list text-start">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form id="sellerForm" action="{{route('sellerStorage')}}" method="POST" enctype="multipart/form-data">
    @csrf <!-- Add CSRF token -->
    <input type="hidden" name="user_id" value="{{ $user_id }}" />
    <input type="hidden" name="member_id" value="{{ $member_id }}" />

    <!-- Hidden inputs for images -->
    <input type="hidden" name="upload_product_images" value="{{ $member->cbmIsProvidedPicture }}" />
    <input type="hidden" name="image0" id="image0Input" />
    <input type="hidden" name="image1" id="image1Input" />
    <input type="hidden" name="image2" id="image2Input" />
    <input type="hidden" name="image3" id="image3Input" />
    <input type="hidden" name="image4" id="image4Input" />
    <input type="hidden" name="image5" id="image5Input" />

    <div class="row gy-4 gy-lg-0">
        <div class="col-lg-6">
            <div class="text-center">
                <figure class="mb-2">
                    <img src="{{ $logo }}" alt="" style="max-width:150px;" />
                </figure>
                <h2 class="mb-3">Welcome to {{ $welcome_label }}</h2>
                <p>{{ $welcome_text }}</p>
            </div>
            
            <div class="form-group">
                <label>Email Address</label>
                <input type="text" class="form-control" value="{{$member->cbmEmail}}" readonly>
            </div>
            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" value="{{$member->cbmName}}" readonly>
            </div>
            <div class="form-group">
                <label>Marketplaces <span class="text-danger">*</span></label>
                <input type="text" name="marketplaces" class="form-control" placeholder="eBay, Shopify" value="{{ old('marketplaces') }}">
            </div>
            <div class="form-group">
                <label>Store Name(s) <span class="text-danger">*</span></label>
                <input type="text" name="storenames" class="form-control" placeholder="Bob's Tools" value="{{ old('storenames') }}">
            </div>
            <div class="form-group">
                <label>Store URL(s) <span class="text-danger">*</span></label>
                <input type="text" name="storeurls" class="form-control" placeholder="https://store1.com, https://store2.com" value="{{ old('storeurls') }}">
            </div>
            <div class="form-group">
                <label>Phone</label>
                <input type="text" name="phone" class="form-control" placeholder="xxx-xxx-xxxx" value="{{ old('phone') }}">
            </div>
            <div class="form-group">
                <label>Short Detail</label>
                <input type="text" name="short_detail" class="form-control" placeholder="Enter some detail here ..." value="{{ old('short_detail') }}">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="images-added">
                <div class="form-group">
                    <label>Product Name <span class="text-danger">*</span></label>
                    <input type="text" name="productname" class="form-control" placeholder="Product Name" value="{{ old('productname') }}">
                </div>
                <div class="form-group">
                    <label>Product Type <span class="text-danger">*</span></label>
                    <select name="producttype" class="form-control">
                        @foreach($product_types as $id => $type)
                            <option value="{{ $id }}" {{ (old('producttype') == $id) ? 'selected="selected"' : '' }}>{{ $type }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Short Description <span class="text-danger">*</span></label>
                    <input name="shortdescription" type="text" class="form-control" placeholder="Enter Short Description" value="{{ old('shortdescription') }}">
                </div>
                <div class="form-group">
                    <label>URL <span class="text-danger">*</span></label>
                    <input name="url" type="text" class="form-control" placeholder="" value="{{ old('url') }}">
                </div>
                <div class="form-group">
                    <label>Price <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">$</span>
                        </div>
                        <input name="price" type="number" class="form-control" placeholder="" value="{{ old('price') }}" step="0.01" min="0">
                    </div>
                </div>

                @if($member->cbmIsProvidedPicture == 1)
                <div class="form-group">
                    <label>Images</label>
                    <div class="drop-zone">
                        <figure>
                            <img id="main-upload-img" src="{{ asset('images/upload-img.svg') }}" alt="">
                        </figure>
                        <p><span>Upload</span> or <span>drag and drop</span></p>
                        <input type="file" name="myFile" class="drop-zone__input" id="main-image-upload" accept="image/*">
                    </div>
                    <ul class="added-img" id="image-placeholder-list">
                        <li data-index="0">
                            <figure>
                                <img id="img0" src="{{ asset('images/upload-img.svg') }}" alt="">
                            </figure>
                            <div class="icon">
                                <a href="#" class="edit-icon" data-index="0">
                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                </a>
                                <a href="#" class="delete-icon" data-index="0">
                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                </a>
                            </div>
                        </li>
                        <li data-index="1">
                            <figure>
                                <img id="img1" src="{{ asset('images/upload-img.svg') }}" alt="">
                            </figure>
                            <div class="icon">
                                <a href="#" class="edit-icon" data-index="1">
                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                </a>
                                <a href="#" class="delete-icon" data-index="1">
                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                </a>
                            </div>
                        </li>
                        <li data-index="2">
                            <figure>
                                <img id="img2" src="{{ asset('images/upload-img.svg') }}" alt="">
                            </figure>
                            <div class="icon">
                                <a href="#" class="edit-icon" data-index="2">
                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                </a>
                                <a href="#" class="delete-icon" data-index="2">
                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                </a>
                            </div>
                        </li>
                        <li data-index="3">
                            <figure>
                                <img id="img3" src="{{ asset('images/upload-img.svg') }}" alt="">
                            </figure>
                            <div class="icon">
                                <a href="#" class="edit-icon" data-index="3">
                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                </a>
                                <a href="#" class="delete-icon" data-index="3">
                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                </a>
                            </div>
                        </li>
                        <li data-index="4">
                            <figure>
                                <img id="img4" src="{{ asset('images/upload-img.svg') }}" alt="">
                            </figure>
                            <div class="icon">
                                <a href="#" class="edit-icon" data-index="4">
                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                </a>
                                <a href="#" class="delete-icon" data-index="4">
                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                </a>
                            </div>
                        </li>
                        <li data-index="5">
                            <figure>
                                <img id="img5" src="{{ asset('images/upload-img.svg') }}" alt="">
                            </figure>
                            <div class="icon">
                                <a href="#" class="edit-icon" data-index="5">
                                    <img src="{{ asset('images/edit-icon.svg') }}" alt="">
                                </a>
                                <a href="#" class="delete-icon" data-index="5">
                                    <img src="{{ asset('images/delete-icon.svg') }}" alt="">
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                @endif
            </div>
        </div>
    </div>
    <div class="row mt-40">
        <div class="col-md-12">
            <p>{{ $disclaimer }}</p>
        </div>
        <div class="col-md-12 mt-40">
            <button type="submit" class="ms-auto btn btn-primary" id="submitButton">Submit</button>
        </div>
    </div>
    </form>
</section>

<script>
    document.getElementById('submitButton').addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default form submission
    
        const form = document.getElementById('sellerForm');
        let isValid = true;
        let firstInvalidInput = null; // Store the first invalid input for focusing

        // Validate required fields
        document.querySelectorAll('.form-group').forEach(function(group) {
            const input = group.querySelector('input, select');
            const label = group.querySelector('label');
        
            if(label && label.innerHTML.includes('*')) {
                if(!input.value) {
                    input.style.border = '1px solid red'; // Add red border for invalid inputs
                    isValid = false;

                    if(!firstInvalidInput) {
                        firstInvalidInput = input; // Store the first invalid input
                    }
                } else {
                    input.style.border = ''; // Reset border if valid
                }
            }
        });

        if (!isValid && firstInvalidInput) {
            firstInvalidInput.focus(); // Focus the first invalid input
        } else {
            // Get base64 image data from images with id "img0" to "img5" and set hidden input fields
            for(let i = 0; i <= 5; i++) {
                const imgElement = document.getElementById('img' + i);
                const hiddenInput = document.getElementById('image' + i + 'Input');
                
                if(imgElement && hiddenInput) {
                    const base64Image = imgElement.src.startsWith('data:image/') ? imgElement.src : '';
                    hiddenInput.value = base64Image;  // Set hidden input value
                }
            }

            // Example: Disable a button and change its text
            const submitButton = form.querySelector('button[type="submit"]'); // Find the submit button

            if(submitButton) {
                submitButton.disabled = true; // Disable the button
                submitButton.textContent = 'Processing...'; // Change the button text
            }

            // Regular form submit
            form.submit();
        }
    });


      const defaultImgSrc = "{{ asset('images/upload-img.svg') }}";
      let currentUploadIndex = 0; 
      let imageUploads = Array(6).fill(null);

    if(document.querySelector('#main-image-upload')) {
      document.getElementById('main-image-upload').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file && currentUploadIndex < 6) {
          const reader = new FileReader();
          reader.onload = function(event) {
            const imgElement = document.getElementById('img' + currentUploadIndex);
            imgElement.src = event.target.result;
            imageUploads[currentUploadIndex] = file;
            currentUploadIndex++;
          };
          reader.readAsDataURL(file);
        }
      });
    }

      document.querySelectorAll('.edit-icon').forEach(function(editBtn) {
        editBtn.addEventListener('click', function(e) {
          e.preventDefault();
          const index = e.target.closest('a').dataset.index;
          const fileInput = document.createElement('input');
          fileInput.type = 'file';
          fileInput.accept = 'image/*';
          fileInput.onchange = function(event) {
            const file = event.target.files[0];
            if (file) {
              const reader = new FileReader();
              reader.onload = function(event) {
                const imgElement = document.getElementById('img' + index);
                imgElement.src = event.target.result;
                imageUploads[index] = file;
              };
              reader.readAsDataURL(file);
            }
          };
          fileInput.click();
        });
      });

      document.querySelectorAll('.delete-icon').forEach(function(deleteBtn) {
        deleteBtn.addEventListener('click', function(e) {
          e.preventDefault();
          const index = e.target.closest('a').dataset.index;
          const imgElement = document.getElementById('img' + index);
          imgElement.src = defaultImgSrc;
          imageUploads[index] = null;
        });
      });
    </script>
@endsection