<?php $__env->startSection('content'); ?>
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-lg">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0"><i class="fas fa-book-medical me-2"></i>Add New Book</h4>
                        <a href="<?php echo e(route('books.index')); ?>" class="btn btn-sm btn-light">
                            <i class="fas fa-arrow-left me-1"></i> Back to Books
                        </a>
                    </div>
                </div>

                <div class="card-body p-4">
                    <form method="POST" action="<?php echo e(route('books.store')); ?>" enctype="multipart/form-data" class="needs-validation" novalidate>
                        <?php echo csrf_field(); ?>

                        <div class="row g-3">
                            <!-- Book Name -->
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Book Name" required>
                                    <label for="name"><i class="fas fa-book me-2 text-primary"></i>Book Name</label>
                                    <div class="invalid-feedback">
                                        Please provide a book name.
                                    </div>
                                </div>
                            </div>

                            <!-- Author -->
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="author" name="author" placeholder="Author Name" required>
                                    <label for="author"><i class="fas fa-user-edit me-2 text-primary"></i>Author Name</label>
                                    <div class="invalid-feedback">
                                        Please provide the author's name.
                                    </div>
                                </div>
                            </div>

                            <!-- Co-Author -->
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="co_author" name="co_author" placeholder="Co-Author Name">
                                    <label for="co_author"><i class="fas fa-users me-2 text-primary"></i>Co-Author (Optional)</label>
                                </div>
                            </div>

                            <!-- Published No -->
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="published_no" name="published_no" placeholder="Published Number" required>
                                    <label for="published_no"><i class="fas fa-hashtag me-2 text-primary"></i>Published No</label>
                                    <div class="invalid-feedback">
                                        Please provide a publication number.
                                    </div>
                                </div>
                            </div>

                            <!-- Publisher -->
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="publisher" name="publisher" placeholder="Publisher" required>
                                    <label for="publisher"><i class="fas fa-building me-2 text-primary"></i>Publisher</label>
                                    <div class="invalid-feedback">
                                        Please provide the publisher's name.
                                    </div>
                                </div>
                            </div>

                            <!-- DDC No -->
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="ddc_no" name="ddc_no" placeholder="DDC Number" required>
                                    <label for="ddc_no"><i class="fas fa-bookmark me-2 text-primary"></i>DDC No</label>
                                    <div class="invalid-feedback">
                                        Please provide the DDC number.
                                    </div>
                                </div>
                            </div>

                            <!-- Edition -->
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="edition" name="edition" placeholder="Edition" required>
                                    <label for="edition"><i class="fas fa-layer-group me-2 text-primary"></i>Edition</label>
                                    <div class="invalid-feedback">
                                        Please provide the edition.
                                    </div>
                                </div>
                            </div>

                            <!-- Publish Year -->
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <input type="number" class="form-control" id="publish_year" name="publish_year"
                                           min="1900" max="<?php echo e(date('Y') + 1); ?>" placeholder="Publish Year" required>
                                    <label for="publish_year"><i class="fas fa-calendar-alt me-2 text-primary"></i>Publish Year</label>
                                    <div class="invalid-feedback">
                                        Please provide a valid year (1900-<?php echo e(date('Y') + 1); ?>).
                                    </div>
                                </div>
                            </div>

                            <!-- Status -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label"><i class="fas fa-globe me-2 text-primary"></i>Status</label>
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="status" id="status_national" value="National" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary" for="status_national">National</label>

                                        <input type="radio" class="btn-check" name="status" id="status_international" value="International" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="status_international">International</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Authentication -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label"><i class="fas fa-lock me-2 text-primary"></i>Authors</label>
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="authentication" id="auth_single" value="Single" autocomplete="off" checked>
                                        <label class="btn btn-outline-primary" for="auth_single">Single</label>

                                        <input type="radio" class="btn-check" name="authentication" id="auth_multi" value="Multi" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="auth_multi">Multi</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Cover Image -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cover_image" class="form-label"><i class="fas fa-image me-2 text-primary"></i>Book Cover</label>
                                    <div class="file-upload">
                                        <input type="file" class="form-control" id="cover_image" name="cover_image" accept="image/*" required>
                                        <small class="text-muted">Max 2MB (JPEG, PNG, GIF)</small>
                                        <div class="invalid-feedback">
                                            Please upload a book cover image.
                                        </div>
                                    </div>
                                    <div id="imagePreview" class="mt-2 d-none">
                                        <img id="previewImage" src="#" alt="Preview" class="img-thumbnail" style="max-height: 150px;">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-plus-circle me-2"></i>Add Book
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    :root {
        --primary-color: #4361ee;
        --secondary-color: #3f37c9;
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }

    .card {
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    }

    .form-floating label {
        padding-left: 2.5rem;
    }

    .form-floating i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-group .btn {
        border-radius: 0.375rem !important;
    }

    .btn-check:checked + .btn-outline-primary {
        background-color: var(--primary-color);
        color: white;
    }

    .file-upload {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.3s;
    }

    .file-upload:hover {
        border-color: var(--primary-color);
        background-color: rgba(67, 97, 238, 0.05);
    }

    .invalid-feedback {
        display: none;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: #dc3545;
    }

    .was-validated .form-control:invalid ~ .invalid-feedback,
    .was-validated .form-control:invalid ~ .invalid-tooltip,
    .was-validated .form-control:invalid ~ .file-upload .invalid-feedback {
        display: block;
    }

    .was-validated .form-control:invalid ~ .file-upload {
        border-color: #dc3545;
    }
</style>

<script>
    // Form validation
    (function () {
        'use strict'

        var forms = document.querySelectorAll('.needs-validation')

        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }

                    form.classList.add('was-validated')
                }, false)
            })
    })()

    // Image preview and validation
    document.getElementById('cover_image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('imagePreview');
        const previewImage = document.getElementById('previewImage');
        const fileUpload = document.querySelector('.file-upload');

        if (file) {
            // Validate file type
            const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
            if (!validTypes.includes(file.type)) {
                e.target.setCustomValidity('Please upload a valid image (JPEG, PNG, GIF)');
                fileUpload.style.borderColor = '#dc3545';
                preview.classList.add('d-none');
                return;
            }

            // Validate file size (2MB max)
            if (file.size > 2 * 1024 * 1024) {
                e.target.setCustomValidity('Image must be less than 2MB');
                fileUpload.style.borderColor = '#dc3545';
                preview.classList.add('d-none');
                return;
            }

            // Reset validation and show preview
            e.target.setCustomValidity('');
            fileUpload.style.borderColor = '#dee2e6';

            const reader = new FileReader();
            reader.onload = function(event) {
                previewImage.src = event.target.result;
                preview.classList.remove('d-none');
            }
            reader.readAsDataURL(file);
        } else {
            preview.classList.add('d-none');
        }
    });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\library\resources\views/books/create.blade.php ENDPATH**/ ?>