@extends('layouts.staff')

@section('title', 'Libraries & Branches › Koha Administration')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.administration') }}">Administration</a>
    <span class="sep">›</span>
    <span>Libraries</span>
@endsection

@section('content')
<div style="width: 100%; display: flex; flex-direction: column;">
    @if(session('success'))
        <div style="background:#d4edda; color:#155724; border:1px solid #c3e6cb; padding:10px; margin-bottom:12px; border-radius:3px; font-size:13px;">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div style="background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; padding:10px; margin-bottom:12px; border-radius:3px; font-size:13px;">
            <ul style="margin:0; padding-left:18px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div style="background: #fff; border: 1px solid #d0d0d0; padding: 20px; border-radius: 3px;">
        <div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 2px solid #1b4880; padding-bottom: 8px; margin-bottom: 15px;">
            <h2 style="margin: 0; color: #1b4880; font-size: 16px;">
                🏢 Libraries and Branches Configuration
            </h2>
            <button onclick="document.getElementById('new-lib-form').style.display = document.getElementById('new-lib-form').style.display === 'none' ? 'block' : 'none';" class="form-btn primary" style="font-size:12px;">
                + Add New Library
            </button>
        </div>

        <!-- Add Form -->
        <div id="new-lib-form" style="display:none; background:#f9f9f9; border:1px solid #d0d0d0; padding:15px; border-radius:3px; margin-bottom:20px;">
            <h4 style="margin-top:0; color:#1b4880;">+ Create New Library Branch</h4>
            <form action="{{ route('staff.admin.libraries.store') }}" method="POST">
                @csrf
                <div class="form-row">
                    <span class="form-label">Branchcode:</span>
                    <input class="form-input" name="branchcode" required type="text" placeholder="e.g. MAIN, MTU">
                </div>
                <div class="form-row">
                    <span class="form-label">Library Name:</span>
                    <input class="form-input" name="name" required type="text" placeholder="e.g. Mountain Top Central Library">
                </div>
                <div class="form-row">
                    <span class="form-label">Address:</span>
                    <input class="form-input" name="address" type="text" placeholder="Physical address">
                </div>
                <div class="form-row">
                    <span class="form-label">Phone:</span>
                    <input class="form-input" name="phone" type="text" placeholder="Contact phone number">
                </div>
                <div class="form-row">
                    <span class="form-label">Email:</span>
                    <input class="form-input" name="email" type="email" placeholder="Contact email">
                </div>
                <div style="margin-top:12px; display:flex; gap:6px;">
                    <button type="submit" class="form-btn primary">Save Branch</button>
                    <button type="button" onclick="document.getElementById('new-lib-form').style.display = 'none';" class="form-btn">Cancel</button>
                </div>
            </form>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Branch Code</th>
                    <th>Library Name</th>
                    <th>Address / Contact</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($libraries as $lib)
                    <tr>
                        <td style="font-family: monospace; font-weight: bold; font-size: 12px;">{{ $lib->branchcode ?? $lib->code ?? 'N/A' }}</td>
                        <td style="font-weight: bold;">{{ $lib->name }}</td>
                        <td>
                            @if(!empty($lib->address)) <div>{{ $lib->address }}</div> @endif
                            @if(!empty($lib->phone) || !empty($lib->email))
                                <div style="font-size:11px; color:#555; margin-top:2px;">
                                    @if(!empty($lib->phone)) 📞 {{ $lib->phone }} @endif
                                    @if(!empty($lib->email)) ✉️ {{ $lib->email }} @endif
                                </div>
                            @endif
                        </td>
                        <td>
                            <button onclick="document.getElementById('edit-lib-{{ $lib->id }}').style.display = document.getElementById('edit-lib-{{ $lib->id }}').style.display === 'none' ? 'table-row' : 'none';" class="form-btn" style="padding:2px 8px; font-size:11px;">
                                ✏️ Edit
                            </button>
                        </td>
                    </tr>
                    <!-- Inline Edit Form Row -->
                    <tr id="edit-lib-{{ $lib->id }}" style="display:none; background:#f4f8fa;">
                        <td colspan="4" style="padding:12px;">
                            <form action="{{ route('staff.admin.libraries.update', $lib->id) }}" method="POST">
                                @csrf
                                <div style="display:grid; grid-template-columns: 1fr 2fr 2fr 1fr; gap:10px; align-items:center;">
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Code:</label>
                                        <input class="form-input" name="branchcode" value="{{ $lib->branchcode }}" required style="width:100%;">
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Name:</label>
                                        <input class="form-input" name="name" value="{{ $lib->name }}" required style="width:100%;">
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Phone / Email:</label>
                                        <input class="form-input" name="phone" value="{{ $lib->phone }}" placeholder="Phone" style="width:48%; display:inline-block;">
                                        <input class="form-input" name="email" value="{{ $lib->email }}" placeholder="Email" style="width:48%; display:inline-block;">
                                    </div>
                                    <div>
                                        <button type="submit" class="form-btn primary" style="padding:4px 10px; font-size:11px;">Save</button>
                                        <button type="button" onclick="document.getElementById('edit-lib-{{ $lib->id }}').style.display = 'none';" class="form-btn" style="padding:4px 10px; font-size:11px;">Cancel</button>
                                    </div>
                                </div>
                                <div style="margin-top:6px;">
                                    <label style="font-size:11px; font-weight:bold; display:block;">Address:</label>
                                    <input class="form-input" name="address" value="{{ $lib->address }}" style="width:100%;">
                                </div>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div style="margin-top: 20px;">
            <a href="{{ route('staff.administration') }}" class="form-btn" style="text-decoration:none;">← Back to Admin</a>
        </div>
    </div>
</div>
@endsection