@extends($layout)

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

    <style>

    </style>
@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <div class="row">
                        <div class="col-6 d-flex align-items-center">
                            <h6 class="mb-5">Share to others</h6>
                        </div>

                    </div>
                </div>
                <div class="card-body">
                    <div class="px-2">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                    </div>
                    <div class="col-lg-12 mb-lg-0 mb-4">
                        <div class="z-index-2">
                            <div class="card-body p-3">
                                <div class="bg-gradient-dark border-radius-lg py-3 pe-1 mb-3">
                                    <div class="chart">
                                        <canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
                                    </div>
                                </div>
                                <h6 class="ms-2 mt-4 mb-0"> {{ $folder->name }} </h6>
                                <p class="text-sm ms-2"> <span class="font-weight-bolder">Created</span>
                                    {{ $folder->created_at }}</p>
                                <div class="container border-radius-lg">
                                    <div class="row">
                                        

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 mb-lg-0 mb-4">
                        <div class="">
                            <div class="card-header pb-0">
                                <h6 class="mb-2">Select User to Share</h6>
                            </div>
                            <form method="POST" action="{{ url("/folders/{$folder->id}/share") }}">
                                @csrf
                            <div class="card-body">
                                <select required id="users" name="users[]" class="form-control" multiple="multiple"></select>
                            </div>
                            <div class="form-group row card-body">
                                <label for="allow_edits" class="col-md-4 col-form-label text-md-right">{{ __('Give Upload / Edit permissions') }}</label>
                            
                                <div class="col-md-6">
                                    <div class="form-check form-switch ps-0">
                                    <input id="allow_edits" type="checkbox" class="form-check-input ms-auto @error('allow_edits') is-invalid @enderror" name="allow_edits">
                                    </div>
                                    @error('allow_edits')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            
                            
                            <div class=" py-3 ps-0">
                                <div class="col-6 text-end">
                                    <button class="btn bg-gradient-dark mb-0" type="submit""><i
                                            class="fas fa-plus"></i>&nbsp;&nbsp;Share</button>
                                </div>
                            </div>
                            </form>
                            <div class="col-lg-12 mb-lg-0 mb-4">
                                <div class="">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-2">Shared Users</h6>
                                    </div>
                                    <div class="card-body">
                                        @if ($folder->sharedUsers->isEmpty())
                                            <p>No users have been shared this folder yet.</p>
                                        @else
                                            <ul>
                                                @foreach ($folder->sharedUsers as $user)
                                                    <li>
                                                        <b>{{ $user->name }}</b> ({{ $user->email }}) - {{ $user->pivot->permissions }}
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#users').select2({
                ajax: {
                    url: '/users/get-all',
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    }
                }
            });
        });
    </script>
@endsection