@extends('layouts.user_type.auth')

@section('companyProfile.oneDriveFolder')

<div class="row">
    <div class="col-12">
        @include('components.alert')

        <div class="card mb-4 mx-4">
            <div class="card p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h3>{{ $company_name }}</h3>
                    <div>
                        <a href="{{ route('companyProfile.company', ['id' => request()->route('id') ? request()->route('id') : null]) }}" class="btn btn-primary me-2">Company</a>
                        <!-- <a href="{{ route('companyProfile.basicInfo', ['id' => request()->route('id') ? request()->route('id') : null]) }}" class="btn btn-info text-dark me-2">Admin Contact</a> -->
                        <a href="{{ route('companyProfile.tenant', ['id' => request()->route('id') ? request()->route('id') : null]) }}" class="btn btn-primary me-2">Tenant</a>
                        <a href="{{ route('companyProfile.microsoft', ['id' => request()->route('id') ? request()->route('id') : null]) }}" class="btn btn-primary me-2">Microsoft</a>
                        <a href="{{ route('companyProfile.oneDriveFolder', ['id' => request()->route('id') ? request()->route('id') : null]) }}" class="btn btn-info text-dark me-2">OneDrive Folder</a>
                        <a href="{{ route('companyProfile.config', ['id' => request()->route('id') ? request()->route('id') : null]) }}" class="btn btn-primary me-2">Config</a>
                        <a href="{{ route('companyProfile.employee', ['id' => request()->route('id')]) }}" class="btn btn-primary me-2">Employee</a>
                    </div>
                </div>
            </div>

            <div class="card-body">

                <div class="d-flex flex-row justify-content-between">
                    <div>
                        <h5 class="mb-0">One Drive Folder</h5>
                    </div>

                    <!-- <div class="d-flex align-items-center">

                        <form method="GET" action="{{ route('companyProfile.oneDriveFolder', ['id' => request()->route('id')]) }}" class="d-flex align-items-center mb-3">
                            <div class="me-3">
                                <select name="status" class="form-control" onchange="this.form.submit()">
                                    <option value="active" {{ request()->status == 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ request()->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                        </form>

                        <button class="btn btn-success" onclick="openFolderModal()">+OneDrive Folder</button>

                    </div> -->
                </div>
                
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Folder Name</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Folder ID</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Parent ID</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                <!-- <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Actions</th> -->
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($oneDriveFolder as $index => $folder)
                                <tr>
                                    <td class="ps-4">
                                        <p class="text-xs font-weight-bold mb-0">{{ $index + 1 }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $folder->folder_name }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $folder->folder_id }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="text-xs font-weight-bold mb-0">{{ $folder->parent_id }}</p>
                                    </td>
                                    <td class="text-center">
                                        <p class="font-weight-bold mb-0 
                                            @if($folder->status == 'inactive')
                                                badge badge-sm bg-gradient-secondary
                                            @elseif($folder->status == 'active')
                                                badge badge-sm bg-gradient-success
                                            @elseif($folder->status == 'deleted')
                                                badge badge-sm bg-gradient-danger
                                            @endif">
                                                {{ ucfirst($folder->status) }}
                                        </p>
                                    </td>
                                    <!-- <td class="text-center">
                                        <a href="#" class="mx-3" data-bs-toggle="modal" data-bs-target="#createEditPackageModal"
                                        onclick="openFolderModal({{ json_encode($folder) }})">
                                            <i class="fas fa-user-edit text-secondary"></i>
                                        </a>
                                    </td> -->
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">No folders found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <div class="d-flex justify-content-end mt-3 me-4">
            <a href="{{ route('companyProfile.show') }}" class="btn btn-danger">Close</a>
        </div>
    </div>
</div>

 <!-- Modal for Creating/Updating Folder -->
 <div class="modal fade" id="folderModal" tabindex="-1" aria-labelledby="folderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="folderForm" action="{{ route('companyProfile.oneDriveFolder.storeOrUpdate', [ 'companyProfileId' => request()->route('id') ?? null]) }}" method="POST">
                @csrf
                <input type="hidden" name="folder_id" id="folder_id">

                <div class="modal-header">
                    <h5 class="modal-title" id="folderModalLabel">Folder Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-3">
                        <label for="folder_name" class="form-label">Folder Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="folder_name" name="folder_name" required>
                    </div>


                    <div class="mb-3">
                        <label for="status" class="form-label">Status<span class="text-danger">*</span></label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function openFolderModal(folder = null) {

        const modal = document.getElementById('folderModal');
        const form = document.getElementById('folderForm');
        const folderNameField = document.getElementById('folder_name');

        form.reset();

        if (folder) {
            document.getElementById('folder_id').value = folder.id;
            folderNameField.value = folder.folder_name;
            folderNameField.setAttribute('readonly', true); 
            document.getElementById('status').value = folder.status;
        } else {

            folderNameField.removeAttribute('readonly');
        }

        const modalInstance = new bootstrap.Modal(modal);
        modalInstance.show();
    }
</script>


@endsection