{{-- resources/views/admin/settings/locations.blade.php --}}
@extends('layouts.app')

@section('content')
<div class="container mt-5">
        <h2>Manage Locations</h2>
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <form method="POST" action="{{ route('settings.locations.save') }}">
            @csrf

            <!-- Existing Locations -->
            @foreach($locations as $location)
            <div class="location-row form-group row">
                <div class="col-md-5">
                    <label for="location_name_en_{{ $location->id }}">Location (EN)</label>
                    <input type="text" class="form-control" name="locations[{{ $location->id }}][name_en]" value="{{ $location->name_en }}" required>
                </div>
                <div class="col-md-5">
                    <label for="location_name_jp_{{ $location->id }}">Location (JP)</label>
                    <input type="text" class="form-control" name="locations[{{ $location->id }}][name_jp]" value="{{ $location->name_jp }}" required>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger remove-location">Remove</button>
                </div>
            </div>
            @endforeach

            <!-- New Locations -->
            <div id="new-locations">
                <div class="location-row form-group row">
                    <div class="col-md-5">
                        <label for="new_location_name_en">New Location (EN)</label>
                        <input type="text" class="form-control" name="new_locations[][name_en]" required>
                    </div>
                    <div class="col-md-5">
                        <label for="new_location_name_jp">New Location (JP)</label>
                        <input type="text" class="form-control" name="new_locations[][name_jp]" required>
                    </div>
                </div>  
            </div>

            <button type="button" class="btn btn-success" id="add-location">Add Location</button>

            <button type="submit" class="btn btn-primary mt-3">Save Locations</button>
        </form>

    </div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            $('#add-location').on('click', function() {
                var newLocationHtml = `
                 <div class="location-row form-group row">
                    <div class="col-md-5">
                        <label for="new_location_name_en">New Location (EN)</label>
                        <input type="text" class="form-control" name="new_locations[][name_en]" required>
                    </div>
                    <div class="col-md-5">
                        <label for="new_location_name_jp">New Location (JP)</label>
                        <input type="text" class="form-control" name="new_locations[][name_jp]" required>
                    </div>
                </div>
                `;
                $('#new-locations').append(newLocationHtml);
            });
        });

        // Remove location row
        $('#remove-location').on('click', function() {
            $(this).closest('.location-row').remove();
        });
    });
</script>
@endsection