Update README.md to enhance project documentation and clarify setup instructions

.gitea/workflows/build-push.yml

@@ -0,0 +1,57 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Docker image tag (e.g., v1.0.0, latest)'
+        required: false
+        default: 'latest'
+      push_to_registry:
+        description: 'Push to registry?'
+        required: false
+        default: 'true'
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Docker Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ secrets.DOCKER_REGISTRY_URL }}
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ secrets.DOCKER_REGISTRY_URL }}/merchbay
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=raw,value=latest
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=${{ secrets.DOCKER_REGISTRY_URL }}/merchbay:buildcache
+          cache-to: type=registry,ref=${{ secrets.DOCKER_REGISTRY_URL }}/merchbay:buildcache,mode=max

.gitea/workflows/deploy-dev.yml

@@ -0,0 +1,151 @@
+name: Deploy Development
+
+on:
+  push:
+    branches:
+      - dev
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+
+    steps:
+      # 1️⃣ Checkout code
+      - name: Checkout code
+        shell: sh
+        run: |
+          git clone $GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git /workspace/repo
+          cd /workspace/repo
+          git checkout $GITHUB_REF_NAME
+
+      # 2️⃣ Build image
+      - name: Build Docker image
+        shell: sh
+        run: |
+          cd /workspace/repo
+          docker build -t merchbay:dev .
+          docker save merchbay:dev | gzip > merchbay_dev.tar.gz
+
+      # 3️⃣ Setup SSH
+      - name: Setup SSH
+        shell: sh
+        env:
+          DEPLOY_SSH_KEY: ${{ secrets.DEPLOY_SSH_KEY }}
+          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+        run: |
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
+          echo "$DEPLOY_SSH_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -H "$DEPLOY_HOST" >> ~/.ssh/known_hosts
+
+      # 4️⃣ Upload artifacts
+      - name: Upload image and compose
+        shell: sh
+        env:
+          DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
+          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+        run: |
+          scp -i ~/.ssh/id_ed25519 \
+            /workspace/repo/merchbay_dev.tar.gz \
+            /workspace/repo/docker-compose.yml \
+            ${DEPLOY_USER}@${DEPLOY_HOST}:/tmp/
+
+      # 5️⃣ Deploy on server
+      - name: Deploy on server
+        shell: sh
+        env:
+          DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
+          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+
+        run: |
+          ssh -i ~/.ssh/id_ed25519 $DEPLOY_USER@$DEPLOY_HOST << 'EOF'
+            set -e
+
+            DEPLOY_DIR="/var/www/apps/merchbay_dev"
+            mkdir -p "$DEPLOY_DIR"
+
+            echo "📦 Loading image"
+            docker load < /tmp/merchbay_dev.tar.gz
+
+            echo "📄 Updating compose file"
+            cp /tmp/docker-compose.yml "$DEPLOY_DIR/"
+
+            cd "$DEPLOY_DIR"
+
+            echo "🔍 Checking .env file"
+            if [ ! -f .env ]; then
+              echo "❌ .env file not found at $DEPLOY_DIR/.env"
+              echo "Please create it first with required variables:"
+              echo "  - DB_*, PROD_PRIVATE, IMAGES_URL, UPLOAD_URL"
+              echo "  - MAIL_*, CAPTCHA_*, ANALYTICS_*"
+              exit 1
+            fi
+
+            echo "🔧 Fixing .env permissions"
+            sudo chown $USER:$USER .env
+            sudo chmod 600 .env
+
+            echo "🌐 Ensure networks"
+            docker network inspect traefik-public >/dev/null 2>&1 || \
+              docker network create traefik-public
+            docker network inspect crew-app-net >/dev/null 2>&1 || \
+              docker network create crew-app-net
+
+            echo "🚀 Starting containers (env vars from .env file)"
+            docker compose up -d
+
+            echo "⏳ Waiting for app container"
+            sleep 15
+
+            if docker ps --format '{{.Names}}' | grep -q merchbay_app; then
+              echo "🧹 Clearing and rebuilding config cache"
+              docker compose exec -T app php artisan config:clear
+              docker compose exec -T app php artisan config:cache
+            else
+              echo "❌ App container not running"
+              docker compose logs
+              exit 1
+            fi
+
+            echo "🧹 Cleanup"
+            rm -f /tmp/merchbay_dev.tar.gz /tmp/docker-compose.yml
+            docker image prune -f
+
+            echo "✅ Deployment completed"
+          EOF
+
+
+      # 6️⃣ Health check
+      - name: Health check
+        shell: sh
+        run: |
+          echo "⏳ Waiting for app to be ready..."
+          sleep 20
+          
+          echo "🔍 Testing health check (ignoring SSL cert for now)..."
+          HTTP_CODE=$(curl -k -s -o /dev/null -w "%{http_code}" --max-time 30 https://dev.merchbay.app || echo "000")
+          
+          if [ "$HTTP_CODE" = "200" ] || [ "$HTTP_CODE" = "302" ] || [ "$HTTP_CODE" = "301" ]; then
+            echo "✅ Health check passed! (HTTP $HTTP_CODE)"
+            echo "⚠️  Note: Using -k to ignore SSL cert. Check Traefik logs if cert not ready."
+          else
+            echo "❌ Health check failed! (HTTP $HTTP_CODE)"
+            echo ""
+            echo "💡 Troubleshooting:"
+            echo "  1. Check if container is running:"
+            echo "     docker ps | grep merchbay_app"
+            echo ""
+            echo "  2. Check app logs:"
+            echo "     docker logs merchbay_app"
+            echo ""
+            echo "  3. Check Traefik logs:"
+            echo "     docker logs traefik"
+            echo ""
+            echo "  4. Test manually:"
+            echo "     curl -Ik https://dev.merchbay.app"
+            exit 1
+          fi

.gitea/workflows/deploy.yml

@@ -0,0 +1,82 @@
+name: Deploy Production
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    
+    steps:
+      - name: Checkout code
+        shell: sh
+        run: |
+          git clone $GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git /workspace/repo || true
+          cd /workspace/repo
+          git fetch origin $GITHUB_REF_NAME
+          git checkout $GITHUB_REF_NAME
+          git pull origin $GITHUB_REF_NAME
+
+      - name: Build Docker Image
+        shell: sh
+        run: |
+          cd /workspace/repo
+          docker build -t merchbay:latest .
+          docker save merchbay:latest | gzip > merchbay.tar.gz
+
+      - name: Setup SSH and Deploy
+        shell: sh
+        run: |
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
+          echo "$PROD_DEPLOY_SSH_KEY" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh-keygen -y -f ~/.ssh/deploy_key > /dev/null 2>&1 || { echo "Error: Invalid SSH key format"; exit 1; }
+          
+          cd /workspace/repo
+          scp -o StrictHostKeyChecking=no -i ~/.ssh/deploy_key merchbay.tar.gz docker-compose.yml "$PROD_DEPLOY_USER@$PROD_DEPLOY_HOST:/tmp/"
+          
+          ssh -o StrictHostKeyChecking=no -i ~/.ssh/deploy_key "$PROD_DEPLOY_USER@$PROD_DEPLOY_HOST" "
+            DEPLOY_DIR='/var/www/merchbay'
+            mkdir -p \$DEPLOY_DIR
+            cd /tmp
+            docker load < merchbay.tar.gz
+            cp docker-compose.yml \$DEPLOY_DIR/
+            cd \$DEPLOY_DIR
+            
+            # .env file should already exist on server with all required variables
+            # Required: DB_*, PROD_PRIVATE, IMAGES_URL, UPLOAD_URL
+            # Required: MAIL_*, CAPTCHA_*, ANALYTICS_*
+            # If it doesn't exist, deployment will fail (this is intentional for security)
+            
+            docker compose down || true
+            docker image prune -f
+            docker network inspect traefik-public >/dev/null 2>&1 || docker network create traefik-public
+            export DOMAIN=merchbay.app
+            export APP_URL=https://merchbay.app
+            docker compose up -d
+            sleep 10
+            docker compose exec -T app php artisan migrate --force
+            docker compose exec -T app php artisan config:cache
+            docker compose exec -T app php artisan route:cache
+            docker compose exec -T app php artisan view:cache
+            rm -f /tmp/merchbay.tar.gz /tmp/docker-compose.yml
+            echo 'Production deployment completed successfully!'
+            echo 'Application available at: https://merchbay.app'
+          "
+        env:
+          PROD_DEPLOY_SSH_KEY: ${{ secrets.PROD_DEPLOY_SSH_KEY }}
+          PROD_DEPLOY_USER: ${{ secrets.PROD_DEPLOY_USER }}
+          PROD_DEPLOY_HOST: ${{ secrets.PROD_DEPLOY_HOST }}
+
+      - name: Health Check
+        shell: sh
+        run: |
+          sleep 10
+          curl -f https://merchbay.app || exit 1

Dockerfile

@@ -1,46 +1,80 @@
-# Use the official PHP image based on Alpine Linux
-FROM php:5.6-fpm-alpine
+# Use PHP 7.0 with Apache (has native mcrypt support for Laravel 5.0)
+FROM php:7.0-apache
 
-# Install system dependencies and PHP extensions
-RUN apk --update --no-cache add \
-    nginx \
+# Update to use archived Debian repositories
+RUN sed -i 's|deb.debian.org|archive.debian.org|g' /etc/apt/sources.list \
+    && sed -i 's|security.debian.org|archive.debian.org|g' /etc/apt/sources.list \
+    && sed -i '/stretch-updates/d' /etc/apt/sources.list
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --allow-unauthenticated \
+    git \
+    curl \
     libpng-dev \
-    libjpeg-turbo-dev \
-    freetype-dev \
-    libzip-dev \
+    libxml2-dev \
+    libmcrypt-dev \
     zip \
     unzip \
-    libmcrypt-dev \
-    && docker-php-ext-configure gd --with-freetype --with-jpeg \
-    && docker-php-ext-install gd pdo pdo_mysql zip mcrypt
+    libfreetype6-dev \
+    libjpeg62-turbo-dev \
+    openssh-client \
+    && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
+    && docker-php-ext-install -j$(nproc) gd
 
-# Set the working directory in the container
-WORKDIR /var/www
+# Install PHP extensions (mcrypt is built-in for PHP 7.0)
+RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath mcrypt tokenizer zip
 
-# Clear cache
-# RUN apt-get clean && rm -rf /var/lib/apt/lists/*
+# Enable Apache mod_rewrite
+RUN a2enmod rewrite
 
-# Copy the Laravel application files to the container
-COPY . .
+# Install Composer (version 1.x for better compatibility with Laravel 5.0)
+COPY --from=composer:1.10 /usr/bin/composer /usr/bin/composer
 
-# Set appropriate permissions for Laravel storage and bootstrap cache
-RUN chown -R www-data:www-data storage bootstrap
+# Set working directory
+WORKDIR /var/www/html
 
-# Install Composer
-RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
+# Copy existing application directory contents
+COPY . /var/www/html
 
-# Install Laravel dependencies
-RUN composer install --no-plugins --no-scripts
+# Create storage directories and set permissions
+RUN mkdir -p storage/framework/views \
+    storage/framework/cache \
+    storage/framework/sessions \
+    storage/logs \
+    bootstrap/cache
 
-# Generate Laravel application key
-RUN php artisan key:generate
+# Set proper ownership and permissions
+RUN chown -R www-data:www-data /var/www/html \
+    && chmod -R 775 /var/www/html/storage \
+    && chmod -R 775 /var/www/html/bootstrap/cache
 
-# Create directory for the socket and set permissions
-RUN mkdir -p /run/php && chown www-data:www-data /run/php
+# Create .env file if it doesn't exist
+RUN if [ ! -f .env ]; then cp .env.example .env; fi
 
-# Copy the www.conf file to PHP-FPM pool.d directory
-# COPY www.conf /usr/local/etc/php-fpm.d/www.conf
+# Install PHP dependencies (Laravel 5.0 compatible)
+RUN composer install --no-dev --no-interaction --prefer-dist
 
-# Expose port 9000 and start php-fpm server
-EXPOSE 9000
-CMD ["php-fpm"]
+# Generate application key
+RUN php artisan key:generate || true
+
+# Run Laravel 5.0 optimization
+RUN php artisan clear-compiled && php artisan optimize
+
+# Configure Apache DocumentRoot to point to Laravel's public directory
+ENV APACHE_DOCUMENT_ROOT=/var/www/html/public
+RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
+RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
+
+# Suppress Apache ServerName warning
+RUN echo "ServerName localhost" >> /etc/apache2/apache2.conf
+
+# Copy entrypoint script
+COPY docker-entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# Expose port 80
+EXPOSE 80
+
+# Use entrypoint to set up permissions before starting Apache
+ENTRYPOINT ["docker-entrypoint.sh"]
+CMD ["apache2-foreground"]

app/Http/Controllers/paypal/PaypalController.php

@@ -399,13 +399,14 @@ class PaypalController extends Controller
 	public function getTax($cartKey)
 	{
 		$m		 		= new TeamStoreModel;
-		$updated_getSubtotal 	= $m->getSubtotal($cartKey);
+		$updated_getSubtotal 	= $m->getSubtotalNew($cartKey);
+		$original_subtotal 	= $m->getSubtotal($cartKey); // withoutTanle
 		$grouped_item 	= $m->selectTeamStoreGroupByCartKey($cartKey);
 
 		if (count($grouped_item) <= 0) {
 			$tax_value = 0;
 		} else {
-			if ($grouped_item[0]->StoreId == 76 || $grouped_item[0]->StoreId == 78 || $grouped_item[0]->StoreId == 111 || $grouped_item[0]->StoreId == 131 || $grouped_item[0]->StoreId == 30 || $grouped_item[0]->StoreId == 141 || $grouped_item[0]->StoreId == 162 || $grouped_item[0]->StoreId == 185 || $grouped_item[0]->StoreId == 244 || $grouped_item[0]->StoreId == 301 || $grouped_item[0]->StoreId == 1  || $grouped_item[0]->StoreId == 329 || $grouped_item[0]->StoreId == 340) {
+			if ($grouped_item[0]->StoreId == 76 || $grouped_item[0]->StoreId == 78 || $grouped_item[0]->StoreId == 111 || $grouped_item[0]->StoreId == 131 || $grouped_item[0]->StoreId == 30 || $grouped_item[0]->StoreId == 141 || $grouped_item[0]->StoreId == 162 || $grouped_item[0]->StoreId == 185 || $grouped_item[0]->StoreId == 244 || $grouped_item[0]->StoreId == 301 || $grouped_item[0]->StoreId == 1  || $grouped_item[0]->StoreId == 329 || $grouped_item[0]->StoreId == 340 || $grouped_item[0]->StoreId == 346) {
 				$tax_value = 0;
 			} else {
 				$tax_value = 0.10;
@@ -414,10 +415,11 @@ class PaypalController extends Controller
 
 
 		$order_grandtotal = $updated_getSubtotal[0]->Subtotal;
+		$order_subtotal = $original_subtotal[0]->Subtotal;
+		
 
 
-
-		$tax = $order_grandtotal * $tax_value;
+		$tax = $order_subtotal * $tax_value;
 
 		return [
 			'tax' => $tax,

app/Http/Controllers/teamstore/TeamStoreController.php

@@ -499,6 +499,30 @@ class TeamStoreController extends Controller
 					'ShippingCostId' => $shipping_cost_id
 				);
 			}
+		} elseif ($product_form == "number-size-form") {
+
+			// $order_names =  $post['order_names'];
+			$order_number =  $post['order_number'];
+			$order_size =  $post['order_size'];
+
+			foreach ($order_size as $key => $val) {
+				$items[] = array(
+					'ProductId'		=> $product_id,
+					'StoreURL'		=> $store_url,
+					'StoreId'		=> $store_id,
+					'FormUsed'		=> $product_form,
+					'CartKey' 	 	=> $cartKey,
+					'DesignCode'	=> $design_code,
+					'ProductURL' 	=> $ProductURL,
+					'ProductName' 	=> $product_name,
+					'Name' 		 	=> $product_name,
+					'Size' 		 	=> $order_size[$key],
+					'Number'     	=> $order_number[$key],
+					'Price'			=> $ProductPrice,
+					'Quantity'		=> 1,
+					'ShippingCostId' => $shipping_cost_id
+				);
+			}
 		} elseif ($product_form == "number-form") {
 
 			$order_number =  $post['order_number'];
@@ -954,6 +978,7 @@ class TeamStoreController extends Controller
 				'shippingFee' => number_format($shippingFee, 2),
 				'total' =>  number_format($finalSubTotal + $shippingFee + $tax["tax"], 2),
 				'subtotal' =>  number_format($finalSubTotal, 2),
+				'tax' => $tax["tax"],
 				'remaining_shippingfee' => number_format(99 - $finalSubTotal, 2)
 			));
 		} else {

app/Http/Controllers/user/UserController.php

@@ -348,14 +348,16 @@ class UserController extends Controller
 		$newTeamStoreModel 	= new TeamStoreModel;
 
 		$product_array 		= $newTeamStoreModel->selectTeamStoreProducts('ProductURL', $url);
+		$roster 		=     $newUserModel->getRoster($product_array[0]->Id);
 		$thumbnails_array 	= $newTeamStoreModel->getThumbnails($product_array[0]->Id);
 		$available_size = explode(",", $product_array[0]->AvailableSizes);
 		$shipping_cost = $newUserModel->selectShippingCost();
-
 		return view('user-layouts.view-store-item')->with('product_array', $product_array)
 			->with('available_size', $available_size)
 			->with('thumbnails_array', $thumbnails_array)
-			->with('shipping_cost', $shipping_cost);
+			->with('shipping_cost', $shipping_cost)
+			->with('roster', $roster);
+			 
 	}
 
 
@@ -1344,4 +1346,76 @@ class UserController extends Controller
 
 		return $array_address_book;
 	}
-}
+
+	function roster(Request $request)
+	{
+		$UserModel				= new UserModel;
+		$post 					=	$request->all();
+
+		$response = $UserModel->insertRoster($post['data']);
+		
+		if($response) {
+			return response()->json(array(
+				'status' => true,
+				'message' => "Roster is successfully saved."
+			));
+		}
+
+		return response()->json(array(
+			'status' => false,
+			'message' => "Something went wrong. Please try again"
+		));
+		
+	}
+
+	function deleteRoster(Request $request) {
+		$UserModel				= new UserModel;
+		$post 					=	$request->all();
+
+		$response = $UserModel->deleteRoster($post['data']);
+		
+		if($response) {
+			return response()->json(array(
+				'status' => true,
+				'message' => "Roster is successfully deleted."
+			));
+		}
+
+		return response()->json(array(
+			'status' => false,
+			'message' => "Something went wrong. Please try again"
+		));
+
+	} 
+
+
+	function rosterUpdate(Request $request)
+	{
+		$UserModel				= new UserModel;
+		$post 					=	$request->all();
+
+		$response = $UserModel->updateRoster($post['data']);
+		
+		if($response) {
+			return response()->json(array(
+				'status' => true,
+				'message' => "Roster is successfully updated."
+			));
+		}
+
+		return response()->json(array(
+			'status' => false,
+			'message' => "Something went wrong. Please try again"
+		));
+		
+	}
+
+	function getCurrentRoster(Request $request) {
+		$productId = $request->query('product-id');
+		$newUserModel 		= new UserModel;
+		$roster 		=     $newUserModel->getRoster($productId);
+		return response()->json($roster);
+	}
+
+	
+}

app/Http/routes.php

@@ -149,6 +149,11 @@ Route::group(['middleware' => 'normaluser'], function () {
 
 
 	Route::post('user/store-items/personal-design', 'user\UserController@saveNewItemFromDesigner');
+
+	Route::post('user/roster', 'user\UserController@roster');
+	Route::get('user/roster', 'user\UserController@getCurrentRoster');
+	Route::post('user/roster-delete', 'user\UserController@deleteRoster');
+	Route::post('user/roster-update', 'user\UserController@rosterUpdate');
 });
 
 Route::group(['middleware' => 'auth'], function () {

app/Models/teamstore/TeamStoreModel.php

@@ -189,6 +189,16 @@ class TeamStoreModel extends Model
 		return $i;
 	}
 
+	function getSubtotalNew($cartKey)
+	{
+
+		$i = DB::table('cart_tmp')->select(DB::raw('SUM(Quantity * Price) AS Subtotal'))
+			->where('CartKey', '=', $cartKey)
+			// ->where('VoucherId', '=', null)
+			->get();
+		return $i;
+	}
+
 	function updateStoreItem($data, $url)
 	{
 		$i = DB::table('teamstore_products')->where('ProductURL', $url)

app/Models/user/UserModel.php

@@ -425,4 +425,44 @@ class UserModel extends Model
 			->update($data);
 		return $i;
 	}
-}
+
+	function insertRoster($data) {
+		$i = DB::table('roster')
+			->insert($data);
+		return $i;
+	}
+
+	function getRoster($productId)
+	{
+		$i = DB::table('roster')
+			->where('ProductId', $productId)
+			->get();
+		return $i;
+	}
+
+	 function deleteRoster($idArray)
+	{
+		$deletedRows = DB::table('roster')
+			->whereIn('Id', $idArray) // Replace 'id' with the actual column name if different
+			->delete();
+	
+		return $deletedRows; // Returns the number of rows deleted
+	}
+
+	function updateRoster($data)
+	{
+		$updatedRows = 0;
+
+		foreach ($data as $item) {
+			// Assuming each item contains an 'id' and the fields to update
+			$id = $item['Id'];
+			unset($item['Id']); // Remove 'id' from the update data
+
+			$updatedRows += DB::table('roster')
+				->where('Id', $id)
+				->update($item);
+		}
+
+		return $updatedRows; // Returns the total number of rows updated
+	}
+}

composer.json

@@ -46,6 +46,9 @@
         ]
     },
     "config": {
-        "preferred-install": "dist"
+        "preferred-install": "dist",
+        "allow-plugins": {
+            "kylekatarnls/update-helper": true
+        }
     }
 }

docker-compose.yml

@@ -1,45 +1,56 @@
-version: '3'
 services:
-  
-  #PHP Service
   app:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    image: digitalocean.com/php
-    container_name: app
+    image: merchbay:dev
+    container_name: merchbay_app
     restart: unless-stopped
-    tty: true
     environment:
-      SERVICE_NAME: app
-      SERVICE_TAGS: dev
-    working_dir: /var/www
+      - APP_ENV=${APP_ENV:-production}
+      - APP_DEBUG=${APP_DEBUG:-false}
+      - APP_URL=${APP_URL:-http://localhost}
+      - DB_CONNECTION=mysql
+      - DB_HOST=${DB_HOST}
+      - DB_PORT=${DB_PORT:-3306}
+      - DB_DATABASE=${DB_DATABASE}
+      - DB_USERNAME=${DB_USERNAME}
+      - DB_PASSWORD=${DB_PASSWORD}
+      - PROD_PRIVATE=${PROD_PRIVATE}
+      - IMAGES_URL=${IMAGES_URL}
+      - UPLOAD_URL=${UPLOAD_URL}
+      - MAIL_DRIVER=${MAIL_DRIVER}
+      - MAIL_HOST=${MAIL_HOST}
+      - MAIL_PORT=${MAIL_PORT}
+      - MAIL_USERNAME=${MAIL_USERNAME}
+      - MAIL_PASSWORD=${MAIL_PASSWORD}
+      - MAIL_ENCRYPTION=${MAIL_ENCRYPTION}
+      - CAPTCHA_SITE_KEY=${CAPTCHA_SITE_KEY}
+      - CAPTCHA_SECRET_KEY=${CAPTCHA_SECRET_KEY}
+      - ANALYTICS_SITE_ID=${ANALYTICS_SITE_ID}
+      - ANALYTICS_CLIENT_ID=${ANALYTICS_CLIENT_ID}
+      - ANALYTICS_SERVICE_EMAIL=${ANALYTICS_SERVICE_EMAIL}
     volumes:
-      - ./:/var/www
-      - ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
+      - ./storage:/var/www/html/storage
+      - ./public/uploads:/var/www/html/public/uploads
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.merchbay-dev.rule=Host(`dev.merchbay.app`)"
+      - "traefik.http.routers.merchbay-dev.entrypoints=websecure"
+      - "traefik.http.routers.merchbay-dev.tls=true"
+      - "traefik.http.routers.merchbay-dev.tls.certresolver=le"
+      - "traefik.http.services.merchbay-dev.loadbalancer.server.port=80"
+      # HTTP to HTTPS redirect
+      - "traefik.http.routers.merchbay-dev-http.rule=Host(`dev.merchbay.app`)"
+      - "traefik.http.routers.merchbay-dev-http.entrypoints=web"
+      - "traefik.http.routers.merchbay-dev-http.middlewares=https-redirect"
+      - "traefik.http.middlewares.https-redirect.redirectscheme.scheme=https"
     networks:
-      - app-network
+      - traefik-public
+      - crew-app-net
+      - default
 
-  #Nginx Service
-  webserver:
-    image: nginx:alpine
-    container_name: webserver
-    restart: unless-stopped
-    tty: true
-    ports:
-      - "10003:80"
-      - "10443:443"
-    volumes:
-      - ./:/var/www
-      - ./nginx/conf.d/:/etc/nginx/conf.d/
-    networks:
-      - app-network
-
-#Docker Networks
 networks:
-  app-network:
-    driver: bridge
-#Volumes
-volumes:
-  dbdata:
-    driver: local
+  traefik-public:
+    external: true
+  crew-app-net:
+    external: true
+  default:
+    driver: bridge

docker-entrypoint.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+set -e
+
+# Create storage directory structure if it doesn't exist
+mkdir -p storage/framework/views
+mkdir -p storage/framework/cache
+mkdir -p storage/framework/sessions
+mkdir -p storage/logs
+mkdir -p storage/app/public
+mkdir -p bootstrap/cache
+
+# Set proper permissions
+chown -R www-data:www-data storage bootstrap/cache
+chmod -R 775 storage bootstrap/cache
+
+# Execute the main command
+exec "$@"

readme.md

@@ -1,23 +1,171 @@
-## Laravel PHP Framework
+# MerchBay
 
-[![Build Status](https://travis-ci.org/laravel/framework.svg)](https://travis-ci.org/laravel/framework)
-[![Total Downloads](https://poser.pugx.org/laravel/framework/downloads.svg)](https://packagist.org/packages/laravel/framework)
-[![Latest Stable Version](https://poser.pugx.org/laravel/framework/v/stable.svg)](https://packagist.org/packages/laravel/framework)
-[![Latest Unstable Version](https://poser.pugx.org/laravel/framework/v/unstable.svg)](https://packagist.org/packages/laravel/framework)
-[![License](https://poser.pugx.org/laravel/framework/license.svg)](https://packagist.org/packages/laravel/framework)
+A custom merchandise and apparel design platform built with Laravel 5.0, enabling users to create, customize, and order personalized products.
 
-Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable, creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as authentication, routing, sessions, queueing, and caching.
+## 🚀 Tech Stack
 
-Laravel is accessible, yet powerful, providing powerful tools needed for large, robust applications. A superb inversion of control container, expressive migration system, and tightly integrated unit testing support give you the tools you need to build any application with which you are tasked.
+- **Framework:** Laravel 5.0
+- **PHP:** 7.0 with native mcrypt support
+- **Web Server:** Apache 2.4
+- **Database:** MySQL
+- **Container:** Docker with Apache
+- **Reverse Proxy:** Traefik (for SSL/TLS and routing)
 
-## Official Documentation
+## 📋 Prerequisites
 
-Documentation for the framework can be found on the [Laravel website](http://laravel.com/docs).
+- Docker and Docker Compose
+- Git
+- Access to deployment server (for production/dev deployments)
 
-## Contributing
+## 🛠️ Local Development
 
-Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](http://laravel.com/docs/contributions).
+### Building the Docker Image
 
-### License
+```bash
+docker build -t merchbay:dev .
+```
 
-The Laravel framework is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)
+### Running Locally
+
+```bash
+# Create .env file from example
+cp .env.example .env
+
+# Update .env with your local configuration
+# Set database credentials, mail settings, etc.
+
+# Run with docker-compose (customize docker-compose.yml for local setup)
+docker-compose up -d
+```
+
+### Environment Variables
+
+The following environment variables are required:
+
+#### Database Configuration
+- `DB_HOST` - Database host
+- `DB_PORT` - Database port (default: 3306)
+- `DB_DATABASE` - Database name
+- `DB_USERNAME` - Database username
+- `DB_PASSWORD` - Database password
+
+#### Application URLs
+- `APP_URL` - Application base URL
+- `PROD_PRIVATE` - Production private server URL
+- `IMAGES_URL` - Images server URL
+- `UPLOAD_URL` - Upload directory URL
+
+#### Mail Configuration
+- `MAIL_DRIVER` - Mail driver (smtp)
+- `MAIL_HOST` - SMTP host
+- `MAIL_PORT` - SMTP port
+- `MAIL_USERNAME` - SMTP username
+- `MAIL_PASSWORD` - SMTP password
+- `MAIL_ENCRYPTION` - Encryption type (tls/ssl)
+
+#### Third-Party Services
+- `CAPTCHA_SITE_KEY` - reCAPTCHA site key
+- `CAPTCHA_SECRET_KEY` - reCAPTCHA secret key
+- `ANALYTICS_SITE_ID` - Google Analytics site ID
+- `ANALYTICS_CLIENT_ID` - Google Analytics client ID
+- `ANALYTICS_SERVICE_EMAIL` - Google Analytics service email
+
+## 🚢 Deployment
+
+### Automated CI/CD with Gitea Actions
+
+This project includes automated deployment workflows using Gitea Actions:
+
+#### Development Deployment
+Push to the `dev` branch to automatically deploy to dev environment:
+```bash
+git push origin dev
+```
+- Deploys to: `https://dev.merchbay.app`
+
+#### Production Deployment
+Push to the `main` or `master` branch to automatically deploy to production:
+```bash
+git push origin main
+```
+- Deploys to: `https://merchbay.app`
+
+#### Docker Registry
+Create version tags to build and push to Docker registry:
+```bash
+git tag -a v1.0.0 -m "Release v1.0.0"
+git push origin v1.0.0
+```
+
+### Workflow Files
+
+- `.gitea/workflows/deploy-dev.yml` - Development deployment
+- `.gitea/workflows/deploy.yml` - Production deployment
+- `.gitea/workflows/build-push.yml` - Docker image build and push
+
+## 📁 Project Structure
+
+```
+merchbay/
+├── app/                    # Application core
+│   ├── Http/              # Controllers, middleware, routes
+│   ├── Models/            # Database models
+│   └── Services/          # Business logic services
+├── config/                # Configuration files
+├── database/              # Migrations and seeds
+├── public/                # Public assets (images, CSS, JS)
+├── resources/             # Views and frontend assets
+├── storage/               # Application storage
+├── docker-compose.yml     # Docker compose configuration
+├── Dockerfile             # Docker image definition
+└── docker-entrypoint.sh   # Container startup script
+```
+
+## 🔧 Development Notes
+
+### Storage Permissions
+
+The Docker entrypoint automatically creates and sets proper permissions for:
+- `storage/framework/views`
+- `storage/framework/cache`
+- `storage/framework/sessions`
+- `storage/logs`
+- `bootstrap/cache`
+
+### PHP Extensions
+
+The following PHP extensions are installed:
+- pdo_mysql
+- mbstring
+- exif
+- pcntl
+- bcmath
+- mcrypt (native in PHP 7.0)
+- tokenizer
+- zip
+- gd (with freetype and jpeg support)
+
+## 🐛 Troubleshooting
+
+### 500 Internal Server Error
+
+1. Check container logs: `docker logs merchbay_app`
+2. Verify storage permissions are set correctly
+3. Ensure all environment variables are configured in `.env`
+4. Check database connectivity
+
+### Storage Permission Issues
+
+The entrypoint script automatically fixes permissions on container start. If issues persist:
+```bash
+docker exec merchbay_app chown -R www-data:www-data storage bootstrap/cache
+docker exec merchbay_app chmod -R 775 storage bootstrap/cache
+```
+
+## 📄 License
+
+Proprietary - All rights reserved
+
+## 🤝 Support
+
+For support and questions, contact the development team.

resources/views/emails/orders.blade.php

@@ -540,6 +540,13 @@
                                                                                     <td><b>Price</b></td>
                                                                                     <td><b>Quantity</b></td>
                                                                                 </tr>
+                                                                            @elseif($item->FormUsed == 'number-size-form')
+                                                                                <tr>
+                                                                                    <td><b>Number</b></td>
+                                                                                    <td><b>Size</b></td>
+                                                                                    <td><b>Price</b></td>
+                                                                                    <td><b>Quantity</b></td>
+                                                                                </tr>
                                                                             @else
                                                                             @endif
                                                                             <!-- table header  -->
@@ -666,6 +673,17 @@
                                                                                             <td>{{ $sub_item->Quantity }}
                                                                                             </td>
                                                                                         </tr>
+                                                                                    @elseif($item->FormUsed == 'number-size-form')
+                                                                                        <tr>
+                                                                                            <td>{{ $sub_item->Number }}
+                                                                                            </td>
+                                                                                            <td>{{ $sub_item->Size }}
+                                                                                            </td>
+                                                                                            <td>{{ $sub_item->Price }}
+                                                                                            </td>
+                                                                                            <td>{{ $sub_item->Quantity }}
+                                                                                            </td>
+                                                                                        </tr>
                                                                                     @else
                                                                                     @endif
                                                                                 @endif

resources/views/merchbay/cart.blade.php

@@ -174,6 +174,15 @@
                                                                 <th>Quantity</th>
                                                                 <th></th>
                                                             </tr>
+                                                        @elseif($item->FormUsed == 'number-size-form')
+                                                            <tr>
+                                                                <th>Number</th>
+                                                                <th>Size</th>
+                                                                <th>Price</th>
+                                                                <th>Quantity</th>
+                                                                <th></th>
+                                                            </tr>
+                                                        
                                                         @else
                                                         @endif
 
@@ -296,6 +305,17 @@
                                                                                 href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><i
                                                                                     class="fa fa-times"></i></a></td>
                                                                     </tr>
+                                                                @elseif($item->FormUsed == 'number-size-form')
+                                                                    <tr>
+                                                                        <td>{{ $sub_item->Number }}</td>
+                                                                        <td>{{ $sub_item->Size }}</td>
+                                                                        <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}
+                                                                        </td>
+                                                                        <td>{{ $sub_item->Quantity }}</td>
+                                                                        <td><a class="btn btn-xs btn-link pull-right"
+                                                                                href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><i
+                                                                                    class="fa fa-times"></i></a></td>
+                                                                    </tr>
                                                                 @else
                                                                 @endif
                                                             @endif

resources/views/teamstore-sublayouts/forms/number-size-form.blade.php

@@ -0,0 +1,45 @@
+
+<div class="panel-design-details" id="orderListPanel">
+    <table class="table" id="tableRow" style="font-size:12px;">
+        <thead>
+            <tr>
+                <!-- <th>#</th> -->
+                {{-- <th class="col-md-5">Name</th> --}}
+                <th class="col-md-6">Number</th>
+                <th class="col-md-5">Size</th>
+                <th class="text-center"></th>
+            </tr>
+        </thead>
+        <tbody id="orderTableBody">
+            <tr class="table-tr-0">
+                {{-- <td>
+                    <input type="text" name="order_names[]" id="order_names" class="form-control input-sm inputName roster-input" placeholder="Name">
+                </td> --}}
+                <td>
+                    <select class="form-control input-sm roster-input" name="order_number[]">
+                        <option value="none">none</option>
+                        @for($i = 0; $i <= 99; $i++)
+                            <option value="{{ $i }}">{{ $i }}</option>
+                        @endfor
+                        <option value="00">00</option>
+                    </select>
+                </td>
+                <td>
+                    <select class="form-control input-sm order-size roster-input" name="order_size[]" style="border-right: 1px solid #ccc;"  data-row-number="1">
+                        @foreach($sizes_array as $size)
+                            <option value="{{ $size->Size }}">{{ $size->SizeDisplay }}</option>
+                        @endforeach
+                    </select>
+                </td>
+                <td id="action-column" class="text-center" style="padding: 4px !important; border-top: none">
+                    <span class="tr-remove-btn">
+                        <button type="button" id="addNewRow" class="btn btn-success btn-sm btn-roster-action" data-toggle="tooltip" title="Add Another"><i class="fa fa-plus" aria-hidden="true"></i></button>
+                    </span>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div id="addnew-btn-tbl-row">
+    </div>
+</div>
+                   

resources/views/user-layouts/add_item.blade.php

@@ -7,11 +7,12 @@
             margin-top:20px;
         }
     </style>
-    <div class="content-wrapper" style="min-height: 916px;">
+    <div class="content-wrapper" id="addItem" style="min-height: 916px;">
         <!-- Content Header (Page header) -->
         <section class="content-header">
             <h1>
-                Add Store Item
+                Add Store Item 
+                {{-- <p>@{{ message }}</p> --}}
             </h1>
             <ol class="breadcrumb">
                 <li><a href="{{ url('user') }}"><i class="fa fa-home"></i> Home</a></li>
@@ -92,6 +93,9 @@
                                         </div>
                                         <div class="form-group">
                                             <label>Item Form</label>
+                                            <div class="row">
+                                                <div class="col-lg-10"></div>
+                                            </div>
                                             <select class="form-control" name="itemForm">
                                                 <option value="jersey-and-shorts-form">Jersey and Shorts Form</option>
                                                 <option value="tshirt-form">T-Shirt Form</option>
@@ -102,6 +106,7 @@
                                                 <option value="name-size-form">Name and Size Form</option>
                                                 <option value="jersey-and-shorts-quantity-form">Jersey, Shorts and Quantity Form</option>
                                                 <option value="number-jersey-shorts-form">Number, Jersey and Shorts Form</option>
+                                                <option value="number-size-form">Number and Size Form</option>
                                                 <option value="roster-name-number-size-form">Roster and Size Form</option>
                                             </select>
                                         </div>

resources/views/user-layouts/buy_design.blade.php

@@ -125,7 +125,8 @@
                                                 <option value="tshirt-form">T-Shirt Form</option>
                                                 <option value="quantity-form">Quantity Form</option>
                                                 <option value="name-and-number-form">Name and Number Form</option>
-                                                <option value="name-number-size-form">Name, Number and Size Form</option>
+                                                <option value="name-and-number-form">Name and Number Form</option>
+                                                <option value="number-size-form">Number and Size Form</option>
                                                 <option value="number-form">Number Only Form</option>
                                             </select>
                                         </div>

resources/views/user-layouts/order-details-body.blade.php

@@ -114,6 +114,13 @@
                         <th>Price</th>
                         <th>Quantity</th>
                     </tr>
+                @elseif($array_item[0]->FormUsed=="number-size-form")
+                    <tr>
+                        <th>Number</th>
+                        <th>Size</th>
+                        <th>Price</th>
+                        <th>Quantity</th>
+                    </tr>
                 @else
 
                 @endif
@@ -195,6 +202,13 @@
                         <td>{{ $array_item[0]->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                         <td>{{ $array_item[0]->Quantity }}</td>
                     </tr>
+                @elseif($array_item[0]->FormUsed=="number-size-form")
+                    <tr>
+                        <td>{{ $array_item[0]->Number }}</td>
+                        <td>{{ $array_item[0]->Size }}</td>
+                        <td>{{ $array_item[0]->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
+                        <td>{{ $array_item[0]->Quantity }}</td>
+                    </tr>
                 @else
 
                 @endif

resources/views/user-layouts/order_details.blade.php

@@ -158,6 +158,14 @@
                                                                         <th>Quantity</th>
                                                                         <th></th>
                                                                     </tr>
+                                                                @elseif($item->FormUsed=="number-size-form")
+                                                                    <tr>
+                                                                        <th>Number</th>
+                                                                        <th>Size</th>
+                                                                        <th>Price</th>
+                                                                        <th>Quantity</th>
+                                                                        <th></th>
+                                                                    </tr>
                                                                 @else
 
                                                                 @endif
@@ -219,6 +227,13 @@
                                                                               <td>{{ $sub_item->Price . ' ' . $array_payment_details[0]->Currency }}</td>
                                                                               <td>{{ $sub_item->Quantity }}</td>
                                                                             </tr>
+                                                                        @elseif($item->FormUsed=="number-size-form")
+                                                                            <tr>
+                                                                              <td>{{ $sub_item->Number }}</td>
+                                                                              <td>{{ $sub_item->Size }}</td>
+                                                                              <td>{{ $sub_item->Price . ' ' . $array_payment_details[0]->Currency }}</td>
+                                                                              <td>{{ $sub_item->Quantity }}</td>
+                                                                            </tr>
                                                                         @else
 
                                                                         @endif

resources/views/user-layouts/sell_design.blade.php

@@ -127,6 +127,7 @@
                                                 <option value="name-and-number-form">Name and Number Form</option>
                                                 <option value="name-number-size-form">Name, Number and Size Form</option>
                                                 <option value="number-form">Number Only Form</option>
+                                                <option value="number-size-eform">Number and Size Form</option>
                                             </select>
                                         </div>
                                         <div class="form-group">

resources/views/user-layouts/user_template.blade.php

@@ -44,6 +44,10 @@
 	<!-- jquery-ui -->
 	<link href="{{ asset('/public/assets/css/jquery-ui.css') }}" rel="stylesheet">
 	<link href="{{asset('/public/designer/css/build.css')}}" rel="stylesheet">
+
+	
+	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
+	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 	<!--[if lt IE 9]>
@@ -2150,7 +2154,6 @@
 
 		function submitFormItemDetails() {
 			var data = $("#frm-item-details").serialize();
-			// console.log(data)
 			$.ajax({
 				type: 'POST',
 				url: "{{ url('user/store-items/update') }}",

resources/views/user-layouts/view-store-item.blade.php

@@ -1,277 +1,644 @@
 @extends('user-layouts.user_template')
 @section('content')
-<style>
-    .hide-bullets {
-        list-style: none;
-        margin-left: -40px;
-        margin-top: 20px;
-    }
-</style>
-<div class="content-wrapper" style="min-height: 916px;">
-    <!-- Content Header (Page header) -->
-    <section class="content-header">
-        <h1>
-            Store Item
-            <small>{{ $product_array[0]->ProductName }}</small>
-        </h1>
-        <ol class="breadcrumb">
-            <li><a href="{{ url('user') }}"><i class="fa fa-home"></i> Home</a></li>
-            <li><a href="{{ url('user/store-items') }}"><i class="fa fa-th"></i> Store Items</a></li>
-            <li class="active">{{ $product_array[0]->ProductName }}</li>
-        </ol>
-    </section>
-    <!-- Main content -->
-    <section class="content">
-        <div class="row">
-            <div class="col-md-7">
-                <div class="box box-primary">
-                    <div class="box-header with-border">
-                        <button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal">Re-arrange / Delete thumbnail</button>
-                        <button type="button" class="btn btn-danger pull-right" id="btn_delete_store_id" style="margin-right: 5px;" data-id="{{ $product_array[0]->Id }}">Delete this Item</button>
-                    </div>
-                    <div class="box-body custom-box-body">
-                        <div class="row">
-                            <div class="col-md-12">
-                                <div class="row">
-                                    <div class="col-md-12 text-center">
-                                        @foreach($thumbnails_array as $thumbnail)
-                                        @if($thumbnail->ImageClass == 'active')
-                                        <img style="height:400px" src="{{ config('site_config.images_url')  }}/{{ $thumbnail->Image . '?t=' . time() }}" id="main-thumbnail">
-                                        @endif
-                                        @endforeach
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col-md-12">
-                                        <ul class="hide-bullets">
-                                            <li class="col-sm-3 col-xs-4">
-                                                <a class="thumbnail btn-add-thumbnail" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px; cursor: pointer;">
-                                                    <!-- <span class="close">&times;</span> -->
-                                                    <img class="img img-responsive product-center " style="height: 65.45px;" src="{{ asset('/public/images/add-new-img.svg') }}" />
-                                                    <!-- <p class="center">Add Image</p> -->
-                                                    <p class="text-center">
-                                                        Add Image
-                                                    </p>
-                                                </a>
-                                            </li>
-                                            @foreach($thumbnails_array as $thumbnail)
-                                            <li class="col-sm-3 col-xs-4">
-                                                <a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px;">
-                                                    <!-- <span class="close">&times;</span> -->
-                                                    <img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ config('site_config.images_url')  }}/{{ $thumbnail->Image . '?t=' . time() }}" />
-                                                </a>
-                                                <div class="funkyradio">
-                                                    <div class="funkyradio-primary">
-                                                        <input type="radio" id="{{ 'radio-' .$thumbnail->Id }}" data-product-id="{{ $product_array[0]->Id }}" data-id="{{ $thumbnail->Id }}" name="setActive" @if($thumbnail->ImageClass != null) checked @endif />
-                                                        <label for="{{ 'radio-' .$thumbnail->Id }}" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">active</label>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                            @endforeach
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- <div class="col-md-5">
-                                    asdasdadadsaad
-                                </div> -->
+    <style>
+        .hide-bullets {
+            list-style: none;
+            margin-left: -40px;
+            margin-top: 20px;
+        }
+    </style>
+
+
+    <div class="content-wrapper" id="viewStoreItem" style="min-height: 916px;">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <h1>
+                @{{ title }}
+                <small>{{ $product_array[0]->ProductName }}</small>
+            </h1>
+            <ol class="breadcrumb">
+                <li><a href="{{ url('user') }}"><i class="fa fa-home"></i> Home</a></li>
+                <li><a href="{{ url('user/store-items') }}"><i class="fa fa-th"></i> Store Items</a></li>
+                <li class="active">{{ $product_array[0]->ProductName }}</li>
+            </ol>
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="row">
+                <div class="col-md-7">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <button type="button" class="btn btn-default pull-right" data-toggle="modal"
+                                data-target="#myModal">Re-arrange / Delete thumbnail</button>
+                            <button type="button" class="btn btn-danger pull-right" id="btn_delete_store_id"
+                                style="margin-right: 5px;" data-id="{{ $product_array[0]->Id }}">Delete this
+                                Item</button>
                         </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-5">
-                <div class="box box-primary">
-                    <div class="box-header with-border">
-                        <h3 class="box-title">
-                            Item Details
-                        </h3>
-                    </div>
-                    <form id="frm-item-details">
-                        <!-- <input type="hidden" name="design_code" class="form-control" value=""> -->
                         <div class="box-body custom-box-body">
                             <div class="row">
                                 <div class="col-md-12">
-                                    <input type="hidden" class="form-control" name="item_url" value="{{ $product_array[0]->ProductURL }}" placeholder="Item Name">
-                                    <div class="form-group">
-                                        <label>SKU</label>
-                                        <input type="text" class="form-control" name="sku" value="{{ $product_array[0]->ProductCode }}" placeholder="SKU">
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Item Name</label>
-                                        <input type="text" class="form-control" name="itemName" value="{{ $product_array[0]->ProductName }}" placeholder="Item Name">
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Item Desription</label>
-                                        <textarea class="form-control" name="itemDescription">{{ $product_array[0]->ProductDescription }}</textarea>
-                                    </div>
-                                    <!-- <div class="form-group">
-                                        
-                                            <div class="checkbox checkbox-inline">
-                                                <input type="checkbox" class="styled" id="sale_chk" name="sale_chk" checked >
-                                                <label for="sale_chk"> Sell Item</label>
-                                            </div>
-                                        
-                                            <div class="checkbox checkbox-inline">
-                                                <input type="checkbox" class="styled" id="publish_chk" name="publish_chk" >
-                                                <label for="publish_chk"> Publish Design</label>
-                                            </div>
-                                            
-                                        </div> -->
-                                    <div class="form-group">
-                                        <label>Item Price</label>
-                                        <input id="item_price" name="item_price" class="form-control price_format" type="text" value="{{ $product_array[0]->ProductPrice }}" data-error="#err-price" />
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Item Form</label>
-                                        <select class="form-control" name="itemForm">
-                                            <option value="jersey-and-shorts-form" @if($product_array[0]->ProductForm == "jersey-and-shorts-form") selected @endif>Jersey and Shorts Form</option>
-                                            <option value="tshirt-form" @if($product_array[0]->ProductForm == "tshirt-form") selected @endif>T-Shirt Form</option>
-                                            <option value="quantity-form" @if($product_array[0]->ProductForm == "quantity-form") selected @endif>Quantity Form</option>
-                                            <option value="name-number-form" @if($product_array[0]->ProductForm == "name-number-form") selected @endif>Name and Number Form</option>
-                                            <option value="name-number-size-form" @if($product_array[0]->ProductForm == "name-number-size-form") selected @endif>Name, Number and Size Form</option>
-                                            <option value="number-form" @if($product_array[0]->ProductForm == "number-form") selected @endif>Number Only Form</option>
-                                            <option value="name-size-form" @if($product_array[0]->ProductForm == "name-size-form") selected @endif>Name and Size Form</option>
-                                            <option value="jersey-and-shorts-quantity-form" @if($product_array[0]->ProductForm == "jersey-and-shorts-quantity-form") selected @endif>Jersey, Shorts and Quantity Form</option>
-                                            <option value="number-jersey-shorts-form" @if($product_array[0]->ProductForm == "number-jersey-shorts-form") selected @endif>Number, Jersey and Shorts Form</option>
-                                            <option value="roster-name-number-size-form" @if($product_array[0]->ProductForm == "roster-name-number-size-form") selected @endif>Roster and Size Form</option> 
-                                        </select>
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Available Size</label>
-                                        <select class="form-control select2" data-error="#err_available_size" data-placeholder="Select Size" name="available_size[]" multiple="multiple" required>
-                                            <option value="toddler" @if(in_array("toddler", $available_size)) selected @endif>Toddler</option>
-                                            <option value="youth" @if(in_array("youth", $available_size)) selected @endif>Youth</option>
-                                            <option value="adult" @if(in_array("adult", $available_size)) selected @endif>Adult</option>
-                                            <option value="mask" @if(in_array("mask", $available_size)) selected @endif>Mask</option>
-                                            <option value="gaiter" @if(in_array("gaiter", $available_size)) selected @endif>Gaiter</option>
-                                            <option value="buckethat" @if(in_array("buckethat", $available_size)) selected @endif>Buckethat</option>
-                                            <option value="none" @if(in_array("none", $available_size)) selected @endif>None</option>
-                                        </select>
-                                        <span id="err_available_size"></span>
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Item Quantity <small>(Optional)</small></label>
-                                        <input id="item_quantity" name="item_quantity" class="form-control" type="number" min="0" value="{{ $product_array[0]->ProductAvailableQty }}" data-error="#err-quantity" />
-                                    </div>
-                                    {{-- {{ var_dump($product_array[0]) }} --}}
-                                    <div class="form-group">
-                                        <label>Item Privacy</label>
-                                        <select class="form-control" name="item_privacy">
-                                            <option value="public" @if($product_array[0]->PrivacyStatus == "public") selected @endif>Public</option>
-                                            <option value="private" @if($product_array[0]->PrivacyStatus == "private") selected @endif>Private</option>
-                                        </select>
-                                    </div>
-
-                                    <div class="form-group">
-                                        <label>Select Shipping Category</label>
-                                        <select class="form-control" name="shipping_cost" required>
-                                            <option value="0">None</option>
-                                            @foreach ($shipping_cost as $sc)
-                                            <option value="{{ $sc->Id }}" @if($sc->Id == $product_array[0]->ShippingCostId) selected @endif>{{ $sc->DisplayName }}</option>
+                                    <div class="row">
+                                        <div class="col-md-12 text-center">
+                                            @foreach ($thumbnails_array as $thumbnail)
+                                                @if ($thumbnail->ImageClass == 'active')
+                                                    <img style="height:400px"
+                                                        src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image . '?t=' . time() }}"
+                                                        id="main-thumbnail">
+                                                @endif
                                             @endforeach
-                                        </select>
-                                        <span id="err_available_size"></span>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-12">
+                                            <ul class="hide-bullets">
+                                                <li class="col-sm-3 col-xs-4">
+                                                    <a class="thumbnail btn-add-thumbnail"
+                                                        style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px; cursor: pointer;">
+                                                        <!-- <span class="close">&times;</span> -->
+                                                        <img class="img img-responsive product-center "
+                                                            style="height: 65.45px;"
+                                                            src="{{ asset('/public/images/add-new-img.svg') }}" />
+                                                        <!-- <p class="center">Add Image</p> -->
+                                                        <p class="text-center">
+                                                            Add Image
+                                                        </p>
+                                                    </a>
+                                                </li>
+                                                @foreach ($thumbnails_array as $thumbnail)
+                                                    <li class="col-sm-3 col-xs-4">
+                                                        <a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}"
+                                                            style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px;">
+                                                            <!-- <span class="close">&times;</span> -->
+                                                            <img class="img img-responsive product-center image-thumbnails"
+                                                                style="height: 59.45px;"
+                                                                src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image . '?t=' . time() }}" />
+                                                        </a>
+                                                        <div class="funkyradio">
+                                                            <div class="funkyradio-primary">
+                                                                <input type="radio" id="{{ 'radio-' . $thumbnail->Id }}"
+                                                                    data-product-id="{{ $product_array[0]->Id }}"
+                                                                    data-id="{{ $thumbnail->Id }}" name="setActive"
+                                                                    @if ($thumbnail->ImageClass != null) checked @endif />
+                                                                <label for="{{ 'radio-' . $thumbnail->Id }}"
+                                                                    style="border-top-left-radius: 0px; border-top-right-radius: 0px;">active</label>
+                                                            </div>
+                                                        </div>
+                                                    </li>
+                                                @endforeach
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- <div class="col-md-5">
+                                                                    asdasdadadsaad
+                                                                </div> -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-5">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">
+                                Item Details
+                            </h3>
+                        </div>
+                        <form id="frm-item-details">
+                            <!-- <input type="hidden" name="design_code" class="form-control" value=""> -->
+                            <div class="box-body custom-box-body">
+                                <div class="row">
+                                    <div class="col-md-12">
+                                        <input type="hidden" class="form-control" name="item_url"
+                                            value="{{ $product_array[0]->ProductURL }}" placeholder="Item Name">
+                                        <div class="form-group">
+                                            <label>SKU</label>
+                                            <input type="text" class="form-control" name="sku"
+                                                value="{{ $product_array[0]->ProductCode }}" placeholder="SKU">
+                                        </div>
+                                        <div class="form-group">
+                                            <label>Item Name</label>
+                                            <input type="text" class="form-control" name="itemName"
+                                                value="{{ $product_array[0]->ProductName }}" placeholder="Item Name">
+                                        </div>
+                                        <div class="form-group">
+                                            <label>Item Desription</label>
+                                            <textarea class="form-control" name="itemDescription">{{ $product_array[0]->ProductDescription }}</textarea>
+                                        </div>
+                                        <!-- <div class="form-group">
+                                                                        
+                                                                <div class="checkbox checkbox-inline">
+                                                                    <input type="checkbox" class="styled" id="sale_chk" name="sale_chk" checked >
+                                                                    <label for="sale_chk"> Sell Item</label>
+                                                                </div>
+                                                            
+                                                                <div class="checkbox checkbox-inline">
+                                                                    <input type="checkbox" class="styled" id="publish_chk" name="publish_chk" >
+                                                                    <label for="publish_chk"> Publish Design</label>
+                                                                </div>
+                                                                
+                                                            </div> -->
+                                        <div class="form-group">
+                                            <label>Item Price</label>
+                                            <input id="item_price" name="item_price" class="form-control price_format"
+                                                type="text" value="{{ $product_array[0]->ProductPrice }}"
+                                                data-error="#err-price" />
+                                        </div>
+                                        <div class="form-group">
+                                            <label>Item Form</label>
+                                            <select class="form-control" name="itemForm" v-model="itemFormSelected"
+                                                @change="handleSelectItemForm">
+                                                <option value="jersey-and-shorts-form"
+                                                    @if ($product_array[0]->ProductForm == 'jersey-and-shorts-form') selected @endif>Jersey and Shorts
+                                                    Form</option>
+                                                <option value="tshirt-form"
+                                                    @if ($product_array[0]->ProductForm == 'tshirt-form') selected @endif>T-Shirt Form
+                                                </option>
+                                                <option value="quantity-form"
+                                                    @if ($product_array[0]->ProductForm == 'quantity-form') selected @endif>Quantity Form
+                                                </option>
+                                                <option value="name-number-form"
+                                                    @if ($product_array[0]->ProductForm == 'name-number-form') selected @endif>Name and Number
+                                                    Form</option>
+                                                <option value="name-number-size-form"
+                                                    @if ($product_array[0]->ProductForm == 'name-number-size-form') selected @endif>Name, Number and
+                                                    Size Form</option>
+                                                <option value="number-size-form"
+                                                    @if ($product_array[0]->ProductForm == 'number-size-form') selected @endif>Number and Size
+                                                    Form</option>
+                                                <option value="number-form"
+                                                    @if ($product_array[0]->ProductForm == 'number-form') selected @endif>Number Only Form
+                                                </option>
+                                                <option value="name-size-form"
+                                                    @if ($product_array[0]->ProductForm == 'name-size-form') selected @endif>Name and Size Form
+                                                </option>
+                                                <option value="jersey-and-shorts-quantity-form"
+                                                    @if ($product_array[0]->ProductForm == 'jersey-and-shorts-quantity-form') selected @endif>Jersey, Shorts
+                                                    and Quantity Form</option>
+                                                <option value="number-jersey-shorts-form"
+                                                    @if ($product_array[0]->ProductForm == 'number-jersey-shorts-form') selected @endif>Number, Jersey
+                                                    and Shorts Form</option>
+                                                <option value="roster-name-number-size-form"
+                                                    @if ($product_array[0]->ProductForm == 'roster-name-number-size-form') selected @endif>Roster and Size
+                                                    Form</option>
+                                            </select>
+                                        </div>
+
+                                        <div class="form-group d-flex"
+                                            v-if="itemFormSelected == 'roster-name-number-size-form'">
+                                            <button type="button" class="btn btn-success btn-sm"
+                                                @click="addRosterModal">
+                                                <i class="fa fa-plus"></i> Add Roster
+                                            </button>
+                                            <button type="button" class="btn btn-warning btn-sm"
+                                                @click="viewRosterModal">
+                                                <i class="fa fa-eye"></i> View Roster
+                                            </button>
+                                        </div>
+                                        <div class="form-group">
+                                            <label>Available Size</label>
+                                            <select class="form-control select2" data-error="#err_available_size"
+                                                data-placeholder="Select Size" name="available_size[]"
+                                                multiple="multiple" required>
+                                                <option value="toddler"
+                                                    @if (in_array('toddler', $available_size)) selected @endif>Toddler</option>
+                                                <option value="youth" @if (in_array('youth', $available_size)) selected @endif>
+                                                    Youth</option>
+                                                <option value="adult" @if (in_array('adult', $available_size)) selected @endif>
+                                                    Adult</option>
+                                                <option value="mask" @if (in_array('mask', $available_size)) selected @endif>
+                                                    Mask</option>
+                                                <option value="gaiter" @if (in_array('gaiter', $available_size)) selected @endif>
+                                                    Gaiter</option>
+                                                <option value="buckethat"
+                                                    @if (in_array('buckethat', $available_size)) selected @endif>Buckethat
+                                                </option>
+                                                <option value="none" @if (in_array('none', $available_size)) selected @endif>
+                                                    None</option>
+                                            </select>
+                                            <span id="err_available_size"></span>
+                                        </div>
+                                        <div class="form-group">
+                                            <label>Item Quantity <small>(Optional)</small></label>
+                                            <input id="item_quantity" name="item_quantity" class="form-control"
+                                                type="number" min="0"
+                                                value="{{ $product_array[0]->ProductAvailableQty }}"
+                                                data-error="#err-quantity" />
+                                        </div>
+                                        {{-- {{ var_dump($product_array[0]) }} --}}
+                                        <div class="form-group">
+                                            <label>Item Privacy</label>
+                                            <select class="form-control" name="item_privacy">
+                                                <option value="public" @if ($product_array[0]->PrivacyStatus == 'public') selected @endif>
+                                                    Public</option>
+                                                <option value="private"
+                                                    @if ($product_array[0]->PrivacyStatus == 'private') selected @endif>Private</option>
+                                            </select>
+                                        </div>
+
+                                        <div class="form-group">
+                                            <label>Select Shipping Category</label>
+                                            <select class="form-control" name="shipping_cost" required>
+                                                <option value="0">None</option>
+                                                @foreach ($shipping_cost as $sc)
+                                                    <option value="{{ $sc->Id }}"
+                                                        @if ($sc->Id == $product_array[0]->ShippingCostId) selected @endif>
+                                                        {{ $sc->DisplayName }}</option>
+                                                @endforeach
+                                            </select>
+                                            <span id="err_available_size"></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="box-footer">
+                                <!-- <button type="submit" class="btn btn-default">Cancel</button> -->
+                                <button type="submit" class="btn btn-primary pull-right">Save changes</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+            </div>
+        </section>
+        <!-- /.content -->
+
+        <!-- Modal -->
+        <div class="modal fade" id="myModal" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        <h4 class="modal-title">Item Images</h4>
+                    </div>
+                    <div class="modal-body">
+                        <table class="table table-bordered table-condensed">
+                            <thead>
+                                <tr>
+                                    <th></th>
+                                    <th>Image</th>
+                                    <th class="col-sm-2 text-center">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody id="sortable">
+                                @foreach ($thumbnails_array as $thumbnail)
+                                    <tr id="{{ 'item-' . $thumbnail->Id }}">
+                                        <td class="text-center" style="width: 50px"><i class="fa fa-bars"></i></td>
+                                        <td><img class="img img-responsive product-center" style="height: 59.45px;"
+                                                src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image . '?t=' . time() }}" />
+                                        </td>
+                                        <td class="text-center">
+                                            <!-- <button class="btn btn-default btn-xs btn-edit-clipart" data-id="#"><i class="fa fa-edit"></i></button> -->
+                                            <button class="btn btn-default btn-sm btn-delete-item-image"
+                                                data-id="{{ $thumbnail->Id }}" data-filename="{{ $thumbnail->Image }}"
+                                                title="Delete Image"><i class="fa fa-trash"></i></button>
+                                        </td>
+                                    </tr>
+                                @endforeach
+
+
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" id="btn_save_thumbnail_sorting">Save
+                            Changes</button>
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="modal fade" id="modal_add_thumbnail" role="dialog">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <form id="frm_add_new_images">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Add Image</h4>
+                        </div>
+                        <div class="modal-body">
+                            <div class="row grid-divider">
+                                <div class="col-sm-4">
+                                    <div class="col-padding">
+                                        <h3>Select Image(s)</h3>
+                                        <div class="form-group">
+                                            <input type="hidden" name="_id" value="{{ $product_array[0]->Id }}" />
+                                            <input type="file" class="form-control" id="upload_images"
+                                                name="upload_images[]" multiple accept="image/*" />
+                                        </div>
+                                        <div class="form-group">
+                                            <button type="button" id="clear_frm_add_new_images"
+                                                class="btn btn-default btn-block">Clear</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-sm-8">
+                                    <div class="col-padding">
+                                        <h3>Preview</h3>
+                                        <div class="col-md-12">
+                                            <ul class="hide-bullets small-preview-thumb">
+                                            </ul>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="box-footer">
-                            <!-- <button type="submit" class="btn btn-default">Cancel</button> -->
-                            <button type="submit" class="btn btn-primary pull-right">Save changes</button>
+                        <div class="modal-footer">
+                            <button type="submit" id="btn_submit_new_item_image" class="btn btn-primary">Submit</button>
+                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                         </div>
                     </form>
                 </div>
             </div>
-
         </div>
-    </section>
-    <!-- /.content -->
-</div>
 
-<!-- Modal -->
-<div class="modal fade" id="myModal" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                <h4 class="modal-title">Item Images</h4>
+        <div class="modal fade" id="modalAddRoster" role="dialog" data-backdrop="static" data-keyboard="false">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    {{-- @{{ roster }} --}}
+                    <form @submit.prevent="onRosterSubmit">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Add Roster</h4>
+                        </div>
+                        <div class="modal-body">
+                            <table class="table">
+                                <tr>
+                                    <th>#</th>
+                                    <th>Name</th>
+                                    <th>Number</th>
+                                    <th></th>
+                                </tr>
+                                <tr v-for="(item, i) in roster" :key="i">
+                                    <td style="padding: 0px 0px 0px 8px;">@{{ i + 1 }}</td>
+                                    <td style="padding: 0px 0px 0px 8px;"><input type="text" placeholder="Player Name"
+                                            v-model="roster[i]['Name']" class="form-control"></td>
+                                    <td style="padding: 0px 8px 0px 0px;"><input type="text"
+                                            placeholder="Player Number" v-model="roster[i]['Number']" maxlength="2"
+                                            class="form-control"></td>
+                                    <td style="padding: 0px 8px 0px 0px; text-align: end;">
+                                        <button type="button" @click="removeRosterRow(i)" :disabled="roster.length <= 1"
+                                            class="btn btn-danger"><i class="fa fa-times-circle-o"></i></button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td colspan="4" style="padding: 8px 8px 0px 8px; text-align: end;">
+                                        <button type="button" @click="addRosterRow" class="btn btn-primary">Add
+                                            Row</button>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="submit" class="btn btn-primary" :disabled="isSubmit">
+                                <i v-if="isSubmit" class="fa fa-spinner fa-spin"></i> Submit
+
+                            </button>
+                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        </div>
+                    </form>
+                </div>
             </div>
-            <div class="modal-body">
-                <table class="table table-bordered table-condensed">
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th>Image</th>
-                            <th class="col-sm-2 text-center">Action</th>
-                        </tr>
-                    </thead>
-                    <tbody id="sortable">
-                        @foreach($thumbnails_array as $thumbnail)
+        </div>
 
-                        <tr id="{{ 'item-' . $thumbnail->Id }}">
-                            <td class="text-center" style="width: 50px"><i class="fa fa-bars"></i></td>
-                            <td><img class="img img-responsive product-center" style="height: 59.45px;" src="{{ config('site_config.images_url')  }}/{{ $thumbnail->Image . '?t=' . time() }}" /></td>
-                            <td class="text-center">
-                                <!-- <button class="btn btn-default btn-xs btn-edit-clipart" data-id="#"><i class="fa fa-edit"></i></button> -->
-                                <button class="btn btn-default btn-sm btn-delete-item-image" data-id="{{ $thumbnail->Id }}" data-filename="{{ $thumbnail->Image }}" title="Delete Image"><i class="fa fa-trash"></i></button>
-                            </td>
-                        </tr>
-                        @endforeach
+        <div class="modal fade" id="modalViewRoster" role="dialog" data-backdrop="static" data-keyboard="false">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <form @submit.prevent="onRosterUpdate">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Roster</h4>
+                        </div>
+                        <div class="modal-body">
+                            <div style="text-align: end;">
+                                <button type="button" @click.prevent="getRoster" class="btn btn-success" :disabled="isRefresh">
+                                    <i v-if="isRefresh" class="fa fa-spinner fa-spin"></i> Refresh
+    
+                                </button>
+                            </div>
+                            <table class="table">
+                                <tr>
+                                    <th>#</th>
+                                    <th>Name</th>
+                                    <th>Number</th>
+                                    <th></th>
+                                </tr>
+                                <tr v-for="(item, i) in currentRoster" :key="i">
+                                    <td style="padding: 0px 0px 0px 8px;">@{{ i + 1 }}</td>
+                                    <td style="padding: 0px 0px 0px 8px;"><input type="text" placeholder="Player Name"
+                                            v-model="currentRoster[i]['Name']" class="form-control"></td>
+                                    <td style="padding: 0px 8px 0px 0px;"><input type="text" maxlength="2"
+                                            placeholder="Player Number" v-model="currentRoster[i]['Number']"
+                                            class="form-control"></td>
+                                    <td style="padding: 0px 8px 0px 0px; text-align: end;">
+                                        <button type="button" @click="deleteRoster(i, item)" class="btn btn-danger"><i
+                                                class="fa fa-trash-o"></i></button>
+                                    </td>
+                                </tr>
+                                {{-- <tr>
+                                    <td colspan="4" style="padding: 8px 8px 0px 8px; text-align: end;">
+                                        <button type="button" @click="addRosterRow" class="btn btn-primary">Add
+                                            Row</button>
+                                    </td>
+                                </tr> --}}
+                            </table>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="submit" class="btn btn-primary" :disabled="isSubmit">
+                                <i v-if="isSubmit" class="fa fa-spinner fa-spin"></i> Update
 
-
-                    </tbody>
-                </table>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-primary" id="btn_save_thumbnail_sorting">Save Changes</button>
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                            </button>
+                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
     </div>
-</div>
 
 
-<div class="modal fade" id="modal_add_thumbnail" role="dialog">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <form id="frm_add_new_images">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title">Add Image</h4>
-                </div>
-                <div class="modal-body">
-                    <div class="row grid-divider">
-                        <div class="col-sm-4">
-                            <div class="col-padding">
-                                <h3>Select Image(s)</h3>
-                                <div class="form-group">
-                                    <input type="hidden" name="_id" value="{{ $product_array[0]->Id }}" />
-                                    <input type="file" class="form-control" id="upload_images" name="upload_images[]" multiple accept="image/*" />
-                                </div>
-                                <div class="form-group">
-                                    <button type="button" id="clear_frm_add_new_images" class="btn btn-default btn-block">Clear</button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-sm-8">
-                            <div class="col-padding">
-                                <h3>Preview</h3>
-                                <div class="col-md-12">
-                                    <ul class="hide-bullets small-preview-thumb">
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="submit" id="btn_submit_new_item_image" class="btn btn-primary">Submit</button>
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
+
+    <script>
+        new Vue({
+            el: '#viewStoreItem',
+            data: {
+                title: "Store Item", // Passing Laravel data to Vue
+                showAddRoster: false,
+                itemFormSelected: {!! json_encode($product_array[0]->ProductForm) !!},
+                roster: [{
+                    Name: "",
+                    Number: "",
+                    ProductId: {!! json_encode($product_array[0]->Id) !!}
+                }],
+
+                currentRoster: {!! json_encode($roster) !!},
+                toBeDeletedRoster: [],
+                isSubmit: false,
+                isRefresh: false
+            },
+
+            methods: {
+                handleSelectItemForm() {
+                    console.log('Selected option:', this.itemFormSelected);
+                },
+
+                addRosterRow() {
+                    this.roster.push({
+                        Name: "",
+                        Number: "",
+                        ProductId: {!! json_encode($product_array[0]->Id) !!}
+                    })
+                },
+
+                deleteRoster(i, item) {
+                    this.currentRoster.splice(i, 1);
+                    this.toBeDeletedRoster.push(item.Id);
+                },
+
+                async onRosterUpdate() {
+                    // this.isSubmit = true;
+
+                    if (this.toBeDeletedRoster.length > 0) {
+                        this.postDeleteRoster();
+                    }
+
+                    await this.updateRoster();
+
+                    // this.isSubmit = false;
+                },
+
+                async postDeleteRoster() {
+
+                    const token = $('meta[name="csrf_token"]').attr('content')
+                    axios.post("{{ url('user/roster-delete') }}", {
+                            data: this.toBeDeletedRoster
+                        }, {
+                            headers: {
+                                "Content-Type": "application/json",
+                                'X-CSRF-TOKEN': token
+                            }
+                        })
+                        .then(response => {
+                            this.isSubmit = false;
+                            console.log(response.data);
+                            // alert("Roster is successfully saved.");
+                            // $('#modalAddRoster').modal('hide');
+                            // this.roster = [{
+                            //     Name: "",
+                            //     Number: "",
+                            //     ProductId: {!! json_encode($product_array[0]->Id) !!}
+                            // }]
+
+                        })
+                        .catch(error => {
+                            console.error(error); // Handle error
+                            this.isSubmit = false; // Hide loading indicator
+                        });
+                },
+
+                async onRosterSubmit() {
+                    this.isSubmit = true;
+                    const token = $('meta[name="csrf_token"]').attr('content')
+                    axios.post("{{ url('user/roster') }}", {
+                            data: this.roster
+                        }, {
+                            headers: {
+                                "Content-Type": "application/json",
+                                'X-CSRF-TOKEN': token
+                            }
+                        })
+                        .then(response => {
+                            this.isSubmit = false;
+                            console.log(response.data);
+
+                            const res = response.data;
+
+                            if (!res.status) {
+                                alert(res.message);
+                                return
+                            }
+
+                            alert(res.message);
+                            $('#modalAddRoster').modal('hide');
+                            this.roster = [{
+                                Name: "",
+                                Number: "",
+                                ProductId: {!! json_encode($product_array[0]->Id) !!}
+                            }]
+
+                        })
+                        .catch(error => {
+                            console.error(error); // Handle error
+                            this.isSubmit = false; // Hide loading indicator
+                        });
+                },
+
+                async updateRoster() {
+                    this.isSubmit = true;
+                    const token = $('meta[name="csrf_token"]').attr('content')
+                    axios.post("{{ url('user/roster-update') }}", {
+                            data: this.currentRoster
+                        }, {
+                            headers: {
+                                "Content-Type": "application/json",
+                                'X-CSRF-TOKEN': token
+                            }
+                        })
+                        .then(response => {
+                            this.isSubmit = false;
+                            console.log(response.data);
+                            alert("Roster is successfully updated.");
+                            $('#modalViewRoster').modal('hide');
 
 
-@endsection
+                        })
+                        .catch(error => {
+                            console.error(error); // Handle error
+                            this.isSubmit = false; // Hide loading indicator
+                        });
+                },
+
+                async getRoster() {
+                    this.isRefresh = true;
+                    const productId = {!! json_encode($product_array[0]->Id) !!}
+                    const token = $('meta[name="csrf_token"]').attr('content')
+                    axios.get("{{ url('user/roster') }}", {
+                            params: {
+                                'product-id': productId
+                            }
+                        }, {
+                            headers: {
+                                "Content-Type": "application/json",
+                                'X-CSRF-TOKEN': token
+                            }
+                        })
+                        .then(response => {
+                            this.isRefresh = false;
+                            console.log("getRoster", response)
+                            this.currentRoster = response.data;
+                        })
+                        .catch(error => {
+                            console.error(error); // Handle error
+                            this.isRefresh = false;
+                        });
+                },
+
+                removeRosterRow(i) {
+                    this.roster.splice(i, 1);
+                },
+
+                addRosterModal() {
+                    $('#modalAddRoster').modal('show');
+                },
+
+                viewRosterModal() {
+                    $('#modalViewRoster').modal('show');
+                    // this.getRoster()
+                }
+
+
+            },
+        });
+    </script>
+@endsection