@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>Add New Match</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.insert') }}" 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') }}" placeholder="League Name">
                  </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(old('league_type') == 'cricket') selected @endif>Cricket</option>
                      <option value="football" @if(old('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') }}" 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>
                  <div class="form-group">
                    <label>Team Two Name</label>
                    <input type="text"  class="form-control" name="team_two_name" value="{{ old('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>
                  <div class="form-group">
                    <label>Match Date</label>
                    <input type="date"  class="form-control" name="match_date" value="{{ old('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') }}" placeholder="Match Time">
                  </div>
                  <div class="form-group">
                    <label>Streaming URL</label>
                    <div id="streaming-urls-container">
                      @if (old('streaming_urls'))
                        @foreach (old('streaming_urls') as $index => $url)
                          <div class="streaming-url mb-2">
                            <div class="input-group">
                              <input type="text" class="form-control" name="streaming_urls[{{ $index }}]" value="{{ old('streaming_urls.' . $index) }}" placeholder="Streaming URL">
                              <div class="input-group-append">
                                <button type="button" class="btn btn-danger" onclick="removeUrl(this)" @if($index == 0) style="display:none;" @endif>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 mt-2" onclick="addStreamingUrl()">Add Streaming URL</button>
                  </div>
                </div>
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  
  <script>
    let streamingUrlIndex = {{ old('streaming_urls') ? count(old('streaming_urls')) : 1 }}; 

    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';
        }
      });
    }

    updateRemoveButtons();
  </script>
@endsection