@extends('layouts.app')

@section('content')

<x-app-layout>
    @section('content')
    <style>
        .btn-primary {
    background-color: #007bff; /* Adjust color as needed */
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
    border-color: #004085;
}

        </style>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <div class="max-w-lg mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
        <h1 class="text-2xl font-bold mb-6">Edit Student</h1>

        <form action="{{ route('admin.students.update', $student->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="mb-4">
                <label for="name" class="block text-gray-700 text-sm font-medium">Name</label>
                <input type="text" name="name" id="name" value="{{ $student->name }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
            </div>

            <div class="mb-4">
                <label for="email" class="block text-gray-700 text-sm font-medium">Email</label>
                <input type="email" name="email" id="email" value="{{ $student->email }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
            </div>
            <div class="mb-4">
                <label for="university_name">University Name</label>
                <input type="text" name="university_name" id="university_name" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required value="{{ $student->university_name }}">
            </div>

            <div class="mb-4">
                <label for="photo" class="block text-gray-700 text-sm font-medium">Photo</label>
                <input type="file" name="photo" id="photo" class="mt-1 block w-full text-sm text-gray-500 border-gray-300 rounded-md focus:border-indigo-500 focus:ring-indigo-500" >
                @if ($student->photo)
                <img src="{{ asset('storage/' . $student->photo) }}" alt="Student Photo" class="img-fluid" style="max-width: 200px;">
            @endif
            </div>

            <div class="mb-4">
                <label for="passport_photo" class="block text-gray-700 text-sm font-medium">Passport Photo</label>
                <input type="file" name="passport_photo" id="passport_photo" class="mt-1 block w-full text-sm text-gray-500 border-gray-300 rounded-md focus:border-indigo-500 focus:ring-indigo-500" >
                @if ($student->passport_photo)
                @php
                    // Get the file extension of the passport photo
                    $fileExtension = pathinfo($student->passport_photo, PATHINFO_EXTENSION);
                @endphp
            
                @if (in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif']))
                    <!-- Display image if the file is an image -->
                    <img src="{{ asset('storage/' . $student->passport_photo) }}" alt="Passport Photo" class="img-fluid" style="max-width: 200px;">
                @else
                <p><a href="{{ asset('storage/' . $student->passport_photo) }}" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Download Passport</a></p>

                    <!-- Display a download button if the file is not an image -->
                    
                @endif
            @endif
            
            </div>

            <!-- Add other fields here -->

            <button type="submit" class="btn-primary  bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg">Add Student</button>
        </form>
    </div>
    @endsection
</x-app-layout>


@endsection