@extends('layouts.userapp')

@section('content')

    @php
        use Carbon\Carbon;
    @endphp

    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">PR Claim Details</h5>
            <a href="{{ route('prclaims.index') }}" class="btn btn-light btn-sm">
                <i class="fa fa-arrow-left"></i> Back to List
            </a>
        </div>
        <div class="card-body">
            <div class="row mb-4">
    <div class="col-md-6">
        <h6 class="text-muted">Title</h6>
        <p class="lead">{{ $prClaim->title }}</p>

        <h6 class="text-muted mt-3">Type</h6>
        <p>
            @if($prClaim->claim_type === 'ot')
                <span class="badge badge-primary badge-lg">OT</span>
            @else
                <span class="badge badge-secondary badge-lg">Claim</span>
            @endif
        </p>
    </div>

    <div class="col-md-6">
        <h6 class="text-muted">Status</h6>
        <p>
            @if($prClaim->status == 'pending')
                <span class="badge badge-warning badge-lg">Pending</span>
            @elseif($prClaim->status == 'approved')
                <span class="badge badge-success badge-lg">Approved</span>
            @elseif($prClaim->status == 'rejected')
                <span class="badge badge-danger badge-lg">Rejected</span>
            @elseif($prClaim->status == 'escalated')
                <span class="badge badge-info badge-lg">Escalated</span>
            @endif
        </p>
    </div>
</div>


            <div class="row mb-4">
                <div class="col-md-6">
                    <h6 class="text-muted">Submission Date</h6>
                    <p>{{ Carbon::parse($prClaim->submission_date)->format('d F Y') }}</p>
                </div>
                <div class="col-md-6">
                    <h6 class="text-muted">Submitted By</h6>
                    <p>{{ $prClaim->created_by_name }} <br>
                    <small class="text-muted">{{ $prClaim->created_by_email }}</small></p>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6">
                    <h6 class="text-muted">Sent To</h6>
                    <p>{{ $prClaim->send_to_name }} <br>
                    <small class="text-muted">{{ $prClaim->send_to_email }}</small></p>
                </div>
            </div>

            @if($prClaim->comments)
                <div class="row mb-4">
                    <div class="col-md-12">
                        <h6 class="text-muted">Comments</h6>
                        <div class="card">
                            <div class="card-body bg-light">
                                {{ $prClaim->comments }}
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            @if($prClaim->status == 'escalated' && $prClaim->escalation_reason)
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="alert alert-warning">
                            <h6 class="mb-2"><i class="fa fa-arrow-up"></i> Escalation Information</h6>
                            <strong>Reason:</strong>
                            <p class="mb-0 mt-2">{{ $prClaim->escalation_reason }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Progress Tracking -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <h6 class="text-muted mb-3"><i class="fa fa-history"></i> Progress History</h6>
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-sm mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Step</th>
                                            <th>User</th>
                                            <th>Action</th>
                                            <th>Date/Time</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($history as $index => $record)
                                            <tr>
                                                <td><span class="badge badge-primary">{{ $index + 1 }}</span></td>
                                                <td>
                                                    <strong>{{ $record->username }}</strong><br>
                                                    <small class="text-muted">{{ $record->email }}</small>
                                                </td>
                                                <td>
                                                    @if($record->action == 'created')
                                                        <i class="fa fa-plus-circle text-success"></i> Created PR Claim
                                                    @elseif($record->action == 'escalated')
                                                        <i class="fa fa-arrow-up text-info"></i> Escalated
                                                        @if($record->comments)
                                                            <br><small class="text-muted">Reason: {{ $record->comments }}</small>
                                                        @endif
                                                    @elseif($record->action == 'approved')
                                                        <i class="fa fa-check-circle text-success"></i> Approved
                                                    @elseif($record->action == 'rejected')
                                                        <i class="fa fa-times-circle text-danger"></i> Rejected
                                                    @else
                                                        <i class="fa fa-info-circle"></i> {{ ucfirst($record->action) }}
                                                    @endif
                                                </td>
                                                <td>{{ Carbon::parse($record->created_at)->format('d M Y, h:i A') }}</td>
                                            </tr>
                                        @endforeach
                                        
                                        @if($prClaim->status == 'pending' || $prClaim->status == 'escalated')
                                            <tr class="table-warning">
                                                <td><span class="badge badge-warning">{{ count($history) + 1 }}</span></td>
                                                <td>
                                                    <strong>{{ $prClaim->send_to_name }}</strong><br>
                                                    <small class="text-muted">{{ $prClaim->send_to_email }}</small>
                                                </td>
                                                <td>
                                                    <i class="fa fa-clock text-warning"></i> <strong>Pending Review</strong>
                                                </td>
                                                <td>
                                                    <span class="text-muted"><strong>Awaiting Action</strong></span>
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @php
                $currentUserId = Auth::user()->id ?? Auth::id();
                $canTakeAction = ($prClaim->send_to_user_id == $currentUserId) && 
                                 in_array($prClaim->status, ['pending', 'escalated']);
            @endphp

            @if($canTakeAction)
                <hr class="my-4">
                <div class="text-center">
                    <h6 class="text-muted mb-3">Action Required</h6>
                    <form action="{{ route('prclaims.updateStatus', $prClaim->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to approve this PR Claim?');">
                        @csrf
                        <input type="hidden" name="status" value="approved">
                        <button type="submit" class="btn btn-success btn-lg px-4 mr-2 mb-2" style="border-radius: 25px;">
                            <i class="fa fa-check"></i> Approve
                        </button>
                    </form>
                    <form action="{{ route('prclaims.updateStatus', $prClaim->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to reject this PR Claim?');">
                        @csrf
                        <input type="hidden" name="status" value="rejected">
                        <button type="submit" class="btn btn-danger btn-lg px-4 mr-2 mb-2" style="border-radius: 25px;">
                            <i class="fa fa-times"></i> Reject
                        </button>
                    </form>
                    <button type="button" class="btn btn-warning btn-lg px-4 mb-2" style="border-radius: 25px;" data-toggle="modal" data-target="#escalateModal">
                        <i class="fa fa-arrow-up"></i> Escalate
                    </button>
                </div>
            @elseif($prClaim->send_to_user_id != $currentUserId)
                <div class="alert alert-info mt-4">
                    <i class="fa fa-info-circle"></i> You are viewing this claim as the creator. Only the recipient can take action on this claim.
                </div>
            @elseif(!in_array($prClaim->status, ['pending', 'escalated']))
                <div class="alert alert-secondary mt-4">
                    <i class="fa fa-check-circle"></i> This claim has already been processed. Status: <strong>{{ ucfirst($prClaim->status) }}</strong>
                </div>
            @endif
        </div>
    </div>

    <!-- Escalate Modal -->
    <div class="modal fade" id="escalateModal" tabindex="-1" role="dialog" aria-labelledby="escalateModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%); color: white;">
                    <h5 class="modal-title" id="escalateModalLabel">Escalate PR Claim</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('prclaims.escalate', $prClaim->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="escalated_to_user_id">Escalate To <span class="text-danger">*</span></label>
                            <select class="form-control" id="escalated_to_user_id" name="escalated_to_user_id" required>
                                <option value="">-- Select User --</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->username }} ({{ $user->email }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="escalation_reason">Escalation Reason <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="escalation_reason" name="escalation_reason" rows="4" required placeholder="Please provide reason for escalation..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">
                            <i class="fa fa-arrow-up"></i> Escalate
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: bold;
        }

        .badge-lg {
            padding: 0.75rem 1.25rem;
            font-size: 1rem;
        }

        .lead {
            font-size: 1.5rem;
            font-weight: 500;
        }

        .btn-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            border: none;
        }

        .btn-danger:hover {
            background: linear-gradient(135deg, #c82333 0%, #dc3545 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        h6.text-muted {
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.5px;
        }
    </style>

@endsection