@extends('layouts.page') <!-- This tells Laravel that 'page.blade.php' is the layout to extend -->
@section('title', 'Issues') <!-- Set the page title dynamically -->
<link rel="stylesheet" href="{{ asset('asset/css/style.css') }}">
@section('content')
    @php
        $pageName = 'Issues | Post'; // Set the dynamic page name
    @endphp
        <!-- Form Section -->
        <div class="form-section">
            <form id="preloader" action="{{ route('issue.store') }}" method="POST" enctype="multipart/form-data"> <!-- Assuming a POST route for form submission -->
                @csrf
                <div class="row">
                    <!-- Left Section -->
                    <div class="col-md-8">
                        <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>
                        <div class="mb-3">
                            <label for="privacy" class="form-label">*Privacy:</label>
                            <select class="form-select" id="privacy" name="privacy" required>
                                <option value="Public">Public</option>
                                <option value="Private">Private</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">*Description:</label>
                            <textarea class="form-control" id="description" name="description" rows="8" placeholder="Describe the issue here..." required></textarea>
                            <small id="wordCount" class="form-text text-muted">1000 words remaining</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="attachment">Attachments:
                                <br>
                                <span class="text-muted fw-lighter">
                                    <i class="bi bi-info-circle" data-bs-toggle="tooltip" title="JPEG, PNG, JPG | Max 2MB"></i>
                                    JPEG, PNG, JPG, GIF, SVG, TXT, ZIP, RAR, CSV, XLSX, MP4, PDF | Max 10MB
                                </span>
                            </label>
                            <input class="form-control" type="file" name="attachment[]" id="attachment" multiple>

                            {{-- Show general error for the attachment field --}}
                            @error('attachment')
                            <div style="color: tomato">{{ $message }}</div>
                            @enderror

                            {{-- Show specific errors for each file --}}
                            @if ($errors->has('attachment.*'))
                                @foreach ($errors->get('attachment.*') as $messages)
                                    @foreach ($messages as $message)
                                        <div style="color: tomato">{{ $message }}</div>
                                    @endforeach
                                @endforeach
                            @endif
                            {{-- Error message container for JavaScript --}}
                            <div id="js-error-message" style="color: tomato;"></div>
                        </div>
                    </div>
                    <!-- Right Section -->
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="type" class="form-label">*Issue Type:</label>
                            <select class="form-select" id="type" name="type" required onchange="toggleFields()">
                                <option value="">Select</option>
                                <option value="software">Software</option>
                                <option value="hardware">Hardware</option>
                                <option value="technical">Technical</option>
                            </select>
                        </div>
                        @if ($softwareList->isNotEmpty())
                            <!-- Subtype Dropdown (For Software - Initially Hidden) -->
                            <div class="mb-3" id="subtype-container" style="display: none;">
                                <label for="sub_type" class="form-label">*Software Subtype:</label>
                                <select class="form-select" id="sub_type" name="sub_type" required>
                                    <option value="">Select</option>
                                    @foreach ($softwareList as $software)
                                        <option value="{{ $software }}">{{ ucfirst($software) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        @if ($hardwareList->isNotEmpty())
                            <!-- Device Type (For Hardware - Initially Hidden) -->
                            <div class="mb-3" id="device-type-container" style="display: none;">
                                <label for="device_type" class="form-label">*Device Type:</label>
                                <select class="form-select" id="device_type" name="device_type" required>
                                    <option value="">Select</option>
                                    @foreach ($hardwareList as $hardware)
                                        <option value="{{ $hardware }}">{{ ucfirst($hardware) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- Device Serial No. (For Hardware - Initially Hidden) -->
                            <div class="mb-3" id="device-serial-container" style="display: none;">
                                <label for="device_sl" class="form-label">*Device Serial No.:</label>
                                <input type="text" class="form-control" id="device_sl" name="device_sl" required placeholder="Enter Device Serial No.">
                            </div>
                        @endif
                        <div class="mb-3">
                            <label class="form-label">*Is it Urgent:</label>
                            <div>
                                <input type="radio" id="urgencyNo" name="urgency" value="0" checked>
                                <label for="urgencyNo" class="form-check-label me-3">No</label>
                                <input type="radio" id="urgencyYes" name="urgency" value="1">
                                <label for="urgencyYes" class="form-check-label">Yes</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="copied" class="form-label">Copied:</label>
                            <select class="form-control" id="copied" name="copied[]" multiple style="display: none;">
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="assignee" class="form-label">Assignee:</label>
                            <input type="text" class="form-control" id="assignee" name="assignee_display" readonly>
                            <input type="hidden" id="assignee_id" name="assignee"> <!-- Hidden field for user ID -->
                        </div>
                    </div>
                </div>
                <!-- Action Buttons -->
                <div class="d-flex justify-content-end mt-3">
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
            @include('layouts.preloader')
        </div>
@endsection
<div id="loading-screen" class="fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center hidden z-50">
    <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-white"></div>
</div>

@push('scripts')
    <!-- Select2 JS CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script>
        const users = @json($users);
        const roleUsers = @json($roleUsers);
    </script>
    <script src="{{ asset('asset/js/issue-create.js') }}"></script>
@endpush