@extends('adminlte::page')

@section('title', 'TechStack for '.$page->name.' '.$type.' Section')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">TechStack for {{$page->name}}'s {{$type}}</h1>
    <div class="d-flex justify-content-end mb-2">
        <a href="{{ route('admin.travel-guide.techstack.heading.add', ['page_type' => $page_type, 'country_id' => $id, 'type' => 'introduction2']) }}" class="btn btn-primary">Add Points</a>
    </div>
@stop

@php 
    $index_count1 = 1;
@endphp

@section('content')
    <div class="card shadow rounded-lg px-4 py-3 mb-4"> 

        {{-- Uncomment and use this breadcrumb if needed --}}
        {{-- 
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-white">
                <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.travel-guide.overview.index', [$page_type, $id]) }}">{{ $page->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">TechStack</li>
            </ol>
        </nav> 
        --}}
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-white">
                <li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
                <li class="breadcrumb-item text-bold"><a href="{{ route('admin.travel-guide.country') }}">Countries</a></li>
                <li class="breadcrumb-item text-bold"><a href="{{route('admin.travel-guide.overview.index',['2',$id])}}">Best Time To Visit</a></li>
                <li class="breadcrumb-item text-bold active" aria-current="page">TechStack Points</li>
            </ol>
        </nav>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li> 
                    @endforeach
                </ul>
            </div>
        @endif

        <form id="file-upload" method="POST" action="#" enctype="multipart/form-data">
            {{ csrf_field() }}

            <div class="row">
                @if(!empty($tgType))                                  
                    @foreach($tgType as $value)
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="card h-100 border-primary shadow-sm">
                                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                    <strong>{{ $value->heading }}</strong>
                                    <div>
                                        <a href="{{ route('admin.travel-guide.techstack.heading.edit', ['page_type' => $page_type, 'country_id' => $id, 'type' => 'introduction2','id' => $value->id]) }}" class="text-white mr-2" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('admin.travel-guide.techstack.heading.delete', ['page_type' => $page_type, 'country_id' => $id, 'type' => 'introduction2','id' => $value->id]) }}" class="text-white" onclick="return confirm('Are you sure?')" title="Delete">
                                            <i class="fas fa-trash-alt"></i>
                                        </a>
                                    </div>
                                </div>

                                @if(!empty($value->points))
                                    <ul class="list-group list-group-flush">
                                        @foreach($value->points as $point)
                                            <li class="list-group-item">
                                                {{-- Uncomment this if icon usage is needed --}}
                                                {{-- 
                                                @if(!empty($point->icon))
                                                    <img src="{{ asset('service_icon/'.$section.'/'.$point->icon) }}" style="height: 25px;" alt="icon"> 
                                                @endif 
                                                --}}
                                                {{ $point->heading_value }} - {{ $point->tagline }}
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <div class="p-3 text-muted">No points added yet.</div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-12 text-center text-muted">
                        <p>No TechStack sections found.</p>
                    </div>
                @endif
            </div>
        </form>
    </div>
@stop

@section('css')
    <style>
        .card-header i {
            cursor: pointer;
        }
    </style>
@stop

@section('js')
    {{-- Optional custom JS can be added here --}}
@stop