@extends('admin.zsi.layouts.admin')
@section('content')
    <div class="container-fluid py-4">

        <div class="card border-0 shadow-sm">

            {{-- Header --}}
            <div class="card-header bg-white py-3">
                <h5 class="mb-1 fw-bold">
                    <i class="bi bi-image me-2"></i>

                    {{ isset($monthlyFauna) ? 'Edit Image' : 'Add Image' }}
                </h5>

                <small class="text-muted">
                    {{ isset($monthlyFauna) ? 'Update image details below' : 'Enter image details below' }}
                </small>
            </div>


            {{-- Form --}}
            <div class="card-body">

                <form
                    action="{{ isset($monthlyFauna)
                        ? route('admin.update_monthly_fauna', $monthlyFauna->szUniqueKey)
                        : route('admin.store_monthly_fauna') }}"
                    method="POST" enctype="multipart/form-data">
                    @csrf

                    @if (isset($monthlyFauna))
                        @method('PUT')
                    @endif

                    @csrf

                    <div class="row g-4">

                        {{-- Image --}}
                        <div class="col-md-6">

                            <label for="image" class="form-label fw-semibold">
                                Image <span class="text-danger">*</span>
                            </label>

                            <input type="file" name="szImageName" id="image"
                                class="form-control @error('szImageName') is-invalid @enderror" accept="image/*"
                                {{ isset($monthlyFauna) ? '' : 'required' }}>

                            @error('szImageName')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror


                            {{-- Current / Selected Image Preview --}}
                            <div class="mt-3" id="imagePreviewContainer">

                                @if (isset($monthlyFauna) && $monthlyFauna->szImageName)
                                    <p class="mb-2 fw-semibold" id="previewTitle">
                                        Current Image
                                    </p>

                                    <img id="imagePreview"
                                        src="{{ asset('uploads/monthly-fauna/' . $monthlyFauna->szImageName) }}"
                                        alt="{{ $monthlyFauna->szImageAlt }}" class="img-thumbnail"
                                        style="max-width: 200px;">
                                @else
                                    <p class="mb-2 fw-semibold d-none" id="previewTitle">
                                        Selected Image
                                    </p>

                                    <img id="imagePreview" src="" alt="Image Preview" class="img-thumbnail d-none"
                                        style="max-width: 200px;">
                                @endif

                            </div>


                            <div class="form-text">
                                JPG, JPEG, PNG or WEBP
                            </div>

                        </div>

                        {{-- Link --}}
                        <div class="col-md-6">
                            <label for="link" class="form-label fw-semibold">
                                Link
                            </label>

                            <input type="url" name="szLearnMoreLink" id="link" class="form-control"
                                placeholder="https://example.com"
                                value="{{ old('szLearnMoreLink', $monthlyFauna->szLearnMoreLink ?? '') }}">
                        </div>


                        {{-- English Details --}}
                        <div class="col-12">
                            <div class="border-bottom pb-2">
                                <h6 class="fw-bold text-primary mb-0">
                                    English Details
                                </h6>
                            </div>
                        </div>


                        {{-- Image Alt --}}
                        <div class="col-md-6">
                            <label for="image_alt" class="form-label fw-semibold">
                                Image Alt
                            </label>

                            <input type="text" name="szImageAlt" id="image_alt" class="form-control"
                                placeholder="Enter image alt text"
                                value="{{ old('szImageAlt', $monthlyFauna->szImageAlt ?? '') }}">
                        </div>


                        {{-- Image Caption --}}
                        <div class="col-md-6">
                            <label for="image_caption" class="form-label fw-semibold">
                                Image Caption
                            </label>

                            <input type="text" name="szImageCaption" id="image_caption" class="form-control"
                                placeholder="Enter image caption"
                                value="{{ old('szImageCaption', $monthlyFauna->szImageCaption ?? '') }}">
                        </div>
                        {{-- Image title --}}
                        <div class="col-md-6">
                            <label for="image_title" class="form-label fw-semibold">
                                Image Title <span class="text-danger">*</span>
                            </label>

                            <input type="text" name="szImageTitle" id="image_title"
                                class="form-control @error('szImageTitle') is-invalid @enderror"
                                placeholder="Enter image title"
                                value="{{ old('szImageTitle', $monthlyFauna->szImageTitle ?? '') }}" required>

                            @error('szImageTitle')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>


                        {{-- Image Sub Title --}}
                        <div class="col-md-6">
                            <label for="image_sub_title" class="form-label fw-semibold">
                                Image Sub Title
                            </label>

                            <input type="text" name="szImageSubTitle" id="image_sub_title" class="form-control"
                                placeholder="Enter image sub title"
                                value="{{ old('szImageSubTitle', $monthlyFauna->szImageSubTitle ?? '') }}">
                        </div>


                        {{-- Hindi Details --}}
                        <div class="col-12 mt-4">
                            <div class="border-bottom pb-2">
                                <h6 class="fw-bold text-success mb-0">
                                    Hindi Details
                                </h6>
                            </div>
                        </div>


                        {{-- Image Alt Hindi --}}
                        <div class="col-md-6">
                            <label for="image_alt_hindi" class="form-label fw-semibold">
                                Image Alt Hindi
                            </label>







                            <input type="text" name="szImageAltHindi" id="image_alt_hindi" class="form-control"
                                placeholder="चित्र का Alt Text दर्ज करें"
                                value="{{ old('szImageAltHindi', $monthlyFauna->szImageAltHindi ?? '') }}">
                        </div>


                        {{-- Image Caption Hindi --}}
                        <div class="col-md-6">
                            <label for="image_caption_hindi" class="form-label fw-semibold">
                                Image Caption Hindi
                            </label>

                            <input type="text" name="szImageCaptionHindi" id="image_caption_hindi"
                                class="form-control" placeholder="चित्र का कैप्शन दर्ज करें"
                                value="{{ old('szImageCaptionHindi', $monthlyFauna->szImageCaptionHindi ?? '') }}">
                        </div>
                        {{-- Image Title Hindi --}}
                        <div class="col-md-6">
                            <label for="image_title_hindi" class="form-label fw-semibold">
                                Image Title <span class="text-danger">*</span>
                            </label>


                            <input type="text" name="szImageTitleHindi" id="image_title_hindi"
                                class="form-control @error('szImageTitleHindi') is-invalid @enderror"
                                placeholder="Enter image title"
                                value="{{ old('szImageTitleHindi', $monthlyFauna->szImageTitleHindi ?? '') }}" required>

                            @error('szImageTitleHindi')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        {{-- Image Sub Title Hindi --}}
                        <div class="col-md-6">
                            <label for="image_sub_title_hindi" class="form-label fw-semibold">
                                Image Sub Title Hindi
                            </label>

                            <input type="text" name="szImageSubTitleHindi" id="image_sub_title_hindi"
                                class="form-control" placeholder="चित्र का उपशीर्षक दर्ज करें"
                                value="{{ old('szImageSubTitleHindi', $monthlyFauna->szImageSubTitleHindi ?? '') }}">
                        </div>


                        {{-- Buttons --}}
                        <div class="col-12">

                            <hr>

                            <div class="d-flex justify-content-end gap-2">

                                <button type="reset" class="btn btn-outline-secondary">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i>
                                    Reset
                                </button>

                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle me-1"></i>

                                    {{ isset($monthlyFauna) ? 'Update Image' : 'Save Image' }}
                                </button>

                            </div>

                        </div>

                    </div>

                </form>

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