@extends('layouts.sidenav')

@section('title', 'เพิ่มTrick&Trip')
<link rel="icon" href="{{ asset('Bg/logoCRG.png') }}" type="image/png">
@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
    body {
        padding: 20px;
    }
    .form-container {
        max-width: 800px;
        margin: 0;
    }


</style>

<div class="content" id="mainContent">
    <div class="container form-container">
          <h2 class="mb-4">เพิ่มTrick&Trip</h2>
          <form action="submit_form.php" method="POST" enctype="multipart/form-data">
              <!-- Category -->
              <div class="mb-3">
                  <label for="category" class="form-label">Category</label>
                  <select class="form-select" id="category" name="category" required>
                      <option value="" disabled selected>เลือก Category</option>
                      <option value="Technology">Technology</option>
                      <option value="Science">Science</option>
                      <option value="Art">Art</option>
                  </select>
              </div>
  
              <!-- Title -->
              <div class="mb-3">
                  <label for="title" class="form-label">Title</label>
                  <input type="text" class="form-control" id="title" name="title" required>
              </div>
  
              <!-- Description -->
              <div class="mb-3">
                  <label for="description" class="form-label">Description</label>
                  <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
              </div>
              <div class="mb-3 text-primary">
                <label for="Schedules" class="form-label"><img src="{{ asset('icon/icon-schedule.png') }}" alt="icon" width="20" height="20"> Schedules</label>
            </div>
              <!-- Schedules (Start Date and End Date in the same row) -->
              <div class="row mb-3">
                  <div class="col-md-6">
                      <label for="start_date" class="form-label">Start Date</label>
                      <input type="date" class="form-control" id="start_date" name="start_date" required>
                  </div>
                  <div class="col-md-6">
                      <label for="end_date" class="form-label">End Date</label>
                      <input type="date" class="form-control" id="end_date" name="end_date" required>
                  </div>
              </div>
  
              <!-- Upload File Image -->
              <div class="mb-3 text-primary">
                  <label for="upload_image" class="form-label"><img src="{{ asset('icon/icon-uploadblue.png') }}" alt="icon" width="20" height="20"> Upload Image</label>
              </div>
  
              <!-- Cover Image -->
              <div class="mb-3">
                  <label for="cover_image" class="form-label">Cover Image</label>
                  <input type="file" class="form-control" id="cover_image" name="cover_image" accept="image/*">
              </div>
  
              <!-- Image Files -->
              <div class="mb-3">
                  <label for="image_files" class="form-label">Image Files</label>
                  <input type="file" class="form-control" id="image_files" name="image_files[]" accept="image/*" multiple>
              </div>
  
              <!-- Submit and Reset Buttons -->
              <div class="d-flex justify-content-between">
                  <button type="reset" class="btn btn-light w-50">Reset</button>
                  <button type="submit" class="btn btn-primary w-50">Submit</button>
              </div>
          </form>
      </div>
    </div>
@endsection