@extends('adminlte::page')

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

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">TechStack Points Edit for {{$page->name}}'s {{$type}}</h1>
    {{-- <div class="d-flex justify-content-end mb-3">
        <a href="#" class="btn btn-primary">Edit Points</a>
    </div> --}}
@stop

@php 
    $index_count1 = 1;
@endphp

@section('content')
    <div class="card shadow rounded-lg mb-3 p-4">
        {{-- Breadcrumbs if needed --}}
        <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"><a href="{{route('admin.travel-guide.techstack.edit', ['page_type'=>$page_type,'country_id'=>$id,'type'=>'introduction2'])}}">TechStack Points</a></li>
                <li class="breadcrumb-item text-bold active" aria-current="page">Edit</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 method="POST" enctype="multipart/form-data" action="{{ route('admin.travel-guide.techstack.heading.edit.action', ['page_type' => $page_type, 'country_id' => $id, 'type' => 'introduction2','id' => $techstack_headings->id]) }}" autocomplete="off">
            @csrf
            <div class="card-body">
                <div class="form-group">
                    <label>Heading</label>
                    <input type="text" class="form-control" name="heading" placeholder="Heading" value="{{ old('heading',$techstack_headings->heading) }}" required>
                </div>

                <div class="form-group">
                    <label>Description</label>
                    <input type="text" class="form-control" name="description" placeholder="Description" value="{{ old('description',$techstack_headings->description) }}" >
                </div>
                

                {{-- <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control" name="description" id="content" rows="7" placeholder="Write Here">{{$techstack_headings->description }}</textarea>
                </div> --}}

                <div class="col-md-12">
                    <div class="form-group">
                        <label>Points</label>

                        @if(!empty($techstack_headings->points))                                  
                            @foreach($techstack_headings->points as $value)
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-1">
                                            <input type="checkbox"  name="points_old_id[]" value="{{$value->id}}" checked>					
                                        </div>

                                        {{-- <div class="col-md-3">                                       
                                            
                                            <select class="category select2 rounded form-control" name="points_old_icon[{{$value->id}}]" id="heading_name">
                                                <option value="">Select icon...</option>
                                                @foreach ($icons as $icon)
                                                    <option value="{{ $icon->icon }}" {{ $icon->icon==$value->icon? 'selected':''  }} >{{ $icon->icon_name }}</option>
                                                
                                                @endforeach
                                            </select>  
                                        </div> --}}

                                        {{-- <div class="col-md-1">    
                                            @if($value->icon)                    
                                            <img src="{{ asset('service_icon/'.$section.'/'.$value->icon) }}" style="height: 25px;">
                                            @endif
                                        </div> --}}

                                        <div class="col-md-6 mb-2">
                                            <input type="text"  class="form-control" placeholder="Points"  name="points_old_title[{{$value->id}}]"  value="{{$value->heading_value}} "/>
                                        </div>
                                        <div class="col-md-5 mb-2">
                                            <input type="text"  class="form-control" placeholder="Tagline"  name="points_old_tagline[{{$value->id}}]"  value="{{$value->tagline}} "/>
                                        </div>

                                        {{-- <div class="col-md-3">
                                            <input type="text"  class="form-control" placeholder="Points"  name="points_old_title[{{$value->id}}]"  value="{{$value->heading_value}} "/> 				
                                        </div> --}}
                                        
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                <div id="bookForm1">
                    <div class="form-group">
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <input type="text" class="form-control" placeholder="Points" name="points[{{$index_count1}}]">
                            </div>
                            <div class="col-md-5 mb-2">
                                <input type="text" class="form-control" placeholder="Tagline" name="taglines[{{$index_count1}}]">
                            </div>
                        </div>
                    </div>

                    <div class="form-group d-none" id="bookTemplate1">
                        <div class="row mb-2">
                            <div class="col-md-6 mb-2">
                                <input type="text" class="form-control" placeholder="Points" name="point">
                            </div>
                            <div class="col-md-5 mb-2">
                                <input type="text" class="form-control" placeholder="Tagline" name="tagline">
                            </div>
                            <div class="col-md-1 d-flex align-items-center">
                                <button type="button" class="btn btn-danger removeButton"><i class="fa fa-minus"></i></button>
                            </div>
                        </div>
                    </div>

                    
                </div>
                <div class="form-group">
                        <button type="button" class="btn btn-success addButton"><i class="fa fa-plus"></i> Add More</button>
                    </div>

                <div class="form-group text-right">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
@stop

@section('css')
    <style>
        .form-group label {
            font-weight: 600;
        }
        .removeButton, .addButton {
            padding: 6px 12px;
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function () {
            let index = {{ $index_count1 + 1 }};
            $('.addButton').click(function () {
                let template = $('#bookTemplate1').clone().removeClass('d-none').removeAttr('id');
                template.find('input[name="point"]').attr('name', 'points[' + index + ']');
                template.find('input[name="tagline"]').attr('name', 'taglines[' + index + ']');
                $('#bookForm1').append(template);
                index++;
            });

            $(document).on('click', '.removeButton', function () {
                $(this).closest('.row').remove();
            });
        });
    </script>
@stop