@extends('layouts.index')

@section('page_title')
    New City
@endsection

@section('locations_active')
    nav-item active
@endsection



@section('projects_active')
    nav-item active
@endsection

@section('pg_name')
    Add New Project
@endsection

@section('headaddons')
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
@endsection

@section('content')

@if (count($errors) > 0)
    <div class="col-12" id="div__Error">
        @foreach ($errors->all() as $error)
        <div class="zoomIn col-12 alert alert-danger">
            {{$error}}
        </div>
        @endforeach
    </div>
@endif

@if (session('success'))
    <div class="col-12 alert alert-success">
        {{ session('success') }}
    </div>
@endif

<div class="col-12">
    <form action="{{ route('addnewProjects') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="mb-3">
            <label for="projectName" class="form-label">Project Name</label>
            <input type="text" class="form-control" id="projectName" name="projectName" value="{{ old('projectName') }}" required>
        </div>

        <div class="mb-3">
            <label for="clientName" class="form-label">Client Name</label>
            <input type="text" class="form-control" id="clientName" name="clientName" value="{{ old('clientName') }}" required>
        </div>

        <div class="mb-3">
            <label for="categories" class="form-label">Categories</label>
            <input type="text" class="form-control" id="categories" name="categories" value="{{ old('categories') }}" required>
        </div>

        <div class="mb-3">
            <label for="projectHead" class="form-label">Project Head</label>
            <input type="text" class="form-control" id="projectHead" name="projectHead" value="{{ old('projectHead') }}" required>
        </div>

        <div class="mb-3">
            <label for="projectContent" class="form-label">Project Content</label>
            <textarea class="form-control" id="projectContent" name="projectContent" rows="4" required>{{ old('projectContent') }}</textarea>
        </div>

        <div class="mb-3">
            <label for="projectAddress" class="form-label">Project Address</label>
            <input type="text" class="form-control" id="projectAddress" name="projectAddress" value="{{ old('projectAddress') }}" required>
        </div>


        <div id="projectEventsContainer">
            <label class="form-label">Project Events</label>
            <div class="mb-3 d-flex align-items-center">
                <input type="text" class="form-control me-2" name="projectEvents[0]" placeholder="Project Event" required>
                <!-- <input type="text" class="form-control" name="openedHours[0][time]" placeholder="Time (AM/PM)" required> -->
            </div>
        </div>

        <button type="button" class="btn btn-secondary mb-3" id="addProjectEvent">Add Another Event</button>


        <div class="mb-3">
            <label for="email" class="form-label">Contact Email</label>
            <input type="email" class="form-control" id="email" name="contactWay[email]" value="{{ old('contactWay.email') }}" required>
        </div>

        <div class="mb-3">
            <label for="phone" class="form-label">Contact Phone</label>
            <input type="text" class="form-control" id="phone" name="contactWay[phone]" value="{{ old('contactWay.phone') }}" required>
        </div>

        <div id="openedHoursContainer">
            <label class="form-label">Opened Hours</label>
            <div class="mb-3 d-flex align-items-center">
                <input type="text" class="form-control me-2" name="openedHours[0][dayOfWeek]" placeholder="Day of Week" required>
                <input type="text" class="form-control" name="openedHours[0][time]" placeholder="Time (AM/PM)" required>
            </div>
        </div>





        

        <button type="button" class="btn btn-secondary mb-3" id="addOpenedHour">Add Another Opened Hour</button>

        <!-- <div class="mb-3">
            <label for="projectPhoto" class="form-label">Project Photo</label>
            <input type="file" class="form-control" id="projectPhoto" name="projectPhoto" accept="image/*">
        </div> -->

        <div class="mb-3">
    <label for="projectPhotos" class="form-label">Project Photos</label>
    <input 
        type="file" 
        class="form-control" 
        id="projectPhotos" 
        name="projectPhoto[]" 
        accept="image/*" 
        multiple>
</div>


        <div class="col-12">
            <button class="btn btn-success" type="submit">Add Project</button>
        </div>
    </form>
</div>

<!-- <script>
    let openedHoursIndex = 1;

    document.getElementById('addOpenedHour').addEventListener('click', function() {
        let container = document.getElementById('openedHoursContainer');
        let div = document.createElement('div');
        div.classList.add('mb-3', 'd-flex', 'align-items-center');
        div.innerHTML = `
            <input type="text" class="form-control me-2" name="openedHours[${openedHoursIndex}][dayOfWeek]" placeholder="Day of Week" required>
            <input type="text" class="form-control" name="openedHours[${openedHoursIndex}][time]" placeholder="Time (AM/PM)" required>
        `;
        container.appendChild(div);
        openedHoursIndex++;
    });
</script> -->


<script>
    let openedHoursIndex = 1;

    document.getElementById('addOpenedHour').addEventListener('click', function() {
        let container = document.getElementById('openedHoursContainer');

        // Create a new div for the inputs and the remove button
        let div = document.createElement('div');
        div.classList.add('mb-3', 'd-flex', 'align-items-center');

        // Add the input fields and remove button to the div
        div.innerHTML = `
            <input type="text" class="form-control me-2" name="openedHours[${openedHoursIndex}][dayOfWeek]" placeholder="Day of Week" required>
            <input type="text" class="form-control me-2" name="openedHours[${openedHoursIndex}][time]" placeholder="Time (AM/PM)" required>
            <button type="button" class="btn btn-danger btn-sm removeOpenedHour">Remove</button>
        `;

        // Append the div to the container
        container.appendChild(div);

        // Increment the index for the next set of inputs
        openedHoursIndex++;
    });

    // Add event listener to handle the remove button clicks
    document.getElementById('openedHoursContainer').addEventListener('click', function(e) {
        if (e.target.classList.contains('removeOpenedHour')) {
            e.target.parentElement.remove(); // Remove the parent div containing the inputs and button
        }
    });




    let projectEventsIndex = 1;

    document.getElementById('addProjectEvent').addEventListener('click', function() {
        let container = document.getElementById('projectEventsContainer');

        // Create a new div for the inputs and the remove button
        let div = document.createElement('div');
        div.classList.add('mb-3', 'd-flex', 'align-items-center');

        // Add the input fields and remove button to the div
        div.innerHTML = `
            <input type="text" class="form-control me-2" name="projectEvents[${projectEventsIndex}]" placeholder="Project Event" required>
            <button type="button" class="btn btn-danger btn-sm removeProjectEvents">Remove</button>
        `;

        // Append the div to the container
        container.appendChild(div);

        console.log(container);

        // Increment the index for the next set of inputs
        projectEventsIndex++;
    });

    // Add event listener to handle the remove button clicks
    document.getElementById('projectEventsContainer').addEventListener('click', function(e) {
        console.log(e.target);
        if (e.target.classList.contains('removeProjectEvents')) {
            e.target.parentElement.remove(); // Remove the parent div containing the inputs and button
        }
    });
</script>


@endsection