@extends('admin.layout')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4>Important Websites</h4>
        <button type="button" style="background:#1c1d46; border-radius: 10px;  color:white;" data-bs-toggle="modal" data-bs-target="#addModal">
            + Add Link
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="table table-hover align-middle">
        <thead class="table-light">
            <tr>
                <th style="width:100px;">Image</th>
                <th>URL</th>
                <th style="width:80px;">Order</th>
                <th class="text-center" style="width:150px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($links as $link)
                <tr>
                    <td><img src="{{ asset($link->image) }}" width="60" class="rounded"></td>
                    <td>{{ $link->url ?? '—' }}</td>
                    <td>{{ $link->order }}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-primary" title="Edit"
                            data-bs-toggle="modal" data-bs-target="#editModal{{ $link->id }}">
                            <i class="fa-solid fa-pencil"></i>
                        </button>
                        <form action="{{ route('admin.content.links.destroy', $link) }}" method="POST" class="d-inline"
                            onsubmit="return confirm('Delete this link?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger" title="Delete">
                                   <i class="fa-solid fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>

                {{-- Edit Modal for this link --}}
                <div class="modal fade" id="editModal{{ $link->id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form method="POST" action="{{ route('admin.content.links.update', $link) }}" enctype="multipart/form-data">
                                @csrf @method('PUT')
                                <div class="modal-header">
                                    <h5 class="modal-title">Edit Link</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label class="form-label">Current Image</label>
                                        <img src="{{ asset($link->image) }}" width="80" class="d-block mb-2 rounded">
                                        <input type="file" name="image" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">URL</label>
                                        <input type="text" name="url" class="form-control" value="{{ $link->url }}">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Order</label>
                                        <input type="number" name="order" class="form-control" value="{{ $link->order }}">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <tr><td colspan="5" class="text-center text-muted py-4">No links added yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Add Modal --}}
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.content.links.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Link</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Logo/Image</label>
                        <input type="file" name="image" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">URL</label>
                        <input type="text" name="url" class="form-control" placeholder="https://www.india.gov.in">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Order</label>
                        <input type="number" name="order" class="form-control" value="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection