<?php
use App\Models\Category;
use Illuminate\Support\Str;
use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Storage;
?>

<section>
    <div class="flex justify-between items-center mb-6">
        <flux:heading size="xl">Categories</flux:heading>
        <flux:button wire:click="create" variant="primary" icon="plus">Add Category</flux:button>
    </div>

    <flux:table :paginate="$this->categories()">
        <flux:table.columns sticky>
            <flux:table.column sortable :sorted="$sortBy === 'name'" :direction="$sortDirection" wire:click="sort('name')">Name</flux:table.column>
            <flux:table.column>Featured</flux:table.column>
            <flux:table.column>Status</flux:table.column>
            <flux:table.column>Actions</flux:table.column>
        </flux:table.columns>

        <flux:table.rows>
            @foreach($this->categories() as $category)
                <flux:table.row :key="$category->id">
                    <!-- <flux:table.cell>{{ $category->name }}</flux:table.cell> -->
                    <flux:table.cell class="flex items-center gap-3">
                        <flux:avatar size="lg" src="{{ asset('storage/' . $category->image) }}" />
                        {{ $category->name }}
                    </flux:table.cell>
                    <flux:table.cell>
                        {!! $category->is_featured == 1 ? '<flux:badge color="lime" size="sm">Yes</flux:badge>' : 
                        '<flux:badge color="zinc" size="sm">No</flux:badge>' !!}
                    </flux:table.cell>
                    <flux:table.cell>
                        {!! $category->is_active == 1 ? '<flux:badge color="lime" size="sm">Active</flux:badge>' : 
                        '<flux:badge color="zinc" size="sm">Inactive</flux:badge>' !!}
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:button.group>
                            <flux:button wire:click="edit({{ $category->id }})" wire:loading.attr="disabled" size="sm" icon="pencil-square" />
                            <flux:button wire:click="confirmDelete({{ $category->id }})" wire:loading.attr="disabled" size="sm" variant="danger" icon="trash" />                                
                        </flux:button.group>
                    </flux:table.cell>
                </flux:table.row>
            @endforeach
        </flux:table.rows>
    </flux:table>

    <flux:modal wire:model="showModal" class="md:w-200" flyout>
        <form wire:submit="save" class="space-y-4">
            <flux:heading size="lg">{{ $editingId ? 'Edit' : 'Add' }} Category</flux:heading>
            
            <flux:input wire:model="name" label="Category Name" placeholder="e.g. Ethnic Wear" autofocus/>
            
            <flux:textarea wire:model="description" label="Category Description" placeholder="Category Description" />

            <div class="flex items-center gap-4">
                @if ($image)
                    <img src="{{ $image->temporaryUrl() }}"  class="w-16 h-16 rounded-lg object-cover">
                @elseif ($existingImage)
                    <img src="{{ asset('storage/' . $existingImage) }}" class="w-16 h-16 rounded-lg object-cover" >
                @endif
                
                <flux:input type="file" wire:model="image" />
            </div>
            <flux:error name="image" />

            <div class="grid grid-cols-2 gap-4 pt-2">
                <flux:field variant="inline">
                    <flux:label>Active Status</flux:label>
                    <flux:description>Visible on store</flux:description>
                    <flux:switch wire:model="is_active" color="green" />
                </flux:field>

                <flux:field variant="inline">
                    <flux:label>Featured</flux:label>
                    <flux:description>Show on homepage</flux:description>
                    <flux:switch wire:model="is_featured" color="indigo" />
                </flux:field>
            </div>

            <flux:separator />
            <flux:input wire:model="meta_title" label="Meta Title" placeholder="e.g. Meta Title" />
            
            <flux:textarea wire:model="meta_description" label="Meta Description" placeholder="Meta Description" />


            <div class="flex justify-end space-x-2">
                <flux:button wire:click="$set('showModal', false)">Cancel</flux:button>
                <flux:button type="submit" variant="primary">Save</flux:button>
            </div>
        </form>
    </flux:modal>

    <flux:modal wire:model="showDeleteModal" class="md:w-96">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Are you sure?</flux:heading>
                <flux:subheading>
                    Are you sure you want to delete this category?
                </flux:subheading>
            </div>

            <div class="flex space-x-2">
                <flux:spacer />
                <flux:button wire:click="$set('showDeleteModal', false)" variant="ghost">Cancel</flux:button>
                <flux:button wire:click="delete" variant="danger">Delete</flux:button>
            </div>
        </div>
    </flux:modal>
</section>