@extends('layouts.app')

@section('title', 'Add Book')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-8 offset-lg-2">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0"><i class="fas fa-plus-circle"></i> Add New Book</h4>
                </div>
                <div class="card-body">
                    <form id="addBookForm" enctype="multipart/form-data">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="title" placeholder="Enter book title" required>
                                <small class="form-text text-muted">Main title of the book</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Subtitle</label>
                                <input type="text" class="form-control" name="subtitle" placeholder="Enter subtitle (optional)">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Author Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="author" placeholder="Enter author name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">ISBN Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="isbn" placeholder="Enter ISBN" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Category <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="category" placeholder="e.g., Fiction, Science" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Language <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="language" value="English" placeholder="Enter language" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Publisher <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="publisher" placeholder="Enter publisher name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">DDC <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="ddc" placeholder="Dewey Decimal Classification">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Publish Year <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="publish_year" placeholder="e.g., 2024" min="1000" max="{{ date('Y') }}" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Edition</label>
                                <input type="text" class="form-control" name="edition" placeholder="e.g., 1st Edition">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Number of Pages <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="number_of_pages" placeholder="Enter page count" min="1" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Book Format <span class="text-danger">*</span></label>
                                <select class="form-control" name="book_format" required>
                                    <option value="">-- Select Format --</option>
                                    <option value="Hardcover">Hardcover</option>
                                    <option value="Paperback">Paperback</option>
                                    <option value="eBook">eBook</option>
                                    <option value="Audiobook">Audiobook</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Shelf Location <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="shelf_location" placeholder="e.g., A1-B3" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Quantity <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="quantity" placeholder="Number of copies" min="1" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">
                                    Book Cover Image
                                </label>
                                <input type="file" class="form-control" name="book_cover"
                                       id="book_cover" accept="image/jpeg,image/png,image/jpg,image/gif">
                                <small class="form-text text-muted">
                                    Optional. Max file size: <strong>2MB</strong> - JPEG, PNG, JPG, GIF only.
                                </small>
                                {{-- Client-side size error shown here --}}
                                <div id="coverSizeError" class="text-danger small mt-1" style="display:none;">
                                    Image is too large! Maximum allowed size is <strong>2MB</strong>.
                                </div>
                                {{-- Preview thumbnail of selected image --}}
                                <div id="coverPreviewBox" class="mt-2" style="display:none;">
                                    <p class="mb-1 small text-muted">Preview:</p>
                                    <img id="coverPreview"
                                         src=""
                                         alt="Preview"
                                         style="width:50px;height:50px;object-fit:cover;border-radius:4px;border:1px solid #dee2e6;">
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save"></i> Add Book
                            </button>
                            <a href="{{ route('books.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Catalog
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Alert -->
<div id="successAlert" class="alert alert-success alert-dismissible fade show position-fixed" role="alert" style="top: 20px; right: 20px; display: none; z-index: 9999;">
    <strong id="successMessage"></strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Error Alert -->
<div id="errorAlert" class="alert alert-danger alert-dismissible fade show position-fixed" role="alert" style="top: 20px; right: 20px; display: none; z-index: 9999;">
    <strong id="errorMessage"></strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endsection

@section('scripts')
<script>
    // ================================================================
    //   Book Cover - client-side 2MB size check + live preview
    // ================================================================
    document.getElementById('book_cover').addEventListener('change', function () {
        const file = this.files[0];
        const errorBox   = document.getElementById('coverSizeError');
        const previewBox = document.getElementById('coverPreviewBox');
        const preview    = document.getElementById('coverPreview');

        if (!file) {
            errorBox.style.display   = 'none';
            previewBox.style.display = 'none';
            return;
        }

        if (file.size > 2 * 1024 * 1024) {
            errorBox.style.display   = 'block';
            previewBox.style.display = 'none';
            this.value = ''; // clear the file input
            return;
        }

        // File is valid - hide error and show preview
        errorBox.style.display = 'none';
        const reader = new FileReader();
        reader.onload = function (e) {
            preview.src              = e.target.result;
            previewBox.style.display = 'block';
        };
        reader.readAsDataURL(file);
    });

    // ================================================================
    //   Add Book Form Submit via AJAX
    // ================================================================
    $('#addBookForm').on('submit', function (e) {
        e.preventDefault();

        // Block submit if size error is visible
        if (document.getElementById('coverSizeError').style.display === 'block') {
            showError('Please upload a valid image (max 2MB) before submitting.');
            return;
        }

        const formData = new FormData(this);

        $.ajax({
            url: "{{ route('books.store') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function (response) {
                if (response.success) {
                    $('#successMessage').text(response.message);
                    $('#successAlert').slideDown().delay(3000).slideUp();
                    $('#addBookForm')[0].reset();
                    document.getElementById('coverPreviewBox').style.display = 'none';

                    setTimeout(function () {
                        window.location.href = "{{ route('books.index') }}";
                    }, 2000);
                } else {
                    showError(response.message);
                }
            },
            error: function (xhr) {
                let message = 'An error occurred';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    message = Object.values(xhr.responseJSON.errors).flat().join(' | ');
                }
                showError(message);
            }
        });
    });

    function showError(message) {
        $('#errorMessage').text(message);
        $('#errorAlert').slideDown().delay(5000).slideUp();
    }
</script>
@endsection