@extends('layouts.admin_main')

@section('content')
<div class="content-wrapper">
    <section class="content">
        <div class="container-fluid">
            <div class="col-7">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color: #2590e4; font-weight:600; font-size: 16px;">
                            {{ $service ? 'Edit Service' : 'Add Service' }}
                        </h3>
                        @if (session('status'))
                            <div class="alert alert-success">{{ session('status') }}</div>
                        @endif
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('services.store') }}" id="serviceForm">
                            @csrf
                            @method('POST') {{-- Use PUT method in case of update --}}

                            {{-- Service Title --}}
                            <div class="form-group">
                                <label for="title">Service Title</label>
                                <input type="text" name="title" class="form-control" value="{{ old('title', $service->title ?? '') }}" required>
                            </div>

                            {{-- Service Description --}}
                            <div class="form-group">
                                <label for="description">Service Description</label>
                                <textarea name="description" class="form-control" required>{{ old('description', $service->description ?? '') }}</textarea>
                            </div>

                            <h4>Service Cards</h4>
                            <div id="cardsContainer">
                                @if($service && $service->cards)
                                    @foreach($service->cards as $index => $card)
                                        <div class="card-item mb-3">
                                            {{-- Hidden field to track existing card --}}
                                            <input type="hidden" name="cards[{{ $index }}][id]" value="{{ $card->id }}">

                                            {{-- Card Icon --}}
                                            <label for="icon">Select Icon</label>
                                            <select name="cards[{{ $index }}][icon]" class="form-control" required>
                                                <option value="">Select an Icon</option>
                                                <option value="bx bxl-dribbble" {{ old('cards.' . $index . '.icon', $card->icon) == 'bx bxl-dribbble' ? 'selected' : '' }}>Dribbble</option>
                                                <option value="bx bx-file" {{ old('cards.' . $index . '.icon', $card->icon) == 'bx bx-file' ? 'selected' : '' }}>File</option>
                                                <option value="bx bx-tachometer" {{ old('cards.' . $index . '.icon', $card->icon) == 'bx bx-tachometer' ? 'selected' : '' }}>Dashboard</option>
                                                <option value="bx bx-layer" {{ old('cards.' . $index . '.icon', $card->icon) == 'bx bx-layer' ? 'selected' : '' }}>Layer</option>
                                                {{-- More icon options here --}}
                                            </select>

                                            {{-- Card Title --}}
                                            <input type="text" name="cards[{{ $index }}][card_title]" class="form-control" value="{{ old('cards.' . $index . '.card_title', $card->card_title) }}" placeholder="Card Title" required>

                                            {{-- Card Description --}}
                                            <textarea name="cards[{{ $index }}][card_description]" class="form-control" placeholder="Card Description" required>{{ old('cards.' . $index . '.card_description', $card->card_description) }}</textarea>

                                            <button type="button" class="btn btn-danger remove-card">Remove Card</button>
                                        </div>
                                    @endforeach
                                @endif
                            </div>

                            <button type="button" class="btn btn-primary" id="addCard">Add Another Card</button>
                            <button type="submit" class="btn btn-success">Save Service</button>
                        </form>
                    </div>
                </div>
            </div>
        </div> <!-- End of container-fluid -->
    </section>
</div> <!-- End of content-wrapper -->

<script>
    let cardIndex = {{ old('cards') ? count(old('cards')) : ($service ? count($service->cards) : 0) }};

    document.getElementById('addCard').addEventListener('click', function() {
        const cardsContainer = document.getElementById('cardsContainer');
        const cardItem = document.createElement('div');
        cardItem.classList.add('card-item', 'mb-3');
        cardItem.innerHTML = `
           <label for="icon">Select Icon</label>
            <select name="cards[${cardIndex}][icon]" class="form-control" required>
                <option value="">Select an Icon</option>
                <option value="bx bxl-dribbble">Dribbble</option>
                <option value="bx bx-file">File</option>
                <option value="bx bx-tachometer">Dashboard</option>
                <option value="bx bx-layer">Layer</option>
                <option value="bx bxl-facebook">Facebook</option>
                <option value="bx bxl-twitter">Twitter</option>
                <option value="bx bxl-linkedin">LinkedIn</option>
                <option value="bx bxl-github">GitHub</option>
                <option value="bx bxl-instagram">Instagram</option>
                <option value="bx bx-envelope">Email</option>
                <option value="bx bx-phone">Phone</option>
                <option value="bx bx-map">Map</option>
                <option value="bx bx-time">Time</option>
                <option value="bx bx-heart">Heart</option>
                <option value="bx bx-star">Star</option>
                <option value="bx bx-briefcase">Briefcase</option>
                <option value="bx bx-cog">Settings</option>
                <option value="bx bx-lock">Lock</option>
                <option value="bx bx-unlock">Unlock</option>
                <option value="bx bx-check">Check</option>
                <option value="bx bx-x">Close</option>
                <option value="bx bx-bell">Bell</option>
            </select>
            <input type="text" name="cards[${cardIndex}][card_title]" class="form-control" placeholder="Card Title" required>
            <textarea name="cards[${cardIndex}][card_description]" class="form-control" placeholder="Card Description" required></textarea>
            <button type="button" class="btn btn-danger remove-card">Remove Card</button>
        `;
        cardsContainer.appendChild(cardItem);
        cardIndex++;
    });

    document.getElementById('cardsContainer').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-card')) {
            e.target.closest('.card-item').remove();
        }
    });
</script>
@endsection