@extends('frontend.source.layouts.app')

@section('content')

    <style>
        .manuscripts-page {
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .manuscripts-card {
            background: #ffffff;
            border: 1px solid #e7ebf3;
            border-radius: 16px;
            box-shadow: 0 12px 30px rgba(23, 36, 61, 0.08);
            overflow: hidden;
        }

        .manuscripts-card-header {
            padding: 20px 24px;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .manuscripts-card-title {
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            color: #1c2f44;
        }

        .manuscripts-count-badge {
            background: #eef2ff;
            color: #3347cc;
            border: 1px solid #d9e0ff;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 600;
        }

        .manuscripts-card-body {
            padding: 18px 20px 10px;
        }

        .manuscripts-table-wrap {
            border: 1px solid #e8edf4;
            border-radius: 12px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

        .manuscripts-table {
            margin-bottom: 0;
        }

        .manuscripts-table thead th {
            background: #f5f8fc;
            color: #2c3e55;
            font-weight: 700;
            border-bottom-width: 1px;
            white-space: nowrap;
        }

        .manuscripts-table td,
        .manuscripts-table th {
            vertical-align: middle;
            border-color: #edf1f7;
            padding: 14px 12px;
        }

        .manuscripts-table tbody tr:hover {
            background: #fbfdff;
        }

        .title-cell {
            min-width: 320px;
            color: #1f3047;
            font-weight: 600;
            line-height: 1.5;
        }

        .id-cell {
            font-weight: 700;
            color: #293b52;
        }

        .date-pill {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            color: #30577a;
            background: #eaf6ff;
            border: 1px solid #d4eefe;
        }

        .btn-action {
            border-radius: 8px;
            font-weight: 600;
            padding: 6px 12px;
            white-space: nowrap;
        }

        .btn-download {
            background: #1f6feb;
            border-color: #1f6feb;
            color: #fff;
        }

        .btn-download:hover {
            background: #1759bc;
            border-color: #1759bc;
            color: #fff;
        }

        .btn-images {
            background: #0f9d58;
            border-color: #0f9d58;
            color: #fff;
        }

        .btn-images:hover {
            background: #0b7d46;
            border-color: #0b7d46;
            color: #fff;
        }

        .btn-detail {
            background: #4f46e5;
            border-color: #4f46e5;
            color: #fff;
        }

        .btn-detail:hover {
            background: #4338ca;
            border-color: #4338ca;
            color: #fff;
        }

        .btn-disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .alert {
            border-radius: 10px;
        }

        .empty-state {
            border: 1px dashed #cad4e1;
            border-radius: 12px;
            background: #f9fbfe;
            color: #4f647c;
            text-align: center;
            padding: 28px 20px;
            font-weight: 600;
        }

        @media (max-width: 991px) {
            .manuscripts-page {
                margin-top: 24px;
                margin-bottom: 24px;
            }

            .manuscripts-card-title {
                font-size: 24px;
            }
        }
    </style>

	<div class="stricky-header stricked-menu main-menu">
		<div class="sticky-header__content"></div>
	</div>
    <section class="blog-left-sidebar">
        <div class="container">
            <div class="row">
                <div class="col-xl-3">
                    @include('frontend.source.common.sidebar')
                </div>
                <div class="col-xl-9">
                    <div class="manuscripts-page mt-0">
                        <div class="manuscripts-card">
                            <div class="manuscripts-card-header">
                                <h5 class="manuscripts-card-title">My Manuscripts</h5>
                                <span class="manuscripts-count-badge">{{ $manuscripts->count() }} Record{{ $manuscripts->count() === 1 ? '' : 's' }}</span>
                            </div>

                            <div class="manuscripts-card-body">

                                {{-- Success Message --}}
                                @if(session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                @endif

                                {{-- Error Message --}}
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        @foreach ($errors->all() as $error)
                                            <div>{{ $error }}</div>
                                        @endforeach
                                    </div>
                                @endif

                                @if($manuscripts->count() > 0)

                                    <div class="table-responsive manuscripts-table-wrap">
                                        <table class="table manuscripts-table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Manuscript ID</th>
                                                    <th width="25%">Title</th>
                                                    <th>Submitted Date</th>
                                                    <th class="text-center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($manuscripts as $key => $manuscript)
                                                <tr>
                                                    <td>{{ $key + 1 }}</td>
                                                    <td class="id-cell">{{ $manuscript->manuscriptID }}</td>
                                                    <td class="title-cell">{{ $manuscript->title }}</td>
                                                    <td><span class="date-pill">{{ $manuscript->created_at->format('d M Y') }}</span></td>
                                                    <td class="text-center">
                                                        <a href="{{ route('frontend.manuscript.detail', $manuscript->id) }}" class="btn btn-sm btn-action btn-detail">
                                                            View Details
                                                        </a>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                @else

                                    <div class="empty-state">
                                        No manuscripts found yet.
                                    </div>

                                @endif

                            </div>
                        </div>

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