@extends('layouts.admin')

@section('title', 'Sectors')

@section('content')
<div class="container">
    <!-- Drobečková navigace -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Sectors</li>
        </ol>
    </nav>
    
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>Sectors</h1>

        @if (session('status'))
        <div class="alert alert-success alert-dismissable fade show" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            {{ session('status') }}
        </div>
        @endif

        <div>
            <a href="{{ route('admin.sectors.create') }}" class="btn btn-primary">Add New Sector</a>

            <form id="deleteSelectedForm" action="{{ route('admin.sectors.deleteSelected') }}" method="POST" class="d-inline-block ms-2">
                @csrf
                <input type="hidden" name="ids" id="selectedIds">
                <button type="button" class="btn btn-danger" onclick="submitDeleteSelectedForm()">Delete Selected</button>
            </form>
        </div>
    </div>
    
    <form action="{{ route('admin.sectors.index') }}" method="GET" class="mb-3">
        <div class="input-group">
            <input type="text" class="form-control" name="search" placeholder="Search sectors" value="{{ request('search') }}">
            <button class="btn btn-primary" type="submit">Search</button>
        </div>
    </form>    


    <form method="POST" action="{{ route('admin.sectors.deleteSelected') }}">
        @csrf
        @method('DELETE')
        <table class="table table-striped">
            <thead>
                <tr>
                    <th style="width:50px;"><input type="checkbox" id="selectAll"></th>
                    <th style="width:50px;">ID</th>
                    <th>Title</th>
                    <th style="width:50px;">Subsectors</th>
                    <th style="width:320px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($sectors as $sector)
                    <tr>
                        <td><input type="checkbox" name="sectors_ids[]" value="{{ $sector->id }}"></td>
                        <td>{{ $sector->id }}</td>
                        <td>{{ $sector->title }}</td>
                        <td>{{ $sector->categories_count }}</td>
                        <td>
                            <a href="{{ route('admin.categories.index', ['sector_id' => $sector->id]) }}" class="btn btn-info">View Categories</a>
                            <a href="{{ route('admin.sectors.edit', $sector) }}" class="btn btn-warning">Edit</a>
                            <form action="{{ route('admin.sectors.destroy', $sector) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this item?')">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center">No sectors found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <!-- Page Navigation -->
        <div class="d-flex justify-content-between">
            <div>
                Showing {{ $sectors->firstItem() }} to {{ $sectors->lastItem() }} of {{ $sectors->total() }} items
            </div>
            <div class="pagination-info">
                {{ $sectors->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </form>
</div>

<script>
    document.getElementById('selectAll').addEventListener('click', function() {
        var checked = this.checked;
        document.querySelectorAll('input[name="selected[]"]').forEach(function(checkbox) {
            checkbox.checked = checked;
        });
    });

    function submitDeleteSelectedForm() {
        const selectedCheckboxes = document.querySelectorAll('input[name="sectors_ids[]"]:checked');
        const ids = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);

        if (ids.length === 0) {
            alert('No products selected!');
            return;
        }

        document.getElementById('selectedIds').value = JSON.stringify(ids);
        document.getElementById('deleteSelectedForm').submit();
    }
    
</script>
@endsection