@extends('dashboard.layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-lg border-0 rounded-3">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <div><i class="fas fa-eye me-2"></i>Request Details</div>
            {{-- @can('hr_request_update_status')       --}}
            @if (Auth::user()->staff->id ==  $request->request_for)
                <div>
                    <label for="">Status</label>
                    <select 
                        name="status" 
                        id="status-select" 
                        class="form-select rounded-3 select2" 
                        data-request-id="{{ $request->id }}"
                    >
                        <option value="pending" {{ $request->status == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="in_progress" {{ $request->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                        <option value="rejected" {{ $request->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                        <option value="done" {{ $request->status == 'done' ? 'selected' : '' }}>Done</option>
                    </select>
                    <div id="rejection-reason-wrapper" style="display: none;" class="mt-2">
                        <label for="rejection-reason">Reason for rejection</label>
                        <input 
                            type="text" 
                            id="rejection-reason" 
                            class="form-control rounded-3" 
                            placeholder="Enter reason..."
                        >
                    </div>
                </div>
            @endif

            {{-- @endcan --}}
        </div>
        <div class="card-body">
            {{-- Alerts --}}
            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
            @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
            {{-- Request Info --}}
            <div class="row mb-4">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Requisition Type</label>
                    <p>{{ $request->type->name ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Priority</label>
                    <p class="text-capitalize">{{ $request->priority ?? ''}}</p>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold">Deadline</label>
                    <p>{{ $request->deadline ? $request->deadline : 'N/A' }}</p>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold">Task Owner</label>
                    <p>{{ $request->creator->first_name ?? '' }} {{ $request->creator->last_name ?? ''}}</p>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Task for</label>
                    <p>{{ $request->requestFor->first_name ?? '' }}  {{ $request->requestFor->last_name ?? ''}}</p>
                </div>
                
                @if($request->student_id != null)
                @php
                    $student = \DB::table('sm_students')
                        ->where('id', $request->student_id)
                        ->select('id', 'student_code', 'full_name', 'first_name', 'last_name')
                        ->first();
                @endphp
                <div class="col-md-6">
                    <label class="form-label fw-bold">Student Name</label>
                    <p>{{ $student->first_name ?? ''}} {{$student->last_name ?? '' }}</p>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Student Code</label>
                    <p>{{ $student->student_code ?? '' }}</p>
                </div>
                @endif
                <div class="col-md-6">
                    <label class="form-label fw-bold">Department</label>
                    <p>{{ $request->department->name ?? '' }}</p>
                </div>


                @if($request->requestRecruitments->isNotEmpty())

                    <div class="card shadow-lg border-0 rounded-3 mt-3" id="recruitment_field" >
                        <div class="card-header">
                            <div class="mb-0">Recruitment Details</div>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">

                                <!-- Job Title -->
                                <div class="col-md-6">
                                    <div class="fw-bold">Job Title</div>
                                    <div>{{ old('job_title_id', optional($request->requestRecruitments->first())->jobTitles->name ?? '') }}</div>
                                </div>

                                <!-- Number of Vacancies -->
                                <div class="col-md-6">
                                    <div class="fw-bold">Number of Vacancies</div>
                                    <div>{{ old('number_of_vacancies', optional($request->requestRecruitments->first())->number_of_vacancies) }}</div>
                                </div>

                                <!-- Expected Start Date -->
                                <div class="col-md-6">
                                    <div class="fw-bold">Expected Start Date</div>
                                    <div>{{ old('expected_start_date', optional($request->requestRecruitments->first())->expected_start_date) }}</div>

                                </div>

                                <!-- Role Description -->
                                <div class="col-md-6">
                                    <div class="fw-bold">Role Description</div>
                                    <div>{{ old('role_description', optional($request->requestRecruitments->first())->role_description) }}</div>
                                    
                                </div>

                                <!-- Required Qualifications & Skills -->
                                <div class="col-md-12">
                                    <div class="fw-bold">Required Qualifications & Skills</div>
                                    <div>{{ old('required_qualifications_skills', optional($request->requestRecruitments->first())->required_qualifications_skills) }}</div>
                                </div>

                                <!-- Justification / Reason -->
                                <div class="col-md-12">
                                    <div class="fw-bold">Justification / Reason</div>
                                    <div>{{ old('justification_reason', optional($request->requestRecruitments->first())->justification_reason) }}</div>
                                </div>

                            </div>
                        </div>
                    </div>
                @endif


                @if($request->level_id != null)
                    @php 
                    $level = \DB::table('track_levels')->where('id',$request->level_id)->first();
                    @endphp
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Level</label>
                        <p>{{ $level->name_en }}</p>
                    </div>
                @endif

                <div class="col-md-6">
                    <label class="form-label fw-bold">Date Of Submission</label>
                    <p>{{ $request->created_at }}</p>
                </div>
                <div class="col-md-12 mt-6">
                    <label class="form-label fw-bold">Requisition Details</label>
                    <p>{{ $request->details ?? 'No details provided' }}</p>
                </div>
                <div class="col-md-12 mt-3">
                    <label class="form-label fw-bold">Attached Image</label><br>
                    @if($request->attachments && count($request->attachments) > 0)
                    @foreach($request->attachments as $file)
                    <a href="{{ asset($file->file_path) }}" target="_blank" class="me-2 d-inline-block">
                        <img src="{{ asset($file->file_path) }}"
                            alt="{{ $file->original_name }}"
                            class="img-thumbnail rounded shadow-sm"
                            style="max-height: 150px;">
                    </a>
                    @endforeach
                    @else
                    <p>No Attachment provided</p>
                    @endif
                </div>


            </div>
            {{-- Reply Form --}}
            <div class="mb-5">
                <p><i class="fas fa-reply me-2"></i>Reply</p>
                <form action="{{ route('requests.reply', $request->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <textarea name="reply_text" class="form-control" rows="3" placeholder="Write your reply..." required></textarea>
                    </div>

                    {{-- Attachment --}}
                    <div class="mb-3">
                        <label class="form-label">Attachments</label>
                        <div class="border rounded p-3 text-center bg-light" style="border-style: dashed;">
                            <input type="file" name="attachment" class="form-control mb-2"
                                accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                            <small class="text-muted">Drag and drop files here or click to upload</small>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-paper-plane me-2"></i>Send
                    </button>
                    <a href="{{ route('requests.index') }}" class="btn btn-secondary ms-2">
                        Cancel
                    </a>
                </form>
            </div>


            {{-- Reply History --}}
            <div>
                <p><i class="fas fa-history me-2"></i>Reply History</p>
                @if($request->replies->count() > 0)
                <ul class="list-group mt-3">
                    @foreach($request->replies as $reply)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small">{{ $reply->created_at->format('h:i A - M d, Y') }}</div>
                            <div>{{ $reply->reply_text }}</div>
                            @if($reply->attachments && count($reply->attachments) > 0)
                            <div class="mt-2">
                                @foreach($reply->attachments as $file)
                                    @php
                                        $extension = pathinfo($file->file_path, PATHINFO_EXTENSION);
                                        $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
                                    @endphp
                                
                                    @if(in_array(strtolower($extension), $imageExtensions))
                                        <a href="{{ asset($file->file_path) }}" target="_blank" class="me-2">
                                            <img src="{{ asset($file->file_path) }}" 
                                                 alt="{{ $file->original_name }}" 
                                                 style="max-height: 100px; border-radius: 8px; margin:5px;">
                                        </a>
                                    @else
                                        <a href="{{ asset($file->file_path) }}" target="_blank" class="me-2">
                                            <i class="fas fa-paperclip"></i> {{ $file->original_name }}
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                            @endif
                        </div>
                        <div class="text-end">
                            <span class="fw-bold">By: {{ $reply->staff->first_name . ' ' . $reply->staff->last_name }}</span>
                            {{-- <form action="{{ route('requests.reply.delete', $reply->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger ms-2" onclick="return confirm('Delete this reply?')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form> --}}
                        </div>
                    </li>
                    @endforeach
                </ul>
                @else
                <p class="text-muted">No replies yet.</p>
                @endif
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
       <script>
        document.addEventListener('DOMContentLoaded', function () {
            const select = document.getElementById('status-select');
            const reasonWrapper = document.getElementById('rejection-reason-wrapper');
            const reasonInput = document.getElementById('rejection-reason');
            const oldReason = select.dataset.reason;

            if (select.value === 'rejected') {
        reasonWrapper.style.display = 'block';
        if (oldReason) {
            reasonInput.value = oldReason;
        }
    }

            select.addEventListener('change', function () {
                let requestId = this.dataset.requestId;
                let newStatus = this.value;

                if (newStatus === 'rejected') {
                    reasonWrapper.style.display = 'block';
                    reasonInput.focus();
                } else {
                    reasonWrapper.style.display = 'none';
                    updateStatus(requestId, newStatus, null); 
                }
            });

            reasonInput.addEventListener('blur', function (e) {
                let requestId = select.dataset.requestId;
                let reason = reasonInput.value.trim();
                let newStatus = 'rejected';
                if (reason === '') return;
                updateStatus(requestId, newStatus, reason);
            });


            function updateStatus(requestId, status, reason) {
 

                fetch("{{ route('hr-request.update-status') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        id: requestId,
                        status: status,
                        reason: reason
                    })
                })

                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        console.log("Status updated successfully");
                    } else {
                        console.error("Failed to update");
                    }
                })
                .catch(err => console.error(err));
            }
        });
    </script>

@endpush