@extends('backend.layouts.app')
@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Edit Video</h1>
          </div>
        </div>
      </div>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <form action="{{ route('admin.matches.update') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                  <div class="form-group">
                    <label>League Name</label>
                    <input type="text" class="form-control" name="league_name" value="{{ old('league_name', $match->league_name) }}" placeholder="League Name">
                    <input type="hidden" class="form-control" name="match_id" value="{{ $match->id }}">
                  </div>
                  <div class="form-group">
                    <label class="d-block">League Type</label>
                    <select name="league_type" class="form-control select2" style="width: 100%">
                      <option selected disabled>Select League Type</option>
                      <option value="cricket" @if($match->league_type == 'cricket') selected @endif>Cricket</option>
                      <option value="football" @if($match->league_type == 'football') selected @endif>Football</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label>Team One Name</label>
                    <input type="text"  class="form-control" name="team_one_name" value="{{ old('team_one_name', $match->team_one_name) }}" placeholder="Team One Name">
                  </div>
                  <div class="form-group">
                    <label>Team One Flag</label>
                    <input type="file"  class="form-control" name="team_one_flag">
                  </div>
                  <!-- Thumbnail Preview -->
                  <div class="form-group">
                    <img src="{{ asset($match->team_one_flag) }}" alt="Flag" style="width: 70px; height: 70px;">
                  </div>
                  <div class="form-group">
                    <label>Team Two Name</label>
                    <input type="text"  class="form-control" name="team_two_name" value="{{ old('team_two_name', $match->team_two_name) }}" placeholder="Team Two Name">
                  </div>
                  <div class="form-group">
                    <label>Team Two Flag</label>
                    <input type="file"  class="form-control" name="team_two_flag">
                  </div>
                  <!-- Thumbnail Preview -->
                  <div class="form-group">
                    <img src="{{ asset($match->team_two_flag) }}" alt="Flag" style="width: 70px; height: 70px;">
                  </div>
                  <div class="form-group">
                    <label>Match Date</label>
                    <input type="date"  class="form-control" name="match_date" value="{{ old('match_date', $match->match_date) }}" placeholder="Match Date">
                  </div>
                  <div class="form-group">
                    <label>Match Time</label>
                    <input type="time"  class="form-control" name="match_time" value="{{ old('match_time', $match->match_time) }}" placeholder="Match Time">
                  </div>
                  <!-- Streaming URLs -->
                  <div class="form-group">
                    <label>Streaming URLs</label>
                    <div id="streaming-urls-container" class="mb-3">
                      @php
                        $existingUrls = old('streaming_urls', $match->streamingUrls->pluck('url')->toArray());
                      @endphp
                      @if ($existingUrls)
                        @foreach ($existingUrls as $index => $url)
                          <div class="streaming-url mb-2">
                            <div class="input-group">
                              <input type="text" class="form-control" name="streaming_urls[{{ $index }}]" value="{{ $url }}" placeholder="Streaming URL">
                              <div class="input-group-append">
                                <button type="button" class="btn btn-danger" onclick="removeUrl(this)">Remove</button>
                              </div>
                            </div>
                          </div>
                        @endforeach
                      @else
                        <div class="streaming-url mb-2">
                          <div class="input-group">
                            <input type="text" class="form-control" name="streaming_urls[0]" placeholder="Streaming URL">
                            <div class="input-group-append">
                              <button type="button" class="btn btn-danger" onclick="removeUrl(this)" style="display: none;">Remove</button>
                            </div>
                          </div>
                        </div>
                      @endif
                    </div>
                    <button type="button" class="btn btn-primary" onclick="addStreamingUrl()">Add Streaming URL</button>
                  </div>

                  <div class="form-group">
                    <label>Status</label>
                    <select name="status" class="form-control">
                      <option value="0" @if($match->status == '0') selected @endif>Active</option>
                      <option value="1" @if($match->status == '1') selected @endif>Inactive</option>
                    </select>
                  </div>
                </div>
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">Update</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <script>
let streamingUrlIndex = {{ count(old('streaming_urls', $match->streamingUrls)) }};

function addStreamingUrl() {
    const container = document.getElementById('streaming-urls-container');
    const newUrl = document.createElement('div');
    newUrl.classList.add('streaming-url', 'mb-2');
    newUrl.innerHTML = `
        <div class="input-group">
            <input type="text" class="form-control" name="streaming_urls[${streamingUrlIndex}]" placeholder="Streaming URL">
            <div class="input-group-append">
                <button type="button" class="btn btn-danger" onclick="removeUrl(this)">Remove</button>
            </div>
        </div>
    `;
    container.appendChild(newUrl);
    streamingUrlIndex++;
    updateRemoveButtons(); // Update visibility of remove buttons
}

function removeUrl(button) {
    const streamingUrlDiv = button.closest('.streaming-url');
    streamingUrlDiv.remove();
    updateRemoveButtons(); // Update visibility of remove buttons
}

function updateRemoveButtons() {
    const streamingUrls = document.querySelectorAll('.streaming-url');
    streamingUrls.forEach((urlDiv, index) => {
        const removeButton = urlDiv.querySelector('button');
        // Show the remove button if there are more than one streaming URLs
        if (streamingUrls.length <= 1) {
            removeButton.style.display = 'none';
        } else {
            removeButton.style.display = 'inline-block';
        }
    });
}

// Initialize remove buttons on page load
updateRemoveButtons();

  </script>
@endsection