@extends('Admin.layout')

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <style>
        .dt-search {
            display: none;
        }

        .product-image {
            width: 55px;
            height: 55px;
            object-fit: cover;
            border-radius: 7px;
            border: 1px solid #ddd;
        }

        .category-image {
            width: 45px;
            height: 45px;
            object-fit: cover;
            border-radius: 7px;
            border: 1px solid #ddd;
        }
    </style>

    {{-- Page Header --}}
    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">
            <div class="d-flex align-items-center gap-3">

                <a href="{{ route('category') }}" class="btn btn-outline-secondary">
                    <i class="ti tabler-arrow-left me-1"></i>
                    Back
                </a>

                <div>
                    <h5 class="mb-1">
                        <i class="ti tabler-package me-2"></i>
                        {{ $category->category }} Products
                    </h5>

                    <small class="text-muted">
                        Products available under
                        {{ $category->category }}
                    </small>
                </div>

            </div>
        </div>

        <div class="col-auto">
            <span class="badge bg-primary px-3 py-2">
                Total Products: {{ $products->count() }}
            </span>
        </div>

    </div>

    {{-- Category Details --}}
    <div class="card mb-3">
        <div class="card-body">

            <div class="d-flex align-items-center gap-3">

                @php
                    $categoryImage = null;

                    if (!empty($category->image)) {
                        if (
                            str_starts_with($category->image, 'http://') ||
                            str_starts_with($category->image, 'https://')
                        ) {
                            $categoryImage = $category->image;
                        } else {
                            $categoryImage = asset(
                                'storage/' . $category->image
                            );
                        }
                    }
                @endphp

                @if($categoryImage)
                    <img src="{{ $categoryImage }}" alt="{{ $category->category }}" class="category-image">
                @else
                    <div class="category-image d-flex align-items-center justify-content-center bg-light">
                        <i class="ti tabler-category"></i>
                    </div>
                @endif

                <div>
                    <h6 class="mb-1">
                        {{ $category->category }}
                    </h6>

                    <small class="text-muted">
                        Category ID: {{ $category->id }}
                    </small>
                </div>

            </div>

        </div>
    </div>

    {{-- Product Table --}}
    <div class="card p-0">

        <div class="row mb-3 align-items-center p-3 g-2">

            <div class="col-md-2">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

            <div class="col-md-4 ms-auto">
                <input type="text" id="searchInput" class="form-control" placeholder="Search product name, ID or code">
            </div>

        </div>

        <div class="table-responsive pt-0 pb-2">

            <table class="table table-hover align-middle" id="productsTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Image</th>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Weight Machine ID</th>
                        <th>Unit</th>
                        <th>MRP</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody>

                    @forelse($products as $product)

                                    @php
                                        $productImage = null;

                                        $images = $product->images;

                                        /*
                                        |--------------------------------------------------------------------------
                                        | Handle cast array, JSON and normal string
                                        |--------------------------------------------------------------------------
                                        */

                                        if (is_array($images) && !empty($images)) {
                                            $productImage = $images[0] ?? null;
                                        } elseif (is_string($images)) {
                                            $decodedImages = json_decode(
                                                $images,
                                                true
                                            );

                                            if (
                                                json_last_error() === JSON_ERROR_NONE &&
                                                is_array($decodedImages)
                                            ) {
                                                $productImage = $decodedImages[0] ?? null;
                                            } elseif (!empty($images)) {
                                                $productImage = $images;
                                            }
                                        }

                                        /*
                                        |--------------------------------------------------------------------------
                                        | Build complete image URL
                                        |--------------------------------------------------------------------------
                                        */

                                        if (!empty($productImage)) {
                                            if (
                                                !str_starts_with($productImage, 'http://') &&
                                                !str_starts_with($productImage, 'https://')
                                            ) {
                                                $productImage = asset(
                                                    'storage/' . ltrim(
                                                        $productImage,
                                                        '/'
                                                    )
                                                );
                                            }
                                        }
                                    @endphp

                                    <tr>
                                        <td>{{ $loop->iteration }}</td>

                                        <td>
                                            @if($productImage)
                                                <img src="{{ $productImage }}" alt="{{ $product->product_name }}" class="product-image">
                                            @else
                                                <span class="text-muted">
                                                    No Image
                                                </span>
                                            @endif
                                        </td>

                                        <td>
                                            {{ $product->product_id ?? $product->id }}
                                        </td>

                                        <td>
                                            <span class="fw-semibold">
                                                {{ $product->product_name }}
                                            </span>
                                        </td>

                                        <td>
                                            {{ $product->weight_machine_id ?? '-' }}
                                        </td>

                                        <td>
                                            @if(!empty($product->unit_value))
                                                {{ $product->unit_value }}
                                            @endif

                                            {{ $product->unit ?? '-' }}
                                        </td>

                                        <td>
                                            ₹{{ number_format(
                            (float) ($product->mrp ?? 0),
                            2
                        ) }}
                                        </td>

                                        <td>
                                            ₹{{ number_format(
                            (float) ($product->price ?? 0),
                            2
                        ) }}
                                        </td>

                                        <td>
                                            @if((float) $product->stock <= 0)
                                                <span class="badge bg-danger">
                                                    {{ $product->stock ?? 0 }}
                                                </span>
                                            @elseif((float) $product->stock <= 5)
                                                <span class="badge bg-warning">
                                                    {{ $product->stock }}
                                                </span>
                                            @else
                                                <span class="badge bg-success">
                                                    {{ $product->stock }}
                                                </span>
                                            @endif
                                        </td>

                                        <td>
                                            @if((bool) $product->is_active)
                                                <span class="badge bg-success">
                                                    Active
                                                </span>
                                            @else
                                                <span class="badge bg-secondary">
                                                    Inactive
                                                </span>
                                            @endif
                                        </td>
                                    </tr>

                    @empty

                        <tr>
                            <td colspan="10" class="text-center py-4 text-muted">
                                <i class="ti tabler-package-off fs-2 d-block mb-2"></i>

                                No products found under this category.
                            </td>
                        </tr>

                    @endforelse

                </tbody>
            </table>

        </div>
    </div>

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

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {

            @if($products->count() > 0)

                const table = $('#productsTable').DataTable({
                    pageLength: 10,
                    searching: true,
                    ordering: true,
                    lengthChange: false,
                    order: [],
                    columnDefs: [
                        {
                            targets: [0, 1],
                            orderable: false,
                            searchable: false
                        }
                    ]
                });

                $('#pageLength').on('change', function () {
                    table.page
                        .len($(this).val())
                        .draw();
                });

                $('#searchInput').on('keyup', function () {
                    table.search(this.value).draw();
                });

            @endif

                            });
    </script>

@endsection