@extends('layouts.app')

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

@section('styles')
<style>
    /* Small thumbnail in the table */
    .book-thumb {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #dee2e6;
    }

    /* Toast notifications */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 280px;
    }

    /* Stock badge colours */
    .badge-stock-ok   { background-color: #198754; }
    .badge-stock-low  { background-color: #fd7e14; }
    .badge-stock-zero { background-color: #dc3545; }

    /* Unavailable rows are dimmed */
    tr.unavailable td { opacity: 0.55; }
</style>
@endsection

@section('content')
<div class="container">

    {{-- ===== Toast Notifications ===== --}}
    <div class="toast-container">
        <div id="toastSuccess" class="toast align-items-center text-white bg-success border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body" id="toastSuccessMsg"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
        <div id="toastError" class="toast align-items-center text-white bg-danger border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body" id="toastErrorMsg"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

    {{-- ===== Page Header ===== --}}
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h2 class="fw-bold">
                <i class="fas fa-copy text-primary"></i> Book Copies
            </h2>
            @if($selectedBook)
                <p class="text-muted mb-0">
                    Showing copies for:
                    <strong>{{ $selectedBook->title }}</strong>
                    by {{ $selectedBook->author }}
                </p>
            @else
                <p class="text-muted mb-0">All book copy batches in the system.</p>
            @endif
        </div>
        <div class="col-md-4 text-end">
            <a href="{{ route('books.index') }}" class="btn btn-outline-secondary me-2">
                <i class="fas fa-arrow-left"></i> Back to Books
            </a>
            @if($selectedBook)
                <a href="{{ route('book-copies.index') }}" class="btn btn-outline-primary">
                    <i class="fas fa-list"></i> View All
                </a>
            @endif
        </div>
    </div>

    {{-- ===== Filter by Book ===== --}}
    <div class="card mb-4 shadow-sm">
        <div class="card-body py-2">
            <form method="GET" action="{{ route('book-copies.index') }}" class="row g-2 align-items-end">
                <div class="col-md-8">
                    <label class="form-label mb-1 small text-muted">Filter by book</label>
                    <select name="book_id" class="form-select form-select-sm">
                        <option value="">-- All Books --</option>
                        @foreach($books as $book)
                            <option value="{{ $book->id }}"
                                {{ $bookId == $book->id ? 'selected' : '' }}>
                                {{ $book->title }} ({{ $book->author }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary btn-sm w-100">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- ===== Summary Cards ===== --}}
    @php
        $totalBatches    = count($copies);
        $totalStock      = $copies->sum('stock');
        $availableBatches = $copies->where('is_available', 1)->count();
        $usedBatches      = $copies->where('is_available', 0)->count();
    @endphp

    <div class="row mb-4 g-3">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-2 fw-bold text-primary">{{ $totalBatches }}</div>
                <div class="small text-muted">Total Batches</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-2 fw-bold text-success">{{ $totalStock }}</div>
                <div class="small text-muted">Total Stock Available</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-2 fw-bold text-warning">{{ $availableBatches }}</div>
                <div class="small text-muted">Active Batches</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="fs-2 fw-bold text-danger">{{ $usedBatches }}</div>
                <div class="small text-muted">Depleted Batches</div>
            </div>
        </div>
    </div>

    {{-- ===== Book Copies Table ===== --}}
    <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <span class="fw-semibold">
                <i class="fas fa-table text-secondary"></i> Copy Batches
            </span>
            <span class="badge bg-secondary">{{ $totalBatches }} record(s)</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle mb-0">
                    <thead class="table-dark">
                        <tr>
                            {{-- Columns required by spec --}}
                            <th class="text-center" style="width:50px;">#</th>
                            <th style="width:70px;">Cover</th>
                            <th>Book Title</th>
                            <th>Book ID</th>
                            <th class="text-center">Stock (Copies)</th>
                            <th class="text-center">Status</th>
                            <th>Date Added</th>
                            <th class="text-center" style="width:170px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($copies as $index => $copy)
                        {{-- Dim the row if stock is 0 / unavailable --}}
                        <tr id="copy-row-{{ $copy->id }}"
                            class="{{ !$copy->is_available ? 'unavailable' : '' }}">

                            <td class="text-center text-muted small">{{ $index + 1 }}</td>

                            {{-- Thumbnail --}}
                            <td class="text-center">
                                @if($copy->book_cover)
                                    <img src="{{ asset($copy->book_cover) }}"
                                         alt="Cover"
                                         class="book-thumb">
                                @else
                                    <span class="badge bg-secondary">No img</span>
                                @endif
                            </td>

                            {{-- Book title + author + ISBN --}}
                            <td>
                                <strong>{{ $copy->title }}</strong>
                                <br>
                                <small class="text-muted">{{ $copy->author }}</small>
                                <br>
                                <code class="small">{{ $copy->isbn }}</code>
                            </td>

                            {{-- Book ID --}}
                            <td class="text-muted text-center">
                                <span class="badge bg-light text-dark border">#{{ $copy->book_id }}</span>
                            </td>

                            {{-- Stock number with colour badge --}}
                            <td class="text-center" id="stock-{{ $copy->id }}">
                                @php
                                    $stockClass = $copy->stock >= 5 ? 'badge-stock-ok'
                                               : ($copy->stock  > 0 ? 'badge-stock-low'
                                               :                       'badge-stock-zero');
                                @endphp
                                <span class="badge {{ $stockClass }} fs-6 px-3 py-1">
                                    {{ $copy->stock }}
                                </span>
                            </td>

                            {{-- Available / Depleted --}}
                            <td class="text-center" id="status-{{ $copy->id }}">
                                @if($copy->is_available)
                                    <span class="badge bg-success">Available</span>
                                @else
                                    <span class="badge bg-danger">Depleted</span>
                                @endif
                            </td>

                            {{-- Date added --}}
                            <td>
                                <i class="fas fa-calendar-alt text-muted me-1"></i>
                                {{ \Carbon\Carbon::parse($copy->date)->format('d M Y') }}
                            </td>

                            {{-- Actions --}}
                            <td class="text-center">
                                {{-- Use copy (decrease stock by 1) --}}
                                <button class="btn btn-sm btn-warning use-btn"
                                        data-id="{{ $copy->id }}"
                                        title="Use one copy (decrease stock by 1)"
                                        {{ !$copy->is_available ? 'disabled' : '' }}>
                                    <i class="fas fa-minus-circle"></i> Use
                                </button>

                                {{-- Restore copy (increase stock by 1) --}}
                                <button class="btn btn-sm btn-outline-success restore-btn ms-1"
                                        data-id="{{ $copy->id }}"
                                        title="Return / restore one copy">
                                    <i class="fas fa-plus-circle"></i>
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-5">
                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                No book copy batches found.
                                @if($bookId)
                                    <br>
                                    <a href="{{ route('book-copies.index') }}">View all batches</a>
                                @endif
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ===== Legend ===== --}}
    <div class="mt-3 small text-muted">
        <span class="badge badge-stock-ok me-1">&nbsp;</span> 5+ copies &nbsp;
        <span class="badge badge-stock-low me-1">&nbsp;</span> 1–4 copies &nbsp;
        <span class="badge badge-stock-zero me-1">&nbsp;</span> Depleted (0 copies)
    </div>

</div>
@endsection


@section('scripts')
<script>
// ================================================================
//   UTILITY: Toast notification helper
// ================================================================
function showToast(type, message) {
    const id  = type === 'success' ? 'toastSuccess' : 'toastError';
    const mid = type === 'success' ? 'toastSuccessMsg' : 'toastErrorMsg';
    document.getElementById(mid).textContent = message;
    new bootstrap.Toast(document.getElementById(id), { delay: 3500 }).show();
}

// ================================================================
//   USE BUTTON — decrease stock by 1
// ================================================================
$(document).on('click', '.use-btn', function () {
    const btn    = $(this);
    const copyId = btn.data('id');

    // Disable button instantly to prevent double-click
    btn.prop('disabled', true);

    $.ajax({
        url: `/book-copies/${copyId}/use`,
        type: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        success: function (res) {
            if (res.success) {
                showToast('success', res.message);

                // Update stock badge in the row without full reload
                const newStock = res.new_stock;
                let badgeClass = 'badge-stock-ok';
                if (newStock === 0)  badgeClass = 'badge-stock-zero';
                else if (newStock < 5) badgeClass = 'badge-stock-low';

                $(`#stock-${copyId} span`)
                    .removeClass('badge-stock-ok badge-stock-low badge-stock-zero')
                    .addClass(badgeClass)
                    .text(newStock);

                // Update status badge and dim row when depleted
                if (!res.is_available) {
                    $(`#status-${copyId}`).html('<span class="badge bg-danger">Depleted</span>');
                    $(`#copy-row-${copyId}`).addClass('unavailable');
                    // Keep "Use" button disabled; enable Restore
                } else {
                    btn.prop('disabled', false);
                }
            } else {
                showToast('error', res.message);
                btn.prop('disabled', false);
            }
        },
        error: function (xhr) {
            const msg = xhr.responseJSON?.message || 'Failed to use copy.';
            showToast('error', msg);
            btn.prop('disabled', false);
        }
    });
});

// ================================================================
//   RESTORE BUTTON — increase stock by 1
// ================================================================
$(document).on('click', '.restore-btn', function () {
    const btn    = $(this);
    const copyId = btn.data('id');

    $.ajax({
        url: `/book-copies/${copyId}/restore`,
        type: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        success: function (res) {
            if (res.success) {
                showToast('success', res.message);

                const newStock = res.new_stock;
                let badgeClass = 'badge-stock-ok';
                if (newStock < 5) badgeClass = 'badge-stock-low';

                $(`#stock-${copyId} span`)
                    .removeClass('badge-stock-ok badge-stock-low badge-stock-zero')
                    .addClass(badgeClass)
                    .text(newStock);

                // Re-enable status and Use button
                $(`#status-${copyId}`).html('<span class="badge bg-success">Available</span>');
                $(`#copy-row-${copyId}`).removeClass('unavailable');
                $(`#copy-row-${copyId} .use-btn`).prop('disabled', false);
            } else {
                showToast('error', res.message);
            }
        },
        error: function (xhr) {
            const msg = xhr.responseJSON?.message || 'Failed to restore copy.';
            showToast('error', msg);
        }
    });
});
</script>
@endsection