@extends('layouts.admin')

@section('title', 'Journey Contracts')

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Journey Contracts</h4>
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Journey Contracts</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <!-- Statistics Cards -->
        <div class="row">
            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Journeys</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $stats['total_journeys'] }}</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-success-subtle rounded fs-3">
                                    <i class="ri-file-text-line text-success"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Signed Contracts</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $stats['total_signed_contracts'] }}</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-info-subtle rounded fs-3">
                                    <i class="ri-check-line text-info"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Journeys with Contract Setup</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $stats['journeys_with_contracts'] }}</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-warning-subtle rounded fs-3">
                                    <i class="ri-settings-3-line text-warning"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Contract Acceptance Rate</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $stats['acceptance_rate'] }}%</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-primary-subtle rounded fs-3">
                                    <i class="ri-trending-up-line text-primary"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Filter Contracts</h4>
                    </div>
                    <div class="card-body">
                        <form method="GET" action="{{ route('admin.journey.contracts') }}" class="row g-3 mb-4">
                            <div class="col-md-3">
                                <label for="from_date" class="form-label">From Date</label>
                                <input type="date" class="form-control" id="from_date" name="from_date" value="{{ request('from_date') }}">
                            </div>
                            <div class="col-md-3">
                                <label for="to_date" class="form-label">To Date</label>
                                <input type="date" class="form-control" id="to_date" name="to_date" value="{{ request('to_date') }}">
                            </div>
                            <div class="col-md-3">
                                <label for="journey_id" class="form-label">Journey</label>
                                <select class="form-select" id="journey_id" name="journey_id">
                                    <option value="">All Journeys</option>
                                    @foreach($allJourneys as $journey)
                                    <option value="{{ $journey->id }}" {{ request('journey_id') == $journey->id ? 'selected' : '' }}>
                                        {{ $journey->title }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-2">Filter</button>
                                <a href="{{ route('admin.journey.contracts') }}" class="btn btn-light">Reset</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contracts Table -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Signed Journey Contracts</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-nowrap">
                                <thead>
                                    <tr>
                                        <th scope="col">Journey</th>
                                        <th scope="col">Journey Creator</th>
                                        <th scope="col">Contract Title</th>
                                        <th scope="col">Signed Participants</th>
                                        <th scope="col">Total Participants</th>
                                        <th scope="col">Acceptance Rate</th>
                                        <th scope="col">Created Date</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($journeys as $journey)
                                    @php
                                    $signedParticipants = $journey->signedMembers->count();
                                    $totalParticipants = $journey->members->count();
                                    $acceptanceRate = $totalParticipants > 0
                                    ? number_format(($signedParticipants / $totalParticipants) * 100, 2)
                                    : 0;
                                    @endphp
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1 ms-2">
                                                    <h6 class="fs-14 mb-1">{{ $journey->title }}</h6>
                                                    <p class="text-muted mb-0">{{ Str::limit($journey->destination, 30) }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h6 class="fs-14 mb-1">{{ $journey->user?->name?? '-' }}</h6>
                                                    <p class="text-muted mb-0">{{ $journey->user?->email?? '-' }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <h6 class="fs-14 mb-1">{{ $journey->contract_title ?? 'Default Contract' }}</span>
                                        </td>
                                        <td>
                                            <span>{{ $signedParticipants }}</span>
                                        </td>
                                        <td>
                                            <span>{{ $totalParticipants }}</span>
                                        </td>
                                        <td>
                                            @if($acceptanceRate >= 80)
                                            <span>{{ $acceptanceRate }}%</span>
                                            @elseif($acceptanceRate >= 50)
                                            <span>{{ $acceptanceRate }}%</span>
                                            @else
                                            <span>{{ $acceptanceRate }}%</span>
                                            @endif
                                        </td>
                                        <td>{{ $journey->created_at->format('d M, Y') }}</td>
                                        <td>
                                            <div class="dropdown">
                                                <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ri-more-2-fill"></i>
                                                </a>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                                    <li><a class="dropdown-item" href="{{ route('admin.journey.show', $journey->id) }}"><i class="ri-eye-line me-1"></i> View Journey</a></li>
                                                    <li><a class="dropdown-item" href="#" onclick="viewContract({{ $journey->id }})"><i class="ri-file-text-line me-1"></i> View Contract</a></li>
                                                    <li><a class="dropdown-item" href="{{ route('admin.journey.participants', $journey->id) }}"><i class="ri-group-line me-1"></i> View Participants</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-4">
                                            <div class="text-muted">
                                                <i class="ri-file-list-3-line fs-1 mb-3 d-block"></i>
                                                <h5>No signed contracts found</h5>
                                                <p>There are no journey contracts that have been signed yet.</p>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contract Modal -->
<div class="modal fade" id="contractModal" tabindex="-1" aria-labelledby="contractModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contractModalLabel">Journey Contract</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="contractContent">
                    <!-- Contract content will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    function viewContract(journeyId) {
        const journeys = @json($journeys->keyBy('id'));
        let contractContent = journeys[journeyId]?.contract_content || 'No contract content available';

        try {
            const parsed = JSON.parse(contractContent);
            contractContent = `<pre>${JSON.stringify(parsed, null, 2)}</pre>`;
        } catch (e) {
            contractContent = `<div style="white-space: pre-wrap;">${contractContent}</div>`;
        }

        $('#contractContent').html(contractContent);
        $('#contractModal').modal('show');
    }
</script>
@endsection