@extends('admin.layout.master')

@section('content')
<div class="container py-5">

    <h3 class="text-center text-primary mb-4">
        Problems for: <strong>{{ $upload->name }}</strong>
    </h3>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif


    <div class="accordion" id="problemAccordion">

        @forelse($problems as $problemIndex => $problem)

            {{-- Card --}}
            <div class="accordion-item shadow-sm mb-3">

                <h2 class="accordion-header" id="heading-{{ $problem->id }}">
                    <button class="accordion-button collapsed fw-bold text-primary"
                            type="button"
                            data-bs-toggle="collapse" 
                            data-bs-target="#collapse-{{ $problem->id }}"
                            aria-expanded="false">

                        {{-- SERIAL NUMBER --}}
                        <span class="badge bg-primary rounded-pill me-2">
                            {{ $problemIndex + 1 }}
                        </span>

                        <i class="mdi mdi-alert-circle-outline me-2 text-danger"></i>

                        {{ $problem->problem_title }}
                    </button>
                </h2>

                <div id="collapse-{{ $problem->id }}"
                     class="accordion-collapse collapse"
                     aria-labelledby="heading-{{ $problem->id }}"
                     data-bs-parent="#problemAccordion">

                    <div class="accordion-body">

                        {{-- Delete Button --}}
                        <form action="{{ route('problem-links.destroy', $problem->id) }}"
                              method="POST"
                              onsubmit="return confirm('Delete this problem?');"
                              class="text-end mb-3">

                            @csrf
                            @method('DELETE')

                            <button class="btn btn-danger btn-sm">
                                <i class="mdi mdi-delete"></i> Delete Problem
                            </button>
                        </form>

                        {{-- Component Details --}}
                        @php
                            $components = json_decode($problem->components_json, true);
                        @endphp

                        @if(is_array($components) && count($components) > 0)

                            <div class="list-group">

                                @foreach($components as $componentIndex => $item)
                                    <div class="list-group-item mb-2 rounded shadow-sm">

                                        {{-- COMPONENT SERIAL NUMBER --}}
                                        <h6 class="fw-bold text-dark mb-2">
                                            <span class="badge bg-secondary me-2">
                                                {{ $problemIndex + 1 }}.{{ $componentIndex + 1 }}
                                            </span>

                                            <i class="mdi mdi-chip text-success me-1"></i>
                                            {{ $item['component_name'] ?? 'Component' }}
                                        </h6>

                                        <div class="row">

                                            <div class="col-md-6">
                                                <p class="mb-1"><strong>Net Name:</strong> {{ $item['netName'] }}</p>
                                                <p class="mb-1"><strong>Footprint:</strong> {{ $item['footprint'] }}</p>
                                                <p class="mb-1"><strong>Pin Number:</strong> {{ $item['pinNumber'] }}</p>
                                            </div>

                                            <div class="col-md-6">
                                                <p class="mb-1"><strong>Diode Value:</strong> {{ $item['diodeValue'] }}</p>
                                                <p class="mb-1"><strong>Capacitor Value:</strong> {{ $item['capacitorValue'] }}</p>
                                                <p class="mb-1"><strong>Ohm Value:</strong> {{ $item['ohmValue'] }}</p>
                                            </div>

                                        </div>

                                    </div>
                                @endforeach

                            </div>

                        @else
                            <p class="text-muted">No component details available.</p>
                        @endif

                    </div>

                </div>
            </div>

        @empty
            <p class="text-center text-muted mt-4">No problems added.</p>
        @endforelse

    </div>

</div>
@endsection