@extends('layouts.appv2')

@section('content')

<div class="row-sm-12">
    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5>Add Repository Item: {{ $employee->employee_first_name }} {{ $employee->employee_last_name }}</h5>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <a href="{{ route('employees.repository', ['employee_id' => $employee->employee_id]) }}"
                        class="btn btn-sm btn-secondary mt-1 mb-1"
                        style="width: 70px; text-align: center; border-radius: 50px;">Back
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body">
            {{-- Flash Message --}}
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Please fix the following errors:</strong>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>

                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

                </div>
                @endif

                <form action="{{ route('employees.repository.store', ['employee_id' => $employee->employee_id]) }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    {{-- Repository Name TextBox --}}
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="repository_name" class="form-label">Repository Name </label>
                            <input type="text" class="form-control @error('repository_name') is-invalid @enderror"
                                id="repository_name" name="repository_name"
                                value="{{ old('repository_name') }}" required
                                placeholder="Enter repository name">
                            @error('repository_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>    
                    </div>

                    {{-- Category Dropdown --}}
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="category_id" class="form-label">Category </label>

                            <select name="category_id" id="category_id"
                                class="form-select @error('category_id') is-invalid @enderror">
                            <option value="">-- Select Category --</option>

                            @foreach ($categories as $category)
                            <option value="{{ $category->category_id }}"
                                {{ old('category_id') == $category->category_id ? 'selected' : '' }}>
                                {{ $category->category_name }}
                            </option>
                            @endforeach
                            </select>

                        @error('category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        </div>
                    </div>

                    {{-- File Attachment --}}
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <label for="repository_file" class="form-label">File Attachment </label>
                            <input type="file" class="form-control @error('repository_file') is-invalid @enderror"
                            id="repository_file" name="repository_file" accept=".pdf, .jpeg, .jpg, .png" required>
                            <div class="form-text">
                                Supported files: PDF, JPG, JPEG, PNG (Max: 10MB)
                            </div>

                            @error('repository_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Submit Button --}}
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
        </div>
    </div>
</div>

<script>
    document.getElementById('repository_file').addEventListener('change', function () {
        const maxSize = 10 * 1024 * 1024;
        if (this.files[0] && this.files[0].size > maxSize) {
            alert('File size is over 10MB. Please choose a smaller file.');
            this.value = '';
        }
    });
</script>

@endsection