<style>
      .daysbold{
    color:#000 !important;
    font-weight:700 !important; 
  }
  </style>

@extends('admin.layouts.main-layout')

@section('content')
<div class="container">
    <div class="justify-content-center">
        <div class="">
            <div class="card">
                <div class="card-header">Update Game</div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form id="update-form" role="form" method="post" onsubmit="return validateForm()" action="{{url('admin/stores-newgame-schedule/'.$detail->id)}}" autocomplete="off" enctype="multipart/form-data">
                        @csrf
                        {{ method_field('PATCH') }}
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="title">Game Name <span class="require label-mandatory">*</span></label>
                                    <input type="text" class="form-control input-mandatory" name="stores_id" id="stores_id" placeholder="Game Name" value="{{$detail->name}}">
                                    <input type="hidden" value="{{$detail->id}}" id="store_id" />
                                </div>
                            </div>
                        </div>
                        <br>
                        @foreach($day as $dayss)
                                @php
                                    $dayDetails = $detail->storesDay->where('stores_day_id', $dayss->id);
                                @endphp
                        <div class="day-section">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title " class="daysbold">{{$dayss->name}} 
                                        <input type="checkbox" class="day-checkbox" data-day-id="{{$dayss->id}}" name="day[{{$dayss->id}}]" {{ in_array($dayss->id ,$dayid) ? 'checked' : '' }}>
                                    </label>
                                </div>
                            </div>
                            <div class="time-fields-container" data-day-id="{{$dayss->id}}">
                               
                                @foreach($dayDetails as $dayDetail)
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="title">Open Time <span class="require label-mandatory">*</span></label>
                                            <input type="time" class="form-control input-mandatory time-field" name="open_time[{{$dayss->id}}][]" value="{{$dayDetail->opent_time}}">
                                        </div>
                                    </div>
                                    @if($detail->id != 9)
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="title">Close Time <span class="require label-mandatory">*</span></label>
                                            <input type="time" class="form-control input-mandatory time-field" name="close_time[{{$dayss->id}}][]" value="{{$dayDetail->close_time}}">
                                        </div>
                                    </div>
                                    @endif
                                    <div class="col-md-4">
                                        <button type="button" class="btn btn-secondary mt-4" onclick="addTimeFields({{$dayss->id}})">Add Time</button>
                                    </div>
                                </div>
                                @endforeach
                                @if($dayDetails->count() == 0)
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="title">Open Time <span class="require label-mandatory">*</span></label>
                                            <input type="time" class="form-control input-mandatory time-field" name="open_time[{{$dayss->id}}][]" value="">
                                        </div>
                                    </div>
                                    @if($detail->id != 9)
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="title">Close Time <span class="require label-mandatory">*</span></label>
                                            <input type="time" class="form-control input-mandatory time-field" name="close_time[{{$dayss->id}}][]" value="">
                                        </div>
                                    </div>
                                    @endif
                                    <div class="col-md-4">
                                        <button type="button" class="btn btn-secondary mt-4" onclick="addTimeFields({{$dayss->id}})">Add Time</button>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                        @endforeach
                        <br>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function addTimeFields(dayId) {
    const store_id = document.getElementById('store_id').value;
    const container = document.querySelector(`.time-fields-container[data-day-id="${dayId}"]`);
    const timeFields = document.createElement('div');
    timeFields.classList.add('row', 'mt-2');
    
    // Start the template literal
    let html = `
        <div class="col-md-4">
            <div class="form-group">
                <label for="title">Open Time <span class="require label-mandatory">*</span></label>
                <input type="time" class="form-control input-mandatory time-field" name="open_time[${dayId}][]" placeholder="">
            </div>
        </div>
    `;

    if (store_id != 9) {
        html += `
            <div class="col-md-4">
                <div class="form-group">
                    <label for="title">Close Time <span class="require label-mandatory">*</span></label>
                    <input type="time" class="form-control input-mandatory time-field" name="close_time[${dayId}][]" placeholder="">
                </div>
            </div>
        `;
    }

    html += `
        <div class="col-md-4">
            <button type="button" class="btn btn-danger mt-4" onclick="removeTimeFields(this)">Remove</button>
        </div>
    `;

    timeFields.innerHTML = html;
    container.appendChild(timeFields);
}


function removeTimeFields(button) {
    button.closest('.row').remove();
}

function validateForm() {
    const form = document.getElementById('update-form');
    let isValid = true;

    // Check each day section
    document.querySelectorAll('.day-section').forEach(daySection => {
        const checkbox = daySection.querySelector('.day-checkbox');
        const dayId = checkbox.getAttribute('data-day-id');
        const timeFieldsContainer = daySection.querySelector(`.time-fields-container[data-day-id="${dayId}"]`);

        if (checkbox.checked) {
            // Check if time fields are present and valid
            const openTimes = timeFieldsContainer.querySelectorAll('input[name^="open_time"]');
            const closeTimes = timeFieldsContainer.querySelectorAll('input[name^="close_time"]');
            openTimes.forEach((openTime, index) => {
                const closeTime = closeTimes[index];
                if (!openTime.value || !closeTime.value) {
                    isValid = false;
                    openTime.classList.add('is-invalid');
                    closeTime.classList.add('is-invalid');
                } else {
                    openTime.classList.remove('is-invalid');
                    closeTime.classList.remove('is-invalid');
                }
            });
        }
    });

    if (!isValid) {
        alert('Please fill in all required time fields.');
    }

    return isValid;
}
</script>
@endsection
