@extends('layouts.app')

@section('title', 'Service Request Detail - ' . $serviceRequest->sr_number)

@section('content')

    {{-- Fixed Top Action Bar --}}
    <div class="fixed-action-bar d-flex align-items-center justify-content-between shadow-sm">
        <div class="d-flex align-items-center">
            <div class="d-flex flex-column">
                <nav aria-label="breadcrumb" class="mb-0">
                    <ol class="breadcrumb mb-1 p-0 bg-transparent" style="font-size: 0.75rem;">
                        <li class="breadcrumb-item"><a href="{{ route('horeca.index') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('horeca.service-requests.index') }}" class="text-muted">Service Requests</a></li>
                        <li class="breadcrumb-item active text-primary" aria-current="page">{{ $serviceRequest->sr_number }}</li>
                    </ol>
                </nav>
                <div class="fw-bold fixed-nav-title" style="font-size: 1.2rem; line-height: 1;">{{ $serviceRequest->sr_number }}</div>
            </div>
            
            @php
                $statusClass = [
                    'open' => 'badge-blue',
                    'in_progress' => 'badge-info',
                    'resolved' => 'badge-success',
                    'closed' => 'badge-secondary',
                    'cancelled' => 'badge-danger'
                ][$serviceRequest->status] ?? 'badge-secondary';
            @endphp
            <span class="badge {{ $statusClass }} rounded-pill px-4 ms-5 shadow-sm border border-white" style="font-size: 0.8rem;">
                {{ ucfirst(str_replace('_', ' ', $serviceRequest->status)) }}
            </span>

            @if($serviceRequest->status == 'cancelled' && $serviceRequest->cancellation_reason)
                <div class="ms-3 d-flex align-items-center text-danger small">
                    <i class="fa-solid fa-circle-info me-2"></i>
                    <span class="fw-semibold">Reason:</span>
                    <span class="ms-1">{{ $serviceRequest->cancellation_reason }}</span>
                </div>
            @endif
        </div>

        <div class="d-flex align-items-center">
            {{-- Extra Actions on Left --}}
            @can('HoReCa Service Requests update')
                <div class="dropdown d-inline-block mx-1">
                    <i class="fa-solid fa-list-check fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center dropdown-toggle" 
                            id="statusDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Update Status"></i>
                    <div class="dropdown-menu dropdown-menu-right shadow-lg border-0" aria-labelledby="statusDropdown">
                        <h6 class="dropdown-header">Update Status</h6>
                        <form action="{{ route('horeca.service-requests.update', $serviceRequest->id) }}" method="POST">
                            @csrf @method('PUT')
                            {{-- Basic fields to satisfy validation --}}
                            <input type="hidden" name="title" value="{{ $serviceRequest->title }}">
                            <input type="hidden" name="description" value="{{ $serviceRequest->description }}">
                            <input type="hidden" name="category_id" value="{{ $serviceRequest->category_id }}">
                            <input type="hidden" name="outlet_id" value="{{ $serviceRequest->outlet_id }}">
                            <input type="hidden" name="priority" value="{{ $serviceRequest->priority }}">
                            <input type="hidden" name="assigned_to" value="{{ $serviceRequest->assigned_to }}">
                            
                            <input type="hidden" name="redirect_to_show" value="1">
                            
                            <button name="status" value="in_progress" class="dropdown-item d-flex align-items-center py-2">
                                <i class="fa-solid fa-spinner fa-fw text-info me-3"></i> In Progress
                            </button>
                            <button name="status" value="resolved" class="dropdown-item d-flex align-items-center py-2">
                                <i class="fa-solid fa-check-circle fa-fw text-success me-3"></i> Resolved
                            </button>
                            <button name="status" value="closed" class="dropdown-item d-flex align-items-center py-2">
                                <i class="fa-solid fa-archive fa-fw text-secondary me-3"></i> Closed
                            </button>
                            <div class="dropdown-divider"></div>
                            <button type="button" class="dropdown-item d-flex align-items-center py-2 text-danger" 
                                    data-toggle="modal" data-target="#cancelModal">
                                <i class="fa-solid fa-ban fa-fw me-3"></i> Cancelled
                            </button>
                        </form>
                    </div>
                </div>

                <i id="reassignBtn" class="fa-solid fa-user-gear fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" 
                   data-toggle="modal" data-target="#reassignModal" title="Reassign"></i>
            @endcan

            <i class="fa-solid fa-print fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" 
               onclick="window.print()" title="Print"></i>

            {{-- Standardized 6 Icons --}}
            <a href="{{ route('horeca.service-requests.create') }}" data-toggle="tooltip" title="Add">
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
            </a>

            <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save"></i>

            @can('HoReCa Service Requests update')
                <a href="{{ route('horeca.service-requests.edit', $serviceRequest->id) }}" data-toggle="tooltip" title="Edit">
                    <i class="fa-regular fa-edit fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
                </a>
            @else
                <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit"></i>
            @endcan

            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete"></i>

            <a href="{{ route('horeca.service-requests.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1" 
                    data-toggle="tooltip" title="Close"></i>
            </a>
            
            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns"></i>
        </div>
    </div>

    <div class="row mt-3 mb-5 px-3">
        {{-- Left Column (70%) --}}
        <div class="col-md-8">
            {{-- Section: Request Details --}}
            <div class="card rounded-border shadow-sm border-0 mb-4" style="background: #fff;">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start mb-4">
                        <div>
                            <h4 class="fw-bold mb-1" style="color: #2c3e50;">{{ $serviceRequest->title }}</h4>
                            <div class="text-muted small d-flex align-items-center mt-3">
                                <span class="d-flex align-items-center me-4"><i class="fa-solid fa-tag fa-fw me-2"></i> {{ $serviceRequest->category->name }}</span>
                                <span class="mx-3 text-light opacity-50">|</span>
                                <span class="d-flex align-items-center ms-1"><i class="fa-solid fa-calendar-day fa-fw me-2"></i> Opened {{ $serviceRequest->created_at->format('M d, Y') }}</span>
                            </div>
                        </div>
                        @php
                            $priorityClass = [
                                'low' => 'bg-soft-success text-success',
                                'medium' => 'bg-soft-info text-info',
                                'high' => 'bg-soft-warning text-warning',
                                'critical' => 'bg-soft-danger text-danger'
                            ][$serviceRequest->priority] ?? 'bg-secondary';
                        @endphp
                        <div class="text-end">
                            <span class="badge {{ $priorityClass }} px-3 py-2" style="font-size: 0.75rem;">
                                <i class="fa-solid fa-tower-broadcast me-2"></i> {{ strtoupper($serviceRequest->priority) }}
                            </span>
                        </div>
                    </div>

                    <div class="mb-0">
                        <label class="section-label mb-2 d-block">Request Description</label>
                        <div class="description-box p-3 bg-light rounded-3 text-dark" style="white-space: pre-wrap; line-height: 1.6; border: 1px solid #edf2f7;">{{ $serviceRequest->description }}</div>
                    </div>
                </div>
            </div>

            {{-- Section: Activity Log --}}
            <div class="card rounded-border shadow-sm border-0" style="background: #fff;">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4 d-flex align-items-center" style="color: #4E5E7A;">
                        <i class="fa-solid fa-clock-rotate-left fa-fw text-primary me-3"></i> Activity Log
                    </h5>
                    
                    <div class="activity-timeline-container ps-4 py-2">
                        <div class="activity-item d-flex pb-4">
                            <div class="activity-marker shadow-sm bg-primary"></div>
                            <div class="activity-content">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="fw-bold text-dark">{{ $serviceRequest->creator->name ?? 'System' }}</span>
                                    <span class="text-muted smaller">{{ $serviceRequest->created_at->format('M d, Y H:i') }}</span>
                                </div>
                                <div class="text-muted">Created the service request.</div>
                            </div>
                        </div>

                        @forelse($serviceRequest->activities as $activity)
                            <div class="activity-item d-flex pb-4">
                                <div class="activity-marker shadow-sm {{ $activity->action_type == 'status_change' ? 'bg-info' : 'bg-secondary' }}"></div>
                                <div class="activity-content">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <span class="fw-bold text-dark">{{ $activity->user->name ?? 'User' }}</span>
                                        <span class="text-muted smaller">{{ $activity->created_at->format('M d, Y H:i') }}</span>
                                    </div>
                                    <div class="text-dark">
                                        @if($activity->action_type == 'status_change')
                                            Changed status from <span class="badge bg-soft-dark text-dark">{{ ucfirst($activity->old_value) }}</span> to <span class="badge {{ $statusClass }}">{{ ucfirst($activity->new_value) }}</span>
                                            @if($activity->comment && $activity->comment != 'Status updated.')
                                                <div class="small mt-2 text-muted border-start border-2 ps-2">
                                                    {{ $activity->comment }}
                                                </div>
                                            @endif
                                        @elseif($activity->action_type == 'comment')
                                            Added a comment:
                                            <div class="p-3 bg-light rounded-3 mt-2 border-start border-4 border-primary">
                                                {{ $activity->comment }}
                                            </div>
                                        @elseif($activity->action_type == 'reassignment')
                                            Reassigned the request to <span class="fw-bold">{{ $activity->new_value }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            {{-- No extra activities --}}
                        @endforelse
                    </div>

                    {{-- Add Comment Section --}}
                    <div class="mt-4 pt-4 border-top">
                        <label class="section-label mb-2 d-block">Add Comment</label>
                        <form action="{{ route('horeca.service-requests.add-comment', $serviceRequest->id) }}" method="POST">
                            @csrf
                            <div class="d-flex align-items-start gap-3">
                                <div class="avatar-xs flex-shrink-0">
                                    <span class="avatar-title rounded-circle bg-soft-info text-info">
                                        {{ substr(auth()->user()->name, 0, 1) }}
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <textarea name="comment" class="form-control mb-3 border-light shadow-sm" rows="3" 
                                              style="background: #fcfcfc;" placeholder="Write your message or update here..." required></textarea>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="text-muted smaller d-flex align-items-center gap-2">
                                            <i class="fa-solid fa-paperclip"></i> <span>Attach Files</span>
                                        </div>
                                        <button type="submit" class="btn btn-primary btn-sm px-4 rounded-pill shadow-sm d-flex align-items-center gap-2">
                                            <i class="fa-regular fa-paper-plane"></i> <span>Submit Update</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Column (30%) --}}
        <div class="col-md-4">
            {{-- Section: Status & Assignment --}}
            <div class="card rounded-border shadow-sm border-0 mb-4" style="background: #fff; border-top: 4px solid #3498db !important;">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4" style="color: #4E5E7A;">Assignment</h5>
                    
                    <div class="assignment-card border rounded-4 p-3 mb-4 bg-light bg-opacity-50">
                        <label class="section-label mb-2 d-block text-muted smaller text-uppercase">Currently Assigned To</label>
                        @if($serviceRequest->assignee)
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm me-3 shadow-sm">
                                    <span class="avatar-title rounded-circle bg-soft-success text-success fw-bold" style="font-size: 1.1rem;">
                                        {{ substr($serviceRequest->assignee->name, 0, 1) }}
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-bold text-dark fs-5">{{ $serviceRequest->assignee->name }}</div>
                                    <div class="text-muted smaller">
                                        <i class="fa-solid fa-envelope me-2"></i> {{ $serviceRequest->assignee->email ?? 'no-email@example.com' }}
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-outline-primary btn-sm w-100 rounded-pill mt-3" data-toggle="modal" data-target="#reassignModal">
                                Reassign User
                            </button>
                        @else
                            <div class="py-3 text-center">
                                <div class="avatar-sm mx-auto mb-2 border border-dashed rounded-circle d-flex align-items-center justify-content-center bg-white">
                                    <i class="fa-solid fa-user-plus text-muted"></i>
                                </div>
                                <span class="text-muted d-block mb-3">No user assigned yet</span>
                                <button class="btn btn-primary btn-sm w-100 rounded-pill shadow-sm" data-toggle="modal" data-target="#reassignModal">
                                    Assign Request
                                </button>
                            </div>
                        @endif
                    </div>

                    <div class="mb-0">
                        <label class="section-label mb-3 d-block text-muted smaller text-uppercase">Request Details</label>
                        <div class="d-flex flex-column gap-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted small">Reference #</span>
                                <span class="fw-bold text-dark">{{ $serviceRequest->sr_number }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted small">Created Date</span>
                                <span class="fw-bold text-dark">{{ $serviceRequest->created_at->format('M d, Y') }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted small">Response Target</span>
                                <span class="fw-bold text-dark">{{ $serviceRequest->category->sla_hours }} Hours SLA</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Section: Timeline & SLA --}}
            <div class="card rounded-border shadow-sm border-0 mb-4" style="background: #fff;">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4" style="color: #4E5E7A;">SLA & Resolution</h5>
                    
                    <div class="deadline-tracker p-3 rounded-4 mb-4 {{ $serviceRequest->sla_due_date < now() && !in_array($serviceRequest->status, ['resolved', 'closed']) ? 'bg-soft-danger border border-danger' : 'bg-soft-warning border border-warning' }}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-bold smaller text-uppercase">SLA Deadline</span>
                            <i class="fa-solid fa-clock shadow-sm p-2 rounded-circle bg-white {{ $serviceRequest->sla_due_date < now() ? 'text-danger' : 'text-warning' }}"></i>
                        </div>
                        <div class="fs-4 fw-bold text-dark mb-1">{{ $serviceRequest->sla_due_date->format('M d, H:i') }}</div>
                        
                        @php $isPast = $serviceRequest->sla_due_date < now() && !in_array($serviceRequest->status, ['resolved', 'closed']); @endphp
                        
                        @if($isPast)
                            <div class="badge bg-danger rounded-pill px-3 py-1 shadow-sm">
                                <i class="fa-solid fa-triangle-exclamation me-2"></i> BREACHED: {{ $serviceRequest->sla_due_date->diffForHumans() }}
                            </div>
                        @elseif(in_array($serviceRequest->status, ['resolved', 'closed']))
                            <div class="badge bg-success rounded-pill px-3 py-1 shadow-sm">
                                <i class="fa-solid fa-circle-check me-2"></i> MET ON TIME
                            </div>
                        @else
                            <div class="text-dark small fw-semibold">
                                <i class="fa-solid fa-hourglass-half me-2"></i> Expires {{ $serviceRequest->sla_due_date->diffForHumans() }}
                            </div>
                        @endif
                    </div>

                    <div class="list-group list-group-flush border-top pt-3">
                        @if($serviceRequest->resolved_date)
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-muted small">Resolved Date</span>
                                <span class="fw-bold text-success">{{ $serviceRequest->resolved_date->format('M d, Y H:i') }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted small">Total Time</span>
                                <span class="fw-bold text-dark">{{ $serviceRequest->created_at->diffForHumans($serviceRequest->resolved_date, true) }}</span>
                            </div>
                        @elseif($serviceRequest->closed_date)
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted small">Closed Date</span>
                                <span class="fw-bold text-secondary">{{ $serviceRequest->closed_date->format('M d, Y H:i') }}</span>
                            </div>
                        @else
                            <div class="text-center text-muted italic smaller py-2">
                                <i class="fa-solid fa-info-circle me-2"></i> Awaiting resolution...
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Section: Context --}}
            <div class="card rounded-border shadow-sm border-0 mb-4" style="background: #fff;">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4" style="color: #4E5E7A;">Context</h5>
                    
                    <div class="mb-4">
                        <label class="section-label mb-2 d-block text-muted smaller text-uppercase">Linked Outlet</label>
                        <a href="{{ route('horeca.outlets.edit', $serviceRequest->outlet_id) }}" class="fw-bold text-primary d-flex align-items-center mb-1">
                            <i class="fa-solid fa-store fa-fw me-3"></i> <span>{{ $serviceRequest->outlet->name }}</span>
                        </a>
                        <small class="text-muted d-block ps-4 ms-2">{{ $serviceRequest->outlet->address }}</small>
                    </div>

                    <div class="mb-4">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa-solid fa-user-tag fa-fw me-3 text-muted"></i>
                            <span class="text-muted smaller text-uppercase section-label mb-0">Reporting User</span>
                        </div>
                        <div class="d-flex align-items-center ms-4 ps-2">
                            <div class="avatar-xs flex-shrink-0">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                    {{ substr($serviceRequest->creator->name ?? 'S', 0, 1) }}
                                </span>
                            </div>
                            <span class="fw-bold text-dark">{{ $serviceRequest->creator->name ?? 'System' }}</span>
                        </div>
                    </div>

                    <div class="mb-0">
                        <label class="section-label mb-2 d-block text-muted smaller text-uppercase">Workflow Context</label>
                        @if($serviceRequest->workflow_id)
                            <div class="text-dark fw-bold d-flex align-items-center">
                                <i class="fa-solid fa-diagram-project fa-fw text-info me-3"></i> <span>{{ $serviceRequest->workflow->name }}</span>
                            </div>
                            <small class="text-muted d-block mt-1 ps-4 ms-3">Step: {{ $serviceRequest->step->name ?? 'N/A' }}</small>
                        @else
                            <div class="text-muted fw-normal d-flex align-items-center">
                                <i class="fa-solid fa-user-pen fa-fw me-3"></i> <span>Manual Request</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Section: Context & Metadata --}}
            <div class="card rounded-border shadow-sm border-0" style="background: #fff;">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4" style="color: #4E5E7A;">Attachments</h5>
                    <div class="py-3 text-center border border-dashed rounded-4 bg-light">
                        <i class="fa-regular fa-folder-open fa-2x text-muted mb-2"></i>
                        <p class="text-muted small mb-0">No files attached to this request</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Reassign Modal --}}
    <div class="modal fade" id="reassignModal" tabindex="-1" role="dialog" aria-labelledby="reassignModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('horeca.service-requests.update', $serviceRequest->id) }}" method="POST">
                    @csrf @method('PUT')
                    {{-- Fixed fields --}}
                    <input type="hidden" name="title" value="{{ $serviceRequest->title }}">
                    <input type="hidden" name="description" value="{{ $serviceRequest->description }}">
                    <input type="hidden" name="category_id" value="{{ $serviceRequest->category_id }}">
                    <input type="hidden" name="status" value="{{ $serviceRequest->status }}">
                    <input type="hidden" name="priority" value="{{ $serviceRequest->priority }}">
                    <input type="hidden" name="outlet_id" value="{{ $serviceRequest->outlet_id }}">
                    <input type="hidden" name="redirect_to_show" value="1">

                    <div class="modal-header">
                        <h5 class="modal-title" id="reassignModalLabel">Reassign Service Request</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted small mb-4">Select a user to handle this request. An automated notification will be sent to the selected person.</p>
                        <div class="form-group">
                            <label>Select User</label>
                            <select name="assigned_to" class="form-control select2-modal" style="width: 100%;">
                                <option value="">Select a user...</option>
                                @foreach(\App\Models\User::all() as $user)
                                    <option value="{{ $user->id }}" {{ $serviceRequest->assigned_to == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Confirm Reassignment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Cancellation Modal --}}
    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('horeca.service-requests.update', $serviceRequest->id) }}" method="POST">
                    @csrf @method('PUT')
                    {{-- Fixed fields --}}
                    <input type="hidden" name="title" value="{{ $serviceRequest->title }}">
                    <input type="hidden" name="description" value="{{ $serviceRequest->description }}">
                    <input type="hidden" name="category_id" value="{{ $serviceRequest->category_id }}">
                    <input type="hidden" name="status" value="cancelled">
                    <input type="hidden" name="priority" value="{{ $serviceRequest->priority }}">
                    <input type="hidden" name="outlet_id" value="{{ $serviceRequest->outlet_id }}">
                    <input type="hidden" name="assigned_to" value="{{ $serviceRequest->assigned_to }}">
                    <input type="hidden" name="redirect_to_show" value="1">

                    <div class="modal-header">
                        <h5 class="modal-title" id="cancelModalLabel">Cancel Service Request</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <i class="fa-solid fa-triangle-exclamation me-2"></i>
                            This action will cancel the request. Please provide a reason below.
                        </div>
                        <div class="form-group">
                            <label>Cancellation Reason <span class="text-danger">*</span></label>
                            <textarea name="cancellation_reason" class="form-control" rows="4" 
                                      placeholder="Explain why this request is being cancelled..." required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Go Back</button>
                        <button type="submit" class="btn btn-danger">Confirm Cancellation</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('js')
<script>
    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2-modal').select2({
                dropdownParent: $('#reassignModal'),
                theme: 'bootstrap-5'
            });
        }
    });
</script>
<style>
    /* Premium Styling Overrides */
    .fixed-action-bar {
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        padding: 0.75rem 1.5rem;
        z-index: 100;
        margin-bottom: 1.5rem;
    }

    .dropdown-menu {
        z-index: 1100 !important;
    }
    
    .section-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        color: #94a3b8;
    }

    .card { transition: all 0.3s cubic-bezier(.25,.8,.25,1); }
    .card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

    .rounded-border { border-radius: 16px !important; }

    /* Timeline Improvements */
    .activity-timeline-container { position: relative; }
    .activity-timeline-container::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #f1f5f9;
        margin-left: -1px;
    }
    .activity-marker {
        position: absolute; left: -1px; width: 12px; height: 12px; border-radius: 50%;
        border: 3px solid #fff; transform: translateX(-50%); z-index: 1;
    }
    .activity-content { flex-grow: 1; position: relative; top: -4px; padding-left: 1rem; }
    
    .smaller { font-size: 0.75rem; }
    
    /* Avatars */
    .avatar-xs { height: 2rem; width: 2rem; }
    .avatar-sm { height: 3.5rem; width: 3.5rem; }
    .avatar-title {
        align-items: center; display: flex; font-weight: 500; height: 100%; justify-content: center; width: 100%;
        font-size: 0.85rem;
    }

    /* Colors */
    .bg-soft-primary { background-color: rgba(69, 122, 218, 0.1); }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    .bg-soft-info { background-color: rgba(59, 130, 246, 0.1); }
    .bg-soft-warning { background-color: rgba(245, 158, 11, 0.1); }
    .bg-soft-danger { background-color: rgba(239, 68, 68, 0.1); }
    .bg-soft-secondary { background-color: rgba(148, 163, 184, 0.1); }
    .bg-soft-dark { background-color: rgba(30, 41, 59, 0.1); }

    .badge-blue { background: #3b82f6; color: white; }

    /* Button Consistency (updated to match other pages) */
    .fixed-nav-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        background-color: #F6F6F6 !important;
        color: #000000 !important;
        border-radius: 50% !important;
        border: none !important;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 4px;
        transition: all 0.2s;
    }
    .fixed-nav-btn:hover { 
        opacity: 0.85 !important; 
        transform: scale(1.05) !important;
        background-color: #F6F6F6 !important;
        color: #000000 !important;
    }
    
    .dropdown-toggle::after { display: none; }

    @media print {
        .fixed-action-bar, .left-sidenav, .top-header, footer, .btn, .fixed-nav-btn { display: none !important; }
        .main-content { margin: 0 !important; padding: 0 !important; }
        body { background: white; }
    }
</style>
@endpush