@extends('dashboard.base')

@section('css')
    <link href="{{ asset('css/cropper.css') }}" rel="stylesheet">
@endsection

@section('content')


<div class="container-fluid">
<script>
    setTimeout(function() {
        document.querySelector('.alert-success')?.remove();
    }, 5000); // Removes the alert after 5 seconds
</script>
@if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
  <div class="fade-in">
    <div class="row">
      <div class="col-sm-12">
        <div class="card " >
          <div class="card-header" style="">
            <h4>Insititution Training Request</h4>
        </div>
            <form action="{{ route('training-request.store') }}" method="POST" enctype="multipart/form-data" class="inner-space">
                @csrf
                  <!-- Firstname and Lastname -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="firstname" class="form-label">Firstname</label>
                    <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Firstname" required>
                </div>
                <div class="col-md-6">
                    <label for="lastname" class="form-label">Lastname</label>
                    <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Lastname" required>
                </div>
            </div>

            <!-- Email and Phone number -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="email" class="form-label">Email:</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
                </div>
                <div class="col-md-6">
                    <label for="phone" class="form-label">Phone number:</label>
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="Telephone" required>
                </div>
            </div>

            <!-- Title -->
            <div class="mb-3">
                <label for="title" class="form-label">Title:</label>
                <input type="text" class="form-control" id="title" name="title" placeholder="Title" required>
            </div>

            <!-- Company Name -->
            <div class="mb-3">
                <label for="companyName" class="form-label">Company Name:</label>
                <input type="text" class="form-control" id="companyName" name="company_name" placeholder="Company Name" required>
            </div>

            <!-- Location, City, and Country -->
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="location" class="form-label">Location:</label>
                    <input type="text" class="form-control" id="location" name="location" placeholder="Location" required>
                </div>
                <div class="col-md-4">
                    <label for="city" class="form-label">City:</label>
                    <input type="text" class="form-control" id="city" name="city" placeholder="City" required>
                </div>
                <div class="col-md-4">
                    <label for="country" class="form-label">Country:</label>
                    <input type="text" class="form-control" id="country" name="country" placeholder="Country" required>
                </div>
            </div>

            <!-- Description -->
            <div class="mb-3">
                <label for="description" class="form-label">Description:</label>
                <textarea class="form-control" id="description" name="description" rows="2" placeholder="Description of the Training being requested" required></textarea>
            </div>

            <!-- Training Format -->
            <div class="mb-3">
                <label for="trainingFormat" class="form-label">Training Format:</label>
                <select class="form-selec form-control" id="trainingFormat" name="training_format" required>
                    <option value="" disabled selected>Select Training Format</option>
                    <option value="online">Online</option>
                    <option value="in-person">In-Person</option>
                    <option value="hybrid">Hybrid</option>
                </select>
            </div>

            <!-- Buttons -->
            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-warning me-2">Submit Request</button>
                <button type="reset" class="btn btn-dark">Cancel</button>
            </div>
                </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<style>
    .btn-orange {
        background-color: #f77f00;
        color: #fff;
        border: none;
    }

    .btn-orange:hover {
        background-color: #e76f00;
    }
    .inner-space {
        padding-right: 20px;
        padding-left: 20px;
    }
    

</style>

@endsection

@section('javascript')
<script src="{{ asset('js/axios.min.js') }}"></script> 
<script src="{{ asset('js/cropper.js') }}"></script>
<script src="{{ asset('js/media.js') }}"></script> 
<script src="{{ asset('js/media-cropp.js') }}"></script>

@endsection