@extends('layouts.index')

@section('page_title', 'Edit Project')

@section('content')
    <div class="container my-5">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h3>Edit Project</h3>
            </div>
            <div class="card-body">
                <!-- <form action="{{ route('projects.update', $project->id) }}" method="POST" class="needs-validation" enctype='multipart/form-data' novalidate> -->
                <form action="{{ route('projects.update', $project->id) }}" method="POST" class="needs-validation" enctype='multipart/form-data' >
                    @csrf
                    @method('PUT')

                    <div class="form-group mb-3">
                        <label for="projectName" class="form-label">Project Name</label>
                        <input type="text" id="projectName" name="projectName" class="form-control" value="{{ $project->projectName }}" required>
                        <div class="invalid-feedback">Please enter the project name.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="clientName" class="form-label">Client Name</label>
                        <input type="text" id="clientName" name="clientName" class="form-control" value="{{ $project->clientName }}" required>
                        <div class="invalid-feedback">Please enter the client name.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="categories" class="form-label">Categories</label>
                        <input type="text" id="categories" name="categories" class="form-control" value="{{ $project->categories }}" required>
                        <div class="invalid-feedback">Please enter the categories.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="projectHead" class="form-label">Project Head</label>
                        <input type="text" id="projectHead" name="projectHead" class="form-control" value="{{ $project->projectHead }}" required>
                        <div class="invalid-feedback">Please enter the project head.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="projectContent" class="form-label">Project Content</label>
                        <textarea id="projectContent" name="projectContent" class="form-control" rows="4" required>{{ $project->projectContent }}</textarea>
                        <div class="invalid-feedback">Please enter the project content.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="projectAddress" class="form-label">Project Address</label>
                        <input type="text" id="projectAddress" name="projectAddress" class="form-control" value="{{ $project->projectAddress }}" required>
                        <div class="invalid-feedback">Please enter the project address.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="contactWay" class="form-label">Contact Way (JSON Format)</label>
                        <textarea id="contactWay" name="contactWay" class="form-control" rows="2" required>{{ $project->contactWay }}</textarea>
                        <div class="invalid-feedback">Please enter contact information in JSON format.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="openedHours" class="form-label">Opened Hours (JSON Format)</label>
                        <textarea id="openedHours" name="openedHours" class="form-control" rows="2" required>{{ $project->openedHours }}</textarea>
                        <div class="invalid-feedback">Please enter opened hours in JSON format.</div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="projectPhotos" class="form-label">Project Photos</label>
                        <input type="file" id="projectPhotos" name="projectPhoto[]" class="form-control" multiple>
                        <div class="form-text">Optional: You can upload multiple images.</div>
                    </div>

                    <button type="submit" class="btn btn-success">Update Project</button>
                    <a href="{{ route('projects.index') }}" class="btn btn-secondary ms-2">Cancel</a>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Enable Bootstrap validation styles
        (function () {
            'use strict';
            var forms = document.querySelectorAll('.needs-validation');
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
        })();
    </script>
@endsection