@extends('layouts.admin-simple')

@section('title', $product->name)
@section('page-title', $product->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
@endsection

@section('page-actions')
    <div class="ml-auto">
        <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-primary">
            <i class="material-icons">edit</i> Edit Product
        </a>
    </div>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-8">
        <!-- Product Details -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Product Details</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        @if($product->image)
                            <img src="{{ asset('storage/' . $product->image) }}" 
                                 alt="{{ $product->name }}" 
                                 class="img-fluid rounded">
                        @else
                            <div class="bg-light d-flex align-items-center justify-content-center rounded" style="height: 200px;">
                                <i class="material-icons text-muted" style="font-size: 64px;">inventory</i>
                            </div>
                        @endif
                        
                        @if($product->images && count($product->images) > 0)
                            <div class="row mt-2">
                                @foreach($product->images as $image)
                                    <div class="col-4">
                                        <img src="{{ asset('storage/' . $image) }}" 
                                             alt="{{ $product->name }}" 
                                             class="img-thumbnail">
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <div class="col-md-8">
                        <h4>{{ $product->name }}</h4>
                        <p class="text-muted">{{ $product->description ?: 'No description provided.' }}</p>
                        
                        @if($product->features)
                            <div class="mb-3">
                                <strong>Key Features:</strong>
                                <p>{{ $product->features }}</p>
                            </div>
                        @endif
                        
                        <div class="row">
                            <div class="col-sm-6">
                                <strong>Slug:</strong> <code>{{ $product->slug }}</code>
                            </div>
                            <div class="col-sm-6">
                                <strong>Sort Order:</strong> {{ $product->sort_order }}
                            </div>
                            <div class="col-sm-6 mt-2">
                                <strong>Thickness Range:</strong> 
                                @if($product->thickness_range)
                                    {{ $product->thickness_range }}
                                @else
                                    <span class="text-muted">Not specified</span>
                                @endif
                            </div>
                            <div class="col-sm-6 mt-2">
                                <strong>Status:</strong> 
                                @if($product->is_active)
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-secondary">Inactive</span>
                                @endif
                                @if($product->is_featured)
                                    <span class="badge badge-warning ml-1">Featured</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Specifications -->
        <div class="card mt-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Specifications ({{ $product->specifications->count() }})</h4>
                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addSpecModal">
                    <i class="material-icons">add</i> Add Specification
                </button>
            </div>
            <div class="card-body">
                @if($product->specifications->count() > 0)
                    @foreach($product->specifications->groupBy('spec_type') as $type => $specs)
                        <h6 class="text-uppercase text-muted">{{ $type }}</h6>
                        <table class="table table-sm mb-4">
                            <tbody>
                                @foreach($specs->sortBy('sort_order') as $spec)
                                <tr>
                                    <td width="40%"><strong>{{ $spec->name }}</strong></td>
                                    <td>{{ $spec->formatted_value }}</td>
                                    <td width="100" class="text-right">
                                        <button class="btn btn-sm btn-outline-danger" 
                                                onclick="if(confirm('Delete this specification?')) document.getElementById('delete-spec-{{ $spec->id }}').submit();">
                                            <i class="material-icons">delete</i>
                                        </button>
                                        <form id="delete-spec-{{ $spec->id }}" 
                                              action="{{ route('admin.product-specifications.destroy', $spec) }}" 
                                              method="POST" class="d-none">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endforeach
                @else
                    <div class="text-center py-4">
                        <i class="material-icons text-muted" style="font-size: 48px;">list</i>
                        <h6 class="mt-2">No Specifications</h6>
                        <p class="text-muted">Add technical specifications for this product.</p>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addSpecModal">
                            <i class="material-icons">add</i> Add First Specification
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <!-- Technical Specifications Table -->
        <div class="card mt-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Technical Specifications Table ({{ $product->technicalSpecifications->count() }})</h4>
                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addTechSpecModal">
                    <i class="material-icons">add</i> Add Technical Spec
                </button>
            </div>
            <div class="card-body">
                @if($product->technicalSpecifications->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead class="bg-primary text-white">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Standard</th>
                                    <th>Thickness</th>
                                    <th>Length</th>
                                    <th>Width</th>
                                    <th>File</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($product->technicalSpecifications as $spec)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $spec->name }}</td>
                                    <td>{{ $spec->standard }}</td>
                                    <td>{{ $spec->thickness }}</td>
                                    <td>{{ $spec->length }}</td>
                                    <td>{{ $spec->width }}</td>
                                    <td>
                                        @if($spec->file_path)
                                            <a href="{{ $spec->file_url }}" target="_blank" class="btn btn-sm btn-outline-info">
                                                <i class="material-icons">download</i>
                                                {{ $spec->display_file_name }}
                                            </a>
                                        @else
                                            <span class="text-muted">No file</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="editTechSpec({{ $spec->id }})">
                                            <i class="material-icons">edit</i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" 
                                                onclick="if(confirm('Delete this technical specification?')) document.getElementById('delete-tech-spec-{{ $spec->id }}').submit();">
                                            <i class="material-icons">delete</i>
                                        </button>
                                        <form id="delete-tech-spec-{{ $spec->id }}" 
                                              action="{{ route('admin.technical-specifications.destroy', $spec) }}" 
                                              method="POST" class="d-none">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="material-icons text-muted" style="font-size: 48px;">table_chart</i>
                        <h6 class="mt-2">No Technical Specifications</h6>
                        <p class="text-muted">Add technical specifications that will be displayed in a table format on the product page.</p>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addTechSpecModal">
                            <i class="material-icons">add</i> Add Technical Specification
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Hierarchy Card -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Product Hierarchy</h4>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <i class="material-icons text-primary">category</i>
                    <strong>Category:</strong>
                    <br>
                    <a href="{{ route('admin.product-categories.show', $product->application->standard->category) }}">
                        {{ $product->application->standard->category->name }}
                    </a>
                </div>
                <div class="mb-3">
                    <i class="material-icons text-info">standard</i>
                    <strong>Standard:</strong>
                    <br>
                    <a href="{{ route('admin.product-standards.show', $product->application->standard) }}">
                        {{ $product->application->standard->name }}
                        @if($product->application->standard->code)
                            <small class="text-muted">({{ $product->application->standard->code }})</small>
                        @endif
                    </a>
                </div>
                <div class="mb-3">
                    <i class="material-icons text-success">apps</i>
                    <strong>Application:</strong>
                    <br>
                    <a href="{{ route('admin.product-applications.show', $product->application) }}">
                        {{ $product->application->name }}
                    </a>
                </div>
                <div>
                    <i class="material-icons text-warning">inventory</i>
                    <strong>Product:</strong>
                    <br>
                    {{ $product->name }}
                </div>
            </div>
        </div>

        <!-- Metadata -->
        <div class="card mt-3">
            <div class="card-header">
                <h4 class="card-title">Metadata</h4>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <small class="text-muted">Created</small>
                    <br>
                    {{ $product->created_at->format('M d, Y g:i A') }}
                </div>
                <div>
                    <small class="text-muted">Last Updated</small>
                    <br>
                    {{ $product->updated_at->format('M d, Y g:i A') }}
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card mt-3">
            <div class="card-header">
                <h4 class="card-title">Quick Actions</h4>
            </div>
            <div class="card-body">
                <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-outline-primary btn-block">
                    <i class="material-icons">edit</i> Edit Product
                </a>
                <form action="{{ route('admin.products.destroy', $product) }}" 
                      method="POST" 
                      class="mt-2"
                      onsubmit="return confirm('Are you sure you want to delete this product?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-outline-danger btn-block">
                        <i class="material-icons">delete</i> Delete Product
                    </button>
                </form>
                <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-block mt-2">
                    <i class="material-icons">list</i> All Products
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Add Specification Modal -->
<div class="modal fade" id="addSpecModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('admin.product-specifications.store') }}" method="POST">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                
                <div class="modal-header">
                    <h5 class="modal-title">Add Specification</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <div class="form-group">
                        <label for="spec_type">Specification Type</label>
                        <select class="form-control" id="spec_type" name="spec_type" required>
                            <option value="size">Size</option>
                            <option value="technical">Technical</option>
                            <option value="quality">Quality</option>
                            <option value="physical">Physical</option>
                            <option value="optical">Optical</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="name">Specification Name</label>
                        <input type="text" class="form-control" id="name" name="name" required
                               placeholder="e.g., Maximum Size, Light Transmission">
                    </div>
                    
                    <div class="form-group">
                        <label for="value">Value</label>
                        <input type="text" class="form-control" id="value" name="value" required
                               placeholder="e.g., 3300 x 2140, 90">
                    </div>
                    
                    <div class="form-group">
                        <label for="unit">Unit (Optional)</label>
                        <input type="text" class="form-control" id="unit" name="unit"
                               placeholder="e.g., mm, %, kg/m³">
                    </div>
                    
                    <div class="form-group">
                        <label for="sort_order">Sort Order</label>
                        <input type="number" class="form-control" id="sort_order" name="sort_order" value="0">
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Specification</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Technical Specification Modal -->
<div class="modal fade" id="addTechSpecModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('admin.technical-specifications.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <input type="hidden" name="spec_type" value="technical">
                
                <div class="modal-header">
                    <h5 class="modal-title">Add Technical Specification</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tech_name">Product Name</label>
                                <input type="text" class="form-control" id="tech_name" name="name" required
                                       placeholder="e.g., ARALUX® Clear Float Glass">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tech_standard">Standard</label>
                                <input type="text" class="form-control" id="tech_standard" name="standard" required
                                       placeholder="e.g., JIS, EN, ASTM">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="tech_thickness">Thickness</label>
                                <input type="text" class="form-control" id="tech_thickness" name="thickness" required
                                       placeholder="e.g., 3mm">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="tech_length">Length</label>
                                <input type="text" class="form-control" id="tech_length" name="length" required
                                       placeholder="e.g., 3300">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="tech_width">Width</label>
                                <input type="text" class="form-control" id="tech_width" name="width" required
                                       placeholder="e.g., 2140">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="tech_file">Specification File (PDF)</label>
                        <input type="file" class="form-control-file" id="tech_file" name="specification_file" 
                               accept=".pdf,.doc,.docx">
                        <small class="form-text text-muted">Upload a PDF or document file with technical specifications</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="tech_sort_order">Sort Order</label>
                        <input type="number" class="form-control" id="tech_sort_order" name="sort_order" value="0">
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Technical Specification</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection