Ifrit

I have a table that as a list of roles and what I'm trying to do is when a user uploads a new position it needs to compare the differences between the new roles and the old roles.

So what I'm trying to do is get some kind of list that will give me a list of missing roles and the price that they have in the roles tabled pased on the positions ID.

For example

My roles table looks like this

    id | name          | salary | position_id
    1  | Admin         | 1234   |     1
    2  | Manager       | 1111   |     1
    3  | Sales Manager | 1111   |     1
    4  | Clerk         | 10     |     2

So when the user uploads a new role for a specific position my roles table will look like this

    id | name          | salary | position_id
    1  | Admin         | 1234   |     1
    2  | Manager       | 1111   |     1
    3  | Clerk         | 10     |     2
    4  | Admin         | 2222   |     3
    5  | Manager       | 3333   |     3
    6  | Sales Manager | 1111   |     3

And what I'm trying to do is (in this example) is grab Admin and Manager where the position is the old position EG: position_id = 1 and where the position is the new position EG: position_id = 3 and where the price is different

Here is my code

    public function changeRoles(Position $position)
    {
        $old_roles = Role::where('position_id', $position->id)->get();

        $new_position = Position::find(request('position'));
        $new_roles = Role::where('position_id', $new_position->id)->get();
        
        $old_arr = [];
        $old_salary = [];

        foreach($old_roles as $old_role)
        {
            $old_arr[] = $old_role->name;
            $old_salary[] = $old_role->salary;
        }

        $new_arr = [];
        $new_salary = [];

        foreach($new_roles as $new_role)
        {
            $new_arr[] = $new_role->name;
            $new_salary[] = $new_role->salary;
        }

        // grabing only the totals where there is a difference between the old one and new one
        $total_diff = array_diff($new_salary, $old_salary);
        
        
        // List all new and old stuff
	$newStuff = Role::whereIn('position_id', [$new_position ->id, $position_id->id])
                                ->whereColumn('salary', '!=' ,'salary')
                                ->get();

    }

how would you do that?

I'm trying to get homestead to work on my windows 10 machine, but I'm getting this error

Bringing machine 'homestead' up with 'virtualbox' provider...
==> homestead: Checking if box 'laravel/homestead' version '9.5.1' is up to date...
==> homestead: A newer version of the box 'laravel/homestead' is available and already
==> homestead: installed, but your Vagrant machine is running against
==> homestead: version '9.5.1'. To update to version '9.7.2',
==> homestead: destroy and recreate your machine.
==> homestead: Clearing any previously set forwarded ports...
==> homestead: Clearing any previously set network interfaces...
==> homestead: Preparing network interfaces based on configuration...
    homestead: Adapter 1: nat
    homestead: Adapter 2: hostonly
==> homestead: Forwarding ports...
    homestead: 80 (guest) => 8000 (host) (adapter 1)
    homestead: 443 (guest) => 44300 (host) (adapter 1)
    homestead: 3306 (guest) => 33060 (host) (adapter 1)
    homestead: 4040 (guest) => 4040 (host) (adapter 1)
    homestead: 5432 (guest) => 54320 (host) (adapter 1)
    homestead: 8025 (guest) => 8025 (host) (adapter 1)
    homestead: 9600 (guest) => 9600 (host) (adapter 1)
    homestead: 27017 (guest) => 27017 (host) (adapter 1)
    homestead: 22 (guest) => 2222 (host) (adapter 1)
==> homestead: Running 'pre-boot' VM customizations...
==> homestead: Booting VM...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["startvm", "33155129-8efb-4194-a2e3-394aa799b6ab", "--type", "headless"]

Stderr: VBoxManage.exe: error: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Adapter #2' (VERR_INTNET_FLT_IF_NOT_FOUND).
VBoxManage.exe: error: Failed to attach the network LUN (VERR_INTNET_FLT_IF_NOT_FOUND)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component ConsoleWrap, interface IConsole

It looped through the foreach loops and was comparing it so I had a huge array. It was the same as what I ended up getting with my original code

but wouldn't the same thing happen with it looping all the time and having it compare to all the values?

I'm trying to compare 2 arrays, but the problem is that it's looping so many times that it isn't working correctly Here is my code

public function bulkUploadProducts(Category $category)
{
    $oldProducts = Product::where('category_id', $category->id)->get();
    $newProducts = Product::where('category_id', request('category_id'))->get();

    $oldPrices = [];
    foreach($oldProducts as $oldProduct)
    {
        $oldPrices[] = [
            'excluding' => $oldProduct->excluding,
            'including' => $oldProduct->including
        ];
    }

    $newPrices = [];
    foreach($newProducts as $newProduct)
    {
        $newPrices[] = [
            'excluding' => $newProduct->excluding,
            'including' => $newProduct->including
        ];
    }

    $diff = [];
    foreach($oldPrices as $oldPrice)
    {
        foreach($newPrices as $newPrice)
        {
            if($oldPrice['excluding'] == $newPrice['excluding'])
            {

            }else{
                $diff[] = [
                    'excluding' => $newPrice['excluding']
                ];
            }
        }
    }

    dd($diff);
}

What I need is for it to only give me the new prices where there is a difference.

For example if the old price is 123 and the new price is 234 then I need $diff to be 234, but if the old price is 123 and the new price is 123 then nothing is supposed to happen

I'm trying to send some data through to a blade file but I'm not getting anything, it is just returning to the page without displaying the message.

Here is my controller code

public function missingProducts(Category $category)
{
    $oldProducts = Product::where('category', $category->id)->get();
    $newProducts = Product::where('category', request('category'))->get();

    $oldArr = [];
    foreach($oldProducts as $oldProduct)
    {
        $oldArr[] = $oldProduct->name;
    }

    $newArr = [];
    foreach($newProducts as $newProduct)
    {
        $newArr[] = $newProduct->name;
    }

    $missingProducts = array_diff($oldArr, $newArr);

    if(!empty($missingProducts))
    {
        return redirect()->route('admin.category', ['category' => $category->id])
                                ->with(['missingProducts' => $missingProducts]);
    }else{
        dd('there is NO products missing');
    }
}

My blade file

@if(!empty($missingProducts))
    <div class="alert alert-success">
        We are missing products
    </div>
@endif

I'm trying to update my product but I'm getting this error

"message": "No query results for model [Modules\Products\Models\Product] 488"

Here is my vue file

<template>
    <div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label>Name</label>
                    <input
                        type="text"
                        class="form-control"
                        v-model="product.name"
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['product'],
        computed: {
      
        },
        data() {
            return {

            }
        },
        methods: {
            updateProduct() {
                axios.put(`/api/products/${this.product.id}`,{
                    name: this.product.name
                }).then(response => {
            },
        },
        mounted() {

        }
    }
</script>

and my updateProduct function in my controller

public function updateProduct(Product $product)
{
    dd(request('name'));
}

I have a bunch of textboxes that I would like to change to red when a user has made a change to it, the problem I'm having is that all the textboxes goes red and not the one that was changed.

Here is my code

<template>
    <div class="row">
        <div class="col-sm-12">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th style="width:70px;">Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="product in products">
                        <td>
                            <input
                                class="form-control"
                                type="number"
                                v-model="product.name"
                                @change="onChange();"
                                :style="{ color: conditionalColor}"
                            >
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        props: [],
        data() {
            return {
                change: false
            }
        },
        computed: {
            conditionalColor(){
                return this.change ? 'red' : ''
            }
        },
        methods: {
            onChange(){
                return this.change = true;
            }
        },
        mounted() {

        }
    }
</script>

yes I am

I'm still getting \n. Do you think that it might be because I'm trying to export it to an excel file? and that is why it isn't working?

I'm still getting the \n

yep.

example string

This is an\nexample string

expected result

This is an example string

I have a query that looks like this

$query = DB::select(
    "
         SELECT
            p.id,
            p.name,
            regexp_replace('/\s\s+/', ' ', p.description) as description,
        FROM public.products p
        ORDER BY sort ASC
    "
)

but when I run it my output has replaced my description with /\s\s+/. What I need is for my query to replace /n with a space

I'm trying to create a pagination, the problem is, is that when I try to create the pagination I get this error

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
http://laravel-site.test/livewire/message/category.show?page=2

I'm using laravel and livewire.

This is my code

    <?php

    namespace App\Http\Livewire\Categories;

    use Illuminate\Pagination\Paginator;
    use Livewire\Component;

    class Show extends Component
    {
        public $category;

        public function render()
        {
            $products = $this->category->products->paginate(10);

            return view('livewire.categories.show', ['category' => $this->category, 'products' => $products]);
        }
    }

and this is my blade file

    <table class="min-w-full divide-y divide-gray-200">
        <tbody>
            @foreach($products as $product)
                <tr>
                    <td>
                        {{ $product->name }}
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div>
        {{ $products->links() }}
    </div>

This is in my Category model

    public function products()
    {
        return $this->hasMany(Product::class);
    }

I'm using spatie/laravel-permission and when I add my permission to my api route, I'm getting

message: "This action is unauthorized.

but my user does have permission

My route

Route::get('/cutomer/items', [ CustomerController::class, 'getItems'])->middleware('can:customer');

I'm trying to do an event and listener using jetstream and inertia. So what I'm trying to do is in my AppLayout.vue I would like to pass some data to a component.

I have a standard AppLayout, so I've only added what I've done

<template>
    <div>
        <div class="hidden sm:flex sm:items-center">
            <div class="ml-3 relative">
                <select id="customer-selection" class="form-control" style="padding-right: 41px;" v-model="selectedCustomer" v-on:change="changedCustomer">
                    <option v-for="customer in customers" :value="customer.id">
                        {{ customer.name }}
                    </option>
                </select>
            </div>
        </div>
    </div>
</template>

<script>
    import JetApplicationMark from '@/Jetstream/ApplicationMark'
    import JetBanner from '@/Jetstream/Banner'
    import JetDropdown from '@/Jetstream/Dropdown'
    import JetDropdownLink from '@/Jetstream/DropdownLink'
    import JetNavLink from '@/Jetstream/NavLink'
    import JetResponsiveNavLink from '@/Jetstream/ResponsiveNavLink'

    import { Inertia } from '@inertiajs/inertia'

    export default {
        components: {
            JetApplicationMark,
            JetBanner,
            JetDropdown,
            JetDropdownLink,
            JetNavLink,
            JetResponsiveNavLink,
        },

        data() {
            return {
                showingNavigationDropdown: false,
                customers: [],
                selectedCustomer: ''
            }
        },

        methods: {
            getCustomers(){
                axios.get('/api/portal/customers').then(response => {
                    this.customers = response.data.data
                })
            },
            changedCustomer(){
                Inertia.on('selectedCustomerEvent', (event) => {
                    console.log('this is the selectedCustomerEvent');
                });
            }
        },
        mounted() {
            this.getCustomers();
        }
    }
</script>

I'm using Metrics Graphics to make a graph. The problem I'm having is that, I'm not able to remove the black colored area and only display the line and I'm not able to change the color.

This is what my graph looks like

graph image

and here is my code

MG.data_graphic({
                title: "Downloads",
                description: "This graphic shows a time-series of downloads.",
                data: [
                    {'date':new Date('2014-11-01'),'value':12},
                    {'date':new Date('2014-11-02'),'value':18},
                    {'date':new Date('2014-11-03'),'value':30},
                    {'date':new Date('2014-11-04'),'value':40},
                    {'date':new Date('2014-11-05'),'value':10},
                    {'date':new Date('2014-11-06'),'value':60},
                    {'date':new Date('2014-11-07'),'value':5},
                ],
                top: 70,
                width: 1200,
                height: 240,
                right: 40,
                target: '#chart',
                x_accessor: 'date',
                y_accessor: 'value',
                brush: 'x',
                chart_type: 'line',
                area: false,
                color: ['date', '#CCFFFF']
                // legend: ['Line 1'],
                // missing_is_hidden: true
            })

Thanks for helping guys. Like what @sergiu17 said I had to update my Node and then in order to remove the other error that I got, I had to restart my computer

I tried to update node and now I'm getting this

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'semver'
Require stack:
- /usr/share/npm/lib/utils/unsupported.js
- /usr/share/npm/bin/npm-cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/usr/share/npm/lib/utils/unsupported.js:2:14)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/share/npm/lib/utils/unsupported.js',
    '/usr/share/npm/bin/npm-cli.js'
  ]
}

How would I update node if I have a linux system

I have a fresh installation of laravel and I've installed npm. but when I run npm run dev I get this error

[webpack-cli] /home/storm/Documents/projects/laravel-jetstream/node_modules/laravel-mix/src/Log.js:5
    static testing = false;
                   ^

SyntaxError: Unexpected token =
    at new Script (vm.js:83:7)
    at NativeCompileCache._moduleCompile (/home/storm/Documents/projects/laravel-jetstream/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
    at Module._compile (/home/storm/Documents/projects/laravel-jetstream/node_modules/v8-compile-cache/v8-compile-cache.js:184:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (/home/storm/Documents/projects/laravel-jetstream/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/storm/Documents/projects/laravel-jetstream/node_modules/laravel-mix/src/webpackPlugins/CustomTasksPlugin.js:1:73)

Unfortunately that wasn't it. I fixed that up but still got the above error

I'm trying to get metrics graphics to work with my vue. I do have a question up on laracast for how to get it to work, but I think this is a different issue so I created a new issue for it.

I'm getting this error

TypeError: metrics_graphics__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function

This is what my code looks like

<template>
    <div>
        <div id="chart"></div>
    </div>
</template>

<script>
    import LineChart from 'metrics-graphics'

    export default {
        components: {
            LineChart
        },
        data(){
            return {

            }
        },
        methods: {
            chartTest(){
                let data = [
                    {
                        year: '1945,
                        sightings: 6
                    },
                    {
                        year: '1946',
                        sightings: 8
                    }
                ];

                new LineChart({
                    data,
                    width: 600,
                    height: 200,
                    target: '#chart',
                    area: true,
                    xAccessor: 'date',
                    yAccessor: 'value
                })
            }
        },
        mounted(){
            this.chartTest()
        }
    }
</script>

I'm trying to get this to work with my vue, https://github.com/metricsgraphics/metrics-graphics. The problem I'm having is being able to import it to use it in my vue.

I'm trying to find out if my old products is an exact match to my new products. For example I have a laravel collection of 5 old products and another collection of 5 new products and what I need to know is if the 5 old products matches the 5 new products if they do the success if not it fails, also if the new products has more then the old products, but the old products still matches the new products then it's a success as well

Here is my code

    public function changeProducts(Category $category)
    {
        $old_category = $category;
        $old_products = Product::where('category_id', $old_category->id)->get();

        $new_category = Category::find(request('category'));
        $new_products = Product::where('category_id', $new_category->id)->get();

        $diff = $old_products->diff($new_products);
        dd($diff);
    }

I've got inertia installed and working. What I would like to know is if there is a way to tell inertia to use a different app.blade.php.

So what I mean is instead of having the resources/views/app.blade.php I would like for it to be resources/views/layouts/app.blade.php

It's laravel 8 and I followed these steps https://inertiajs.com/server-side-setup and https://inertiajs.com/client-side-setup

I installed laravel and I'm trying to use inertia with it, but when after installing it and almost getting it to work, I'm now getting this error in my console

[Vue warn]: Error in render: "SyntaxError: Unexpected token u in JSON at position 0"

This is my app.js file

require('./bootstrap');

require('moment');

import Vue from 'vue';

import { InertiaApp } from '@inertiajs/inertia-vue';

Vue.use(InertiaApp);

const app = document.getElementById('app');

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

I need to try and find out why my livewire app isn't working, so I was wondering if there was a way to do that. I know with normal requests I could look at the Network tab and use vue or console for vue apps, but I don't know about for livewire

I'm trying to grab all my items that was created today, the issue I'm having is that I'm still getting yesterday's items. Here is my code

$items = Item::where('created_at', '>=', Carbon::today())->paginate(10);

I'm still getting a 0

I'm trying create a command that counts of all my items based on today's date but I want to grab the hour. So I want my code to check and get me all my items where it's todays date but by hour

So for example if my item is 2020-11-05 12:01:56 then I want it to look for 12

Here is my code

$items = Item::whereDate('created_at', Carbon::now()->hour)->get()->count();

What I'm getting is 0 instead of 5 items

I want to get all posts from the last 30 days, the problem I have is that there is posts with date from now and with in 30 days but I'm getting nothing in my dd()

	$today = Carbon::now();
	$lastDay = Carbon::now()->subDays(30);	

	$posts = Post::whereBetween('created_at', [$today, $lastDay])->get();

	dd($posts);

I'm using barryvdh to generate pdfs, what I would like to know is what would cause it to timeout? When I check my logs I have this error

    local.ERROR: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes)

and when I check my memory_limit in my php.ini it's set to -1, which apparently means there is no limit.

I also don't think it's the code, because I use the same code to generate a pdf and I get the pdf with no problem.

I was wondering if it isn't something weird like when you generate a csv you have to make sure that there is no , if you want a string to be in one cell (hope that made sense) or like you mustn't have an = at the start of you string when generating an excel file.

But I don't know much about generating pdfs so I'm not quite sure as to what it could be.

I'm trying to get a report from google I'm hoping that I'm close, but I'm stuck on this error.

(search) unknown parameter: 'activityTime'

I'm using these documents to try and get what I need. https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/service-php https://developers.google.com/analytics/devguides/reporting/core/v4/rest/v4/userActivity/search

What I'm trying to do is get a report that will have these values in it

 "activityTime": string,
  "source": string,
  "medium": string,
  "channelGrouping": string,
  "campaign": string,
  "keyword": string,
  "hostname": string,
  "landingPagePath": string,
  "activityType": enum(ActivityType),
  "customDimension": [
    {
      object(CustomDimension)
    }
  ],

Here is the code I have so far

<?php

namespace App\Http\Controllers;

use Carbon\Carbon;
use Google_Service_AnalyticsReporting;
use Google_Service_AnalyticsReporting_DateRange;
use Google_Service_AnalyticsReporting_GetReportsRequest;
use Google_Service_AnalyticsReporting_Metric;
use Google_Service_AnalyticsReporting_ReportRequest;
use Google_Service_AnalyticsReporting_SearchUserActivityRequest;

use Illuminate\Support\Facades\Http;

use Google\Client;


class GAReportController extends Controller
{

  public function index()
  {
      $viewId = env('ANALYTICS_VIEW_ID');
      
      $client = new Client();
      $client->setAuthConfig(storage_path('test-api.json'));
      $client->addScope(\Google_Service_Analytics::ANALYTICS_READONLY);

      $analytics = new Google_Service_AnalyticsReporting($client);

      $userActivityRequest = new Google_Service_AnalyticsReporting_SearchUserActivityRequest();

      $param = [
          'activityTime' => now()
      ];

      dd($analytics->userActivity->search($userActivityRequest, $param));

  }
}

Thank you so much that was it.

I'm not sure if I'm just missing something really obvious but I'm trying to pass an array to my blade so that I can use it to make a chart, but I'm getting this error

Array to string conversion

Here is my code

My Post.php

$posts = Post::selectRaw('status, date(created_at), hour(created_at), count(*) as total')->groupByRaw('status, date(created_at), hour(created_at)')->get();

$approved = [];
$rejected = [];

foreach($posts as $post)
{
    if($post->status == 'approved')
    {
        $approved[] = $post->total;
    }

    if($post->status == 'rejected')
    {
        $rejected[] = $post->total;
    }
}

return view('dashboard::livewire.dashboard', ['approved' => $approved, 'rejected' => $rejected]);

my dashboard.blade.php

<div>
	<canvas id="myChart" width="400" height="200"></canvas>
</div>

<script>
	 var ctx = document.getElementById('myChart');

	 var dataPack1 = {!! $approved !!};

	 var status = ["approved", "rejected"];

	 var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: status,
            datasets: [
                {
                    label: 'approved',
                    data: dataPack1,
                    backgroundColor: '#296DFE',
                    hoverBackgroundColor: '#6B8CFF',
                    hoverBorderWidth: 0
                }
            ]
        },
        options: {
            animation: {
                duration: 10,
            },
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label;
                    }
                }
            },
            scales: {
                xAxes: [{
                    stacked: true,
                    gridLines: { display: false },
                }],
                yAxes: [{
                    stacked: true,
                }],
            },
            legend: {display: true}
        }
    });

</script>	

Yes that worked. Thank you so much. I didn't know you could do hour(created_at)

sorry yes. I need to know how many posts was made in that hour

I've got some posts that I'm trying group based on the hour they were created. For example I have 4 posts: post 1 was created at 2020-10-21 08:38:08 post 2 was created at 2020-10-21 08:55:08 post 3 was created at 2020-10-21 09:38:08 post 4 was created at 2020-10-21 22:38:08

and I would like to group post 1 and 2 together because they are both in the 8am hour.

So far I've only done this

$posts = Post::select('created_at')->groupBy('created_at')->get();

I'm trying to create a dynamic active css class using livewire. I would like to use only one $active instead of a bunch active css classes.

Here is my code

<?php

namespace Modules\Products\Http\Livewire;

use Livewire\Component;

class SingleProduct extends Component
{
    public $product;
    public $showProductDetail = true;
    public $showCategory = false;
    public $active1 = '-mb-px border-l border-t border-r rounded-t';
    public $active2 = '';

    protected $listeners = [
        'productDetail' => 'productDetail',
        'categoryList' => 'categoryList',
    ];

    public function render()
    {
        return view('products::livewire.product-views', ['product' => $this->product]);
    }

    public function productDetail()
    {
        $this->showProductDetail = true;
        $this->showCategory = false;
        
        $this->active1 = '-mb-px border-l border-t border-r rounded-t';
        $this->active2 = '';
    }

    public function categoryList()
    {
        $this->showProductDetail = false;
        $this->showCategory = true;
        
        $this->active1 = '';
        $this->active2 = '-mb-px border-l border-t border-r rounded-t';
    }
}

My product-views.blade.php

<div>
    <ul class="flex border-b">
        <li class="mr-1">
            <a wire:click="$emit('productDetail')" class="{{ $active1 }} bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold" href="#">
                Product Detail
            </a>
        </li>
        <li class="mr-1">
            <a wire:click="$emit('showCategory')" class="{{ $active2 }} bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold" href="#">
                Category List
            </a>
        </li>
    </ul>

    @if($showProductDetail)
        <div id="tab_1_info">
            <div class="bg-white shadow overflow-hidden">
                <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        Product Detail
                    </h3>
                </div>

                <div>
                    <dl>
                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm leading-5 font-medium text-gray-500">
                                Name
                            </dt>
                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                                {{ $product->name }}
                            </dd>
                        </div>

                        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm leading-5 font-medium text-gray-500">
                                Description
                            </dt>
                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                                {{ $product->description }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    @endif

    @if($showCategory)
        <div id="tab_2_info">
            <div class="bg-white shadow overflow-hidden">
                <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        Categories
                    </h3>
                </div>

                <div>
                    <dl>
                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm leading-5 font-medium text-gray-500">
                                Category Name
                            </dt>
                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                                {{ $category->name }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    @endif
</div>