@extends('layouts.app')

@section('title', 'Edit 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-warning text-dark">
                    <h4 class="mb-0"><i class="fas fa-edit"></i> Edit Book</h4>
                </div>
                <div class="card-body">
                    <form id="editBookForm" 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" value="{{ $book->title }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Subtitle</label>
                                <input type="text" class="form-control" name="subtitle" value="{{ $book->subtitle }}">
                            </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" value="{{ $book->author }}" 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" value="{{ $book->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" value="{{ $book->category }}" 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="{{ $book->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" value="{{ $book->publisher }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">DDC</label>
                                <input type="text" class="form-control" name="ddc" value="{{ $book->ddc }}">
                            </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" value="{{ $book->publish_year }}" 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" value="{{ $book->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" value="{{ $book->number_of_pages }}" 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="Hardcover" {{ $book->book_format === 'Hardcover' ? 'selected' : '' }}>Hardcover</option>
                                    <option value="Paperback" {{ $book->book_format === 'Paperback' ? 'selected' : '' }}>Paperback</option>
                                    <option value="eBook" {{ $book->book_format === 'eBook' ? 'selected' : '' }}>eBook</option>
                                    <option value="Audiobook" {{ $book->book_format === 'Audiobook' ? 'selected' : '' }}>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" value="{{ $book->shelf_location }}" 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" value="{{ $book->quantity }}" min="1" required>
                                <small class="form-text text-muted">Current: {{ $book->quantity }}, Available: {{ $book->available_copies }}</small>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Book Cover Image</label>
                                <div class="mb-2">
                                    @if($book->book_cover)
                                        <img src="{{ asset($book->book_cover) }}" alt="Cover" style="max-width: 200px; max-height: 300px;">
                                        <p class="mt-2"><small class="text-muted">Current cover image</small></p>
                                    @else
                                        <p class="text-muted">No cover image</p>
                                    @endif
                                </div>
                                <input type="file" class="form-control" name="book_cover" accept="image/jpeg,image/png,image/jpg,image/gif">
                                <small class="form-text text-muted">Optional. Leave empty to keep the current image. Maximum size: 2MB.</small>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-warning btn-lg">
                                <i class="fas fa-save"></i> Update 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>
    $('#editBookForm').on('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);

        $.ajax({
            url: "{{ route('books.update', $book->id) }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-HTTP-Method-Override': 'PUT'
            },
            success: function(response) {
                if (response.success) {
                    // Show success message
                    $('#successMessage').text(response.message);
                    $('#successAlert').slideDown().delay(3000).slideUp();

                    // Redirect after 2 seconds
                    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) {
                    const errors = xhr.responseJSON.errors;
                    message = Object.values(errors).flat().join(', ');
                }
                showError(message);
            }
        });
    });

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