@include('header')
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">


      <div class="container mt-4 mb-4">
        <!-- Success Modal -->
@if ($message = Session::get('success'))
                        <div class="alert alert-success alert-dismissible fade show">
                            <strong>Success</strong> <br> {{ $message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <p class="fs-6 pb-0 mb-0" style="color: #ff751a;">Report PDUs</p>
                    <p class="fs-3 fw-bold pt-0 mt-0">Volunteer</p>
                </div>
                <div class="card-body">

                    @if($volunteer == '')
                    <form action="{{ route('volunteers.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group mb-4">
                            <label for="organization" class="mb-2">Organization</label>
                            <input type="text" name="organization" id="organization" class="form-control @if($errors->has('organization')) is-invalid @endif">
                            @if($errors->has('organization'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('organization') }}</strong>
                                </span>
                            @endif
                        </div>
                        <div class="form-group mb-4">
                            <label for="volunteer_course" class="mb-2">Volunteer Course</label>
                            <input type="text" name="volunteer_course" id="volunteer_course" class="form-control @if($errors->has('volunteer_course')) is-invalid @endif">
                            @if($errors->has('volunteer_course'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('volunteer_course') }}</strong>
                                </span>
                            @endif
                        </div>
                        <div class="form-group mb-4">
                            <label for="description" class="mb-2">Description</label>
                            <textarea name="description" id="description" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="form-group mb-4">
                            <label for="url" class="mb-2">URL</label>
                            <input type="text" name="url" id="url" class="form-control">
                        </div>
                        <div class="form-group mb-4">
                            <label for="contact_person" class="mb-2">Contact Person</label>
                            <input type="text" name="contact_person" id="contact_person" class="form-control">
                        </div>
                        <div class="form-group mb-4">
                            <label for="contact_phone" class="mb-2">Contact Phone</label>
                            <input type="text" name="contact_phone" id="contact_phone" class="form-control">
                        </div>
                        <div class="form-group mb-4">
                            <label for="contact_email" class="mb-2">Contact Email</label>
                            <input type="email" name="contact_email" id="contact_email" class="form-control">
                        </div>
                        <div class="form-group mb-4">
                            <label for="date_started" class="mb-2">Date Started</label>
                            <input type="date" name="date_started" id="date_started" class="form-control">
                        </div>
                        <div class="form-group mb-4">
                            <label for="date_completed" class="mb-2">Date Completed</label>
                            <input type="date" name="date_completed" id="date_completed" class="form-control">
                        </div>
                        <div class="form-group mb-4" style="display: flex; justify-content: flex-end; margin-top: 1px;">
                            <!-- Inline styling for .submit-button class -->
                            <button type="submit" class="btn btn-primary" style="background-color: #eb5e28; color: white; border-color: #eb5e28; transition: background-color 0.3s, color 0.3s;" onmouseover="this.style.backgroundColor='white'; this.style.color='black';" onmouseout="this.style.backgroundColor='#eb5e28'; this.style.color='white';">Submit</button>
                        </div>
                    </form>

                    @else
                    <form action="{{ route('volunteers.update', $volunteer->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="form-group mb-4">
                            <label for="organization" class="mb-2">Organization</label>
                            <input type="text" name="organization" id="organization" class="form-control @error('organization') is-invalid @enderror" value="{{ old('organization', $volunteer->organization) }}">
                            @error('organization')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group mb-4">
                            <label for="volunteer_course" class="mb-2">Volunteer Course</label>
                            <input type="text" name="volunteer_course" id="volunteer_course" class="form-control @error('volunteer_course') is-invalid @enderror" value="{{ old('volunteer_course', $volunteer->volunteer_course) }}">
                            @error('volunteer_course')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group mb-4">
                            <label for="description" class="mb-2">Description</label>
                            <textarea name="description" id="description" class="form-control" rows="3">{{ old('description', $volunteer->description) }}</textarea>
                        </div>
                        <div class="form-group mb-4">
                            <label for="url" class="mb-2">URL</label>
                            <input type="text" name="url" id="url" class="form-control" value="{{ old('url', $volunteer->url) }}">
                        </div>
                        <div class="form-group mb-4">
                            <label for="contact_person" class="mb-2">Contact Person</label>
                            <input type="text" name="contact_person" id="contact_person" class="form-control" value="{{ old('contact_person', $volunteer->contact_person) }}">
                        </div>
                        <div class="form-group mb-4">
                            <label for="contact_phone" class="mb-2">Contact Phone</label>
                            <input type="text" name="contact_phone" id="contact_phone" class="form-control" value="{{ old('contact_phone', $volunteer->contact_phone) }}">
                        </div>
                        <div class="form-group mb-4">
                            <label for="contact_email" class="mb-2">Contact Email</label>
                            <input type="email" name="contact_email" id="contact_email" class="form-control" value="{{ old('contact_email', $volunteer->contact_email) }}">
                        </div>
                        <div class="form-group mb-4">
                            <label for="date_started" class="mb-2">Date Started</label>
                            <input type="date" name="date_started" id="date_started" class="form-control" value="{{ old('date_started', $volunteer->date_started) }}">
                        </div>
                        <div class="form-group mb-4">
                            <label for="date_completed" class="mb-2">Date Completed</label>
                            <input type="date" name="date_completed" id="date_completed" class="form-control" value="{{ old('date_completed', $volunteer->date_completed) }}">
                        </div>
                        <div class="form-group text-end">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@include('footer')