@extends('layouts/contentNavbarLayout')

@section('title', 'Product Details')

@section('vendor-script')
    <script>
        window.updateUrl = "{{ route('products.update', ':id') }}";
        window.csrfToken = "{{ csrf_token() }}";
        window.statusUpdate = function(id, status) {
            const url = window.updateUrl.replace(':id', id);

            $.ajax({
                url: url,
                method: 'PUT',
                data: {
                    status: status
                },
                headers: {
                    'X-CSRF-TOKEN': window.csrfToken
                },
                beforeSend: function() {
                    showLoader();
                },
                complete: function() {
                    hideLoader();
                },
                success: function(response) {
                    // Refresh the DataTable
                    notyf.success(response.message);
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                },
                error: function(response) {
                    if (response.responseJSON && response.responseJSON.message) {
                        notyf.error(response.responseJSON.message);
                    }
                }
            });
        };
    </script>
@endsection

@section('content')
    <div class="container">
        <!-- Breadcrumb -->
        <div class="mb-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboards</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Products</li>
                </ol>
            </nav>
        </div>

        <!-- Header with Edit Button -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <a href="{{ route('products.index') }}" class="btn btn-outline-secondary me-2">
                    <i class="icon-base ti tabler-arrow-left"></i>
                </a>
                <h4 class="d-inline fw-bold">“{{ $product->name ?? '-' }}”</h4>
            </div>
            <div class="d-flex align-items-center gap-2">
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" role="switch" id="toggleStatus"
                        {{ $product->status == 'active' ? 'checked' : '' }}
                        onChange="statusUpdate({{ $product->id }}, '{{ ($product->status === 'active' ? 'inactive' : 'active') . '\'' }})" />
                </div>
                <a href="{{ route('products.edit', $product->id) }}" class="btn btn-outline-secondary">Edit Product</a>
            </div>
        </div>

        <!-- Product Details -->
        <div class="row">
            <!-- Left: Product Image -->
            <div class="col-md-6">
                <div class="card p-3 h-100">
                    <h6 class="mb-3 fw-semibold">Product Image</h6>
                    <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 300px;">
                        @if ($product->document)
                            <img src="{{ $product->document->url }}" alt="Product Image" class="img-fluid"
                                style="max-height: 100%;">
                        @else
                            <span class="text-muted">No Image</span>
                        @endif
                    </div>
                    @if ($product->document)
                        <div class="mt-2 text-muted small">Image : {{ $product->document->name ?? '' }}</div>
                    @endif
                </div>
            </div>

            <!-- Right: Product Info -->
            <div class="col-md-6">
                <div class="card p-3 h-100">
                    <h6 class="mb-3 fw-semibold">Product Information</h6>
                    <div class="table-responsive">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td class="text-muted">Product Name</td>
                                <td>{{ $product->name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Level</td>
                                <td>{{ $product->level->title ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Related Course</td>
                                <td>{{ $product->course->name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Category</td>
                                <td>
                                    <span
                                        class="badge bg-light text-dark border me-1">{{ $product->category->name ?? '-' }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">Price</td>
                                <td>${{ number_format($product->price, 2) }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Description</td>
                                <td>{!!  $product->description !!}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection