@extends('layouts.app')
@section('title',$Title)
@section('content')

<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb list-unstyled d-flex flex-row gap-2 align-items-center m-0 ps-0 py-4">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-600 fs-7 hover-dark">Home</a></li>
                        <li class="breadcrumb-item">
                            <span class="icon-shape icon-xxs">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                    <path d="M6.125 4.5625L9.5625 7.84375L6.125 11.125" stroke="#626568" stroke-width="0.9375" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </span>
                        </li>
                        <li class="breadcrumb-item active text-dark fs-7" aria-current="page">{{$Title}}</li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <h4 class="mt-2 mb-3 pb-2 pt-1">{{ $Title }}</h4>

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

                @if (session('errormsg'))
                <div class="alert alert-danger">
                    {{ session('errormsg') }}
                </div>
                @endif

                <form action="{{ route('create.articles') }}" method="POST" enctype="multipart/form-data" novalidate>
                    @csrf

                    <div class="row g-2 border-top pt-3 compact-form"> {{-- g-2 और pt-3 से compact --}}
                        {{-- Prefix --}}
                        <div class="col-md-3">
                            <label class="small mb-1">Prefix</label>
                            <select name="prefix" class="form-control form-control-sm" required>
                                <option value="">-- Select --</option>
                                @foreach($prefixes as $pre)
                                <option value="{{ $pre }}" {{ old('prefix') == $pre ? 'selected' : '' }}>{{ $pre }}</option>
                                @endforeach
                            </select>
                            @error('prefix') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- First Name --}}
                        <div class="col-md-4">
                            <label class="small mb-1">First Name *</label>
                            <input type="text" name="first_name" class="form-control form-control-sm" placeholder="First name" value="{{ old('first_name') }}" required />
                            @error('first_name') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Last Name --}}
                        <div class="col-md-5">
                            <label class="small mb-1">Last Name *</label>
                            <input type="text" name="last_name" class="form-control form-control-sm" placeholder="Last name" value="{{ old('last_name') }}" required />
                            @error('last_name') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- University --}}
                        <div class="col-md-6">
                            <label class="small mb-1">University</label>
                            <input type="text" name="university" class="form-control form-control-sm" placeholder="University / Institution" value="{{ old('university') }}" />
                            @error('university') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Country (select to prevent arbitrary entries) --}}
                        <div class="col-md-6">
                            <label class="small mb-1">Country *</label>
                            <select name="country" class="form-control form-control-sm" required>
                                <option value="">-- Select Country --</option>
                                @foreach($countries as $c)
                                <option value="{{ $c }}" {{ old('country', 'India') == $c ? 'selected' : '' }}>{{ $c }}</option>
                                @endforeach
                            </select>
                            @error('country') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Address --}}
                        <div class="col-12">
                            <label class="small mb-1">Address</label>
                            <textarea name="address" class="form-control form-control-sm" rows="2" placeholder="Address (optional)">{{ old('address') }}</textarea>
                            @error('address') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Email, Phone, WhatsApp --}}
                        <div class="col-md-6">
                            <label class="small mb-1">Email *</label>
                            <input type="email" name="email" class="form-control form-control-sm" placeholder="you@example.com" value="{{ old('email') }}" required />
                            @error('email') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="small mb-1">Phone</label>
                            <input type="text" name="phone" class="form-control form-control-sm" placeholder="Phone" value="{{ old('phone') }}" />
                            @error('phone') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="small mb-1">WhatsApp</label>
                            <input type="text" name="whatsapp" class="form-control form-control-sm" placeholder="WhatsApp number" value="{{ old('whatsapp') }}" />
                            @error('whatsapp') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Article Type --}}
                        <div class="col-md-4">
                            <label class="small mb-1">Article Type *</label>
                            <select name="article_type" class="form-control form-control-sm" required>
                                <option value="">-- Select --</option>
                                @foreach($articleTypes as $type)
                                <option value="{{ $type }}" {{ old('article_type') == $type ? 'selected' : '' }}>{{ $type }}</option>
                                @endforeach
                            </select>
                            @error('article_type') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Journal --}}
                        <div class="col-md-8">
                            <label class="small mb-1">Journal</label>
                            <select name="journal" class="form-control form-control-sm">
                                <option value="">-- Select Journal --</option>
                                @foreach($journals as $j)
                                <option value="{{ $j }}" {{ old('journal') == $j ? 'selected' : '' }}>{{ $j }}</option>
                                @endforeach
                            </select>
                            @error('journal') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Title --}}
                        <div class="col-12">
                            <label class="small mb-1">Manuscript Title * <small class="text-muted" id="title-count">({{ strlen(old('title','')) }} / 500)</small></label>
                            <input type="text" name="title" class="form-control form-control-sm" maxlength="500" value="{{ old('title') }}" required oninput="document.getElementById('title-count').innerText='('+this.value.length+' / 500)'" />
                            @error('title') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        {{-- PDF upload --}}
                        <div class="col-md-6">
                            <label class="small mb-1">Upload PDF (max 20MB)</label>
                            <input type="file" name="pdf" class="form-control form-control-sm" accept="application/pdf" />
                            @error('pdf') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Submit --}}
                        <div class="col-12">
                            <button type="submit" class="btn btn-dark btn-sm rounded-8 mt-2">Submit Article</button>
                        </div>
                    </div>
                </form>

                {{-- compact CSS (add to page or site stylesheet) --}}
                <style>
                    .compact-form .form-control-sm {
                        padding: .35rem .5rem;
                        font-size: .88rem;
                    }

                    .compact-form .small {
                        font-size: .78rem;
                    }

                    .compact-form .g-2 {
                        gap: .5rem !important;
                    }

                    /* increase input contrast/visibility */
                    .compact-form .form-control-sm {
                        border-width: 1.2px;
                    }
                </style>


            </div>
        </div>
    </div>

    <div class="bg-50 pb-70"></div>
</main>

{{-- Small inline JS for file preview and improvements --}}
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const pdfEl = document.getElementById('pdfInput');
        const previewEl = document.getElementById('pdfPreview');
        if (pdfEl) {
            pdfEl.addEventListener('change', function() {
                const f = this.files && this.files[0];
                if (!f) {
                    previewEl.innerText = '';
                    return;
                }
                previewEl.innerText = f.name + ' (' + Math.round(f.size / 1024) + ' KB)';
            });
        }
    });
</script>
@endpush

@endsection