@extends('layouts.app',['path'=>'organizations'])
@section('content')
    <div class="content" data-color="primary">

        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Organizations</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            Application
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Organization Details</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- /Breadcrumb -->

        @include('partials.new_alerts')

        <!-- Performance Indicator list -->
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                <h5>Organization Details</h5>
                <div>
                    <a href="{{ route('organizations') }}" class="btn btn-light btn-sm border">
                        <i class="ti ti-arrow-left me-1"></i>Back
                    </a>
                    <a href="{{ route('organizations.edit', enCryptData($organization['id'])) }}" class="btn btn-primary btn-sm me-2">
                        <i class="ti ti-edit me-1"></i>Edit
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form id="show-organization-form">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" value="{{ $organization['name'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" value="{{ $organization['email'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Phone</label>
                                <input type="text" class="form-control" value="{{ $organization['phone'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Website</label>
                                <input type="text" class="form-control" value="{{ $organization['website'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Industry</label>
                                <input type="text" class="form-control" value="{{ $organization['industry'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Address</label>
                                <input type="text" class="form-control" value="{{ $organization['address'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Country</label>
                                <input type="text" class="form-control" value="{{ $organization['country'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">State</label>
                                <input type="text" class="form-control" value="{{ $organization['state'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">City</label>
                                <input type="text" class="form-control" value="{{ $organization['city'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Zip Code</label>
                                <input type="text" class="form-control" value="{{ $organization['zip_code'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Logo</label>
                                @if(isset($organization['logo']) && $organization['logo'])
                                    <div class="mt-2">
                                        <img src="data:image/png;base64,{{ $organization['logo'] }}" alt="Organization Logo" class="img-thumbnail" style="max-width: 200px; max-height: 100px;">
                                    </div>
                                @else
                                    <div class="text-muted">No logo uploaded</div>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Favicon</label>
                                @if(isset($organization['favicon']) && $organization['favicon'])
                                    <div class="mt-2">
                                        <img src="data:image/png;base64,{{ $organization['favicon'] }}" alt="Organization Favicon" class="img-thumbnail" style="max-width: 200px; max-height: 100px;">
                                    </div>
                                @else
                                    <div class="text-muted">No favicon uploaded</div>
                                @endif
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Bank</label>
                                <input type="text" class="form-control" value="{{ $organization['bank'] ?? '' }}" disabled>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">About</label>
                                <textarea class="form-control" rows="3" disabled>{{ $organization['about'] ?? '' }}</textarea>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <div class="mt-2">
                                    @if(($organization['status'] ?? '') == '1')
                                        <span class="badge badge-success">
                                            Active
                                        </span>
                                    @else
                                        <span class="badge badge-danger">
                                            Inactive
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border rounded p-3 mt-4 mb-3">
                        <div class="d-flex align-items-center mb-3">
                            <i class="ti ti-user me-2"></i>
                            <span class="fw-semibold">Root User</span>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">User Name</label>
                                    <input type="text" class="form-control" value="{{ $organizationRootEmployee['name'] ?? '' }}" disabled>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">User Email</label>
                                    <input type="email" class="form-control" value="{{ $organizationRootEmployee['email'] ?? '' }}" disabled>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                            <h5>Assigned Permissions</h5>
                        </div>
                        <div class="card-body">
                            {{-- <div class="row">
                                @foreach ($assignedPermissions as $permission)
                                    <div class="col-md-3 permission-item">
                                        <div class="form-check mb-3">
                                            @php
                                                [$module, $action] = explode('.', $permission['name']);
                                            @endphp
                                            <input class="form-check-input permission-checkbox" type="checkbox" checked disabled>
                                            <label class="form-check-label">
                                                {{ permissionLabel($module, $action) }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div> --}}

                            @php
                                $groupedPermissions = group_permissions_by_module($assignedPermissions)['assigned'];
                            @endphp

                            <div class="accordion" id="permissionsAccordion">
                                @foreach ($groupedPermissions as $module => $modulePermissions)
                                    @php
                                        $collapseId = 'collapse_' . Str::slug($module, '_');
                                        $headingId = 'heading_' . Str::slug($module, '_');
                                    @endphp

                                    <div class="accordion-item border rounded mb-2">
                                        {{-- Accordion Header --}}
                                        <h2 class="accordion-header d-flex justify-content-between align-items-center px-3 py-2"
                                            id="{{ $headingId }}">
                                            <button class="accordion-button collapsed py-2 px-0" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}"
                                                aria-expanded="false" aria-controls="{{ $collapseId }}">
                                                <i class="bi bi-folder2-open text-primary me-2 fs-5"></i>
                                                {{ prettyModule($module) }}
                                            </button>

                                            <div class="d-flex align-items-center">
                                                <span class="badge bg-outline-primary selected-count"
                                                    title="Selected permissions">0</span>
                                            </div>
                                        </h2>

                                        {{-- Accordion Body --}}
                                        <div id="{{ $collapseId }}" class="accordion-collapse collapse"
                                            aria-labelledby="{{ $headingId }}">
                                            <div class="accordion-body py-2">
                                                <div class="row">
                                                    @foreach ($modulePermissions as $permission)
                                                        @php
                                                            [$moduleName, $action] = explode('.', $permission['name']);
                                                            $readable = permissionLabel($moduleName, $action);
                                                            $desc = \Illuminate\Support\Str::title(
                                                                str_replace(['_', '.'], ' ', $permission['name']),
                                                            );
                                                        @endphp

                                                        <div class="col-md-6 col-lg-4 mb-2">
                                                            <label
                                                                class="d-flex align-items-start justify-content-between border rounded py-2 px-2 permission-row h-100"
                                                                data-permission="{{ \Illuminate\Support\Str::lower($permission['name']) }}"
                                                                title="{{ $desc }}">
                                                                <div class="d-flex align-items-start gap-2">
                                                                    <input class="form-check-input permission-checkbox"
                                                                        type="checkbox" name="permissions[]"
                                                                        value="{{ $permission['id'] }}"
                                                                        id="perm_{{ $permission['id'] }}"
                                                                        @checked(in_array("$moduleName.$action", old('permissions', $selectedPermissions ?? []))) checked disabled>

                                                                    <div>
                                                                        <div class="fw-medium">{{ $readable }}</div>
                                                                        {{-- <div class="text-muted">{{ $desc }}</div> --}}
                                                                    </div>
                                                                </div>

                                                                {{-- <span class="border badge bg-light text-dark ms-2">{{ ucfirst($action) }}</span> --}}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- /Performance Indicator list -->

    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/dev-script/accordion-collapse.js?v='.config('api.version')) }}"></script>
@endpush