@extends('layouts.auth')
@section('content')

@if( count($projects) > 0 || count($sharedProjects)>0 )
<div class="pt-3 container">
   <div class="row pb-3 d-flex mb-5 ">
      <div class="container-fluid d-flex justify-content-end"></div>
      <div class="container">
         @if(!empty($errors->all()))
         <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <span>{{ $error }}</span><br />
            @endforeach
         </div>
         @endif
         @if (session('message'))
         <div class="alert alert-success">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <span>{{ session('message') }}</span><br />
         </div>
         @endif
         @if( count($projects) > 0 )
         <div class="d-none d-sm-block">
            <div class="d-flex flex-row mb-3">
               <h3 class="mt-2">All Projects</h3>
               <a data-toggle="modal" data-target="#createModal">
                  <button class="btn btn-lg btn-primary ml-5 mt-2" style="border-radius:3px">
                     <span class="mr-1">+</span>
                     New Project
                  </button>
               </a>
               <a data-toggle="modal" data-target="#importModal">
                  <button class="btn btn-lg btn-light ml-3 mt-2" style="border-radius:3px">
                     <span class="mr-1">+</span>
                     Import from Postman
                  </button>
               </a>
            </div>
         </div>
         <div class="d-block d-sm-none">
            <div class="row">
               <h3 class="mt-2 col">All Projects</h3>
            </div>
            <div class="row">
               <div class="col d-flex">
                  <a data-toggle="modal" data-target="#createModal">
                     <button class="btn btn-lg btn-primary ml-0 mt-2" style="border-radius:3px">
                        <span class="mr-1">+</span>
                        New Project
                     </button>
                  </a>
                  <a data-toggle="modal" data-target="#importModal">
                     <button class="btn btn-lg btn-light ml-3 mt-2" style="border-radius:3px">
                        <span class="mr-1">+</span>
                        Import from Postman
                     </button>
                  </a>
               </div>
            </div>
         </div>
         @else
         @if( count($sharedProjects) > 0 )
         <div class="d-flex justify-content-start">
            <a data-toggle="modal" data-target="#createModal">
               <button class="btn btn-lg btn-primary mt-2" style="border-radius:3px; padding:16px; font-size:18px">
                  <span class="mr-1">+</span>
                  New Project
               </button>
            </a>
         </div>
         @else
         <div class="d-flex justify-content-center">
            <a data-toggle="modal" data-target="#createModal">
               <button class="btn btn-lg btn-primary mt-2" style="border-radius:3px; padding:16px; font-size:18px">
                  <span class="mr-1">+</span>
                  New Project
               </button>
            </a>
         </div>
         @endif
         @endif
         <div class="project-card m-project-card">
            @if( count($projects) > 0 )
            @foreach ( $projects as $project )
            <div class="d-flex justify-content-center">
               <div class="project-card ">
                  <a href="{{ url('/projects/'.$project->id) }}" class="" aria-label="{{ config('app.name') }} - Home">
                     <div class="d-flex justify-content-center project-details">
                        <div class="flex-shrink-0 w-100">
                           <div class="btn btn-white h-100 d-flex flex-column mt-2  pb-3 px-0 project-detail " style="position:relative;cursor:default">
                              <div class="mt-0 pt-0" style="text-align:left;width:89%">
                                 <a href="{{ url('/projects/'.$project->id) }}" class="w-100" aria-label="{{ config('app.name') }} - Home">

                                    <h4 class="pt-5 mb-0 pb-2 projectNameScrollable" style="font-weight:600;color:black;overflow:scroll">{{$project->name}}</h4>

                                 </a>
                                 <div class="d-flex mt-0">
                                    <a href="{{ url('/projects/'.$project->id) }}" class="w-100 d-flex pt-1" aria-label="{{ config('app.name') }} - Home">
                                       <div class="rounded-circle ml-0" style="z-index:0; width: 30px;height: 30px;background: transparent;border-radius: 50px;">
                                          <img src="{{ asset('/images/logo/logo-icon-light.png') }}" class="w-75" />
                                       </div>
                                       <div style="color:grey;font-size:13px" class="pt-1">

                                          {{ $project->files()->where('type', 'file')->count() }}
                                          @if($project->files()->where('type', 'file')->count()==1)
                                          Endpoint
                                          @else
                                          Endpoints
                                          @endif

                                       </div>
                                    </a>
                                    <div class="dropdown show float-right project-options mb-4 d-none menu-button" style="position: absolute; bottom:0; right: 0;z-index:10;">
                                       <a class="btn menu-button project-detail-dropdown mr-1" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                          <img src="{{asset('images/icon/more.svg')}}" alt="project options">
                                       </a>

                                       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                                          <a class="dropdown-item" data-toggle="modal" data-target="#renameModal" data-name="{{ $project->name }}" data-id="{{$project->id}}">Rename</a>
                                          <a class="dropdown-item" data-toggle="modal" data-target="#deleteModal" data-name="{{ $project->name }}" data-id="{{$project->id}}">Delete</a>

                                          <form id="share-form" action="{{ url('/project') }}" method="POST" style="display: none;">
                                             @csrf
                                             <input name="_method" type="hidden" value="PUT">
                                             <input class="form-control" name="allow_team" style="display:none;" value=1 required>
                                             <input class="form-control" id="projectId" name="projectId" style="display:none;" value="{{ $project->id }}" required>
                                          </form>
                                          {{-- <button class="dropdown-item" data-toggle="modal" data-target="#deleteModal"
                                          data-name="{{ $project->name }}" data-id="{{$project->id}}">Share with
                                          team</button> --}}
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <!-- <sdiv>Hello</div> -->
                           </div>
                        </div>
                     </div>
                  </a>
               </div>
            </div>
            @endforeach
            @endif
         </div>

         @if( count($sharedProjects) > 0 )
         <h3 class="mt-5">Shared Projects</h3>
         <div class="project-card m-project-card mt-3">
            @foreach ( $sharedProjects as $project )
            <div class="d-flex justify-content-center mb-4">
               <div class="project-card ">
                  <div class="d-flex justify-content-center project-details">
                     <div class="flex-shrink-0 w-100">
                        <div class="btn btn-white h-100 d-flex flex-column mt-2  pb-3 px-0 project-detail " style="position:relative;cursor:default">
                           <div class="mt-0 pt-0" style="text-align:left;width:89%">
                              <a href="{{ url('/projects/'.$project->id) }}" class="" aria-label="{{ config('app.name') }} - Home">
                                 <h4 class="pt-5 mb-0 pb-2 projectNameScrollable" style="font-weight:600;color:black;overflow:scroll">{{$project->name}}</h4>
                              </a>
                              <div class="d-flex mt-0">
                                 <a href="{{ url('/projects/'.$project->id) }}" class="w-100 d-flex pt-1" aria-label="{{ config('app.name') }} - Home">
                                    <div class="rounded-circle ml-0" style="z-index:0; width: 30px;height: 30px;background: transparent;border-radius: 50px;">
                                       <img src="{{ asset('/images/logo/logo-icon-light.png') }}" class="w-75" />
                                    </div>
                                    <div style="color:grey;font-size:13px" class="pt-1">

                                       {{ $project->files()->where('type', 'file')->count() }}
                                       @if($project->files()->where('type', 'file')->count()==1)
                                       Endpoint
                                       @else
                                       Endpoints
                                       @endif

                                    </div>
                                 </a>
                                 <div class="dropdown show float-right project-options mb-4 d-none menu-button" style="position: absolute; bottom:0; right: 0;z-index:10;">
                                    <a class="btn menu-button project-detail-dropdown mr-1" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                       <img src="{{asset('images/icon/more.svg')}}" alt="project options">
                                    </a>

                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                                       <a class="dropdown-item" data-toggle="modal" data-target="#renameModal" data-name="{{ $project->name }}" data-id="{{$project->id}}">Rename</a>
                                       <a class="dropdown-item" data-toggle="modal" data-target="#deleteModal" data-name="{{ $project->name }}" data-id="{{$project->id}}">Delete</a>

                                       <form id="share-form" action="{{ url('/project') }}" method="POST" style="display: none;">
                                          @csrf
                                          <input name="_method" type="hidden" value="PUT">
                                          <input class="form-control" name="allow_team" style="display:none;" value=1 required>
                                          <input class="form-control" id="projectId" name="projectId" style="display:none;" value="{{ $project->id }}" required>
                                       </form>
                                       {{-- <button class="dropdown-item" data-toggle="modal" data-target="#deleteModal"
                                          data-name="{{ $project->name }}" data-id="{{$project->id}}">Share with
                                       team</button> --}}
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!-- <sdiv>Hello</div> -->
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            @endforeach
            @endif
         </div>

      </div>


   </div>
   <div>
   </div>
</div>
@else
<div class="d-flex justify-content-center align-items-center pt-4 user-welcome">
   <div class="container ">
      <img class="mx-auto d-block" src="{{asset('/images/icon/spaceship.svg')}}" alt="apibeat's spaceship">
      <h3 class="text-center"><b>Let's Get Started</b></h3>
      <p class="text-center" style="font-size: 16px; color:black">To get started with apibeats, you would first need to add your endpoints into the platform.</p>
      <div class="container mt-5">
         <div class="row justify-content-center">
            <div class="col-md-4">
               <div class="card py-5 px-5 ">
                  <img height="90px" class="mx-auto d-block" src="{{asset('/images/icon/newproject.svg')}}" alt="apibeat's spaceship">
                  <h5 class="text-center mt-5"><strong>New project</strong></h5>
                  <p class="text-center pb-3">Organize and save your endpoints manually into folders</p>
                  <a data-toggle="modal" data-target="#createModal">
                     <button class="btn btn-primary mt-4 px-5 py-3 mx-auto d-block">
                        <strong class="px-2">New Project</strong>
                     </button>
                  </a>
               </div>
            </div>
            <div class="col-md-4">
               <div class="card py-5 px-5 ">
                  <img height="90px" class="mx-auto d-block" src="{{asset('/images/icon/import.svg')}}" alt="apibeat's spaceship">
                  <h5 class="text-center mt-5"><strong>Import from Postman</strong></h5>
                  <p class="text-center pb-3">Import your collections directly as a new project</p>
                  <a data-toggle="modal" data-target="#importModal">
                     <button class="btn btn-primary mt-4 px-5 py-3 mx-auto d-block">
                        <strong class="px-2">Import Now</strong>
                     </button>
                  </a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endif
<div class="dropup">
   <img class="btn mr-3 mb-4 p-0 position-fixed" style="border:none;bottom:0;right:0;background-color:rgba(255, 255, 255, 0);z-index:999" src="{{asset('images/icon/help-icon.svg')}}" width="65px" alt="Help Icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

   <div class="dropdown-menu mr-4 mb-0">
      <!-- Dropdown menu links -->
      <a class="dropdown-item px-2" target="_blank" href="https://geekyants-products.typeform.com/to/C7eb64yK">Report a bug</a>
      <a class="dropdown-item px-2" target="_blank" href="https://geekyants-products.typeform.com/to/lBs600">Request a feature</a>
      <a class="dropdown-item px-2" target="_blank" href="https://geekyants-products.typeform.com/to/HCMlft">Feedback</a>
      <a class="dropdown-item px-2" target="_blank" href="https://www.notion.so/geekyants/Learn-the-shortcuts-edf204b1cf53414f9b637adaab84ae1b">Keyboard Shortcuts</a>
   </div>
</div>
<!-- Modal -->
<!--Rename Modal -->
<div class="modal fade " id="renameModal" tabindex="-1" role="dialog" aria-labelledby="renameModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header border-0 mx-2">
            <h4 class="h4 " id="renameModalLabel">Rename Project</h4>

         </div>
         <div>

            <form method="POST" action="{{ url('/project') }}">
               @csrf
               <input name="_method" type="hidden" value="PUT">
               <div class="modal-body  border-bottom pb-4 my-3 ">
                  <div class="mx-2">
                     <div class="mb-2" style="font-size:16px;font-weight:bold;">Project Name</div>
                     <input type="text" class="form-control" id="projectName" name="name" type="text" placeholder="New Project Name" value="" autofocus required>
                     <input class="form-control" id="projectId" name="projectId" style="display:none;" value="" required>
                  </div>
               </div>

               <div class="modal-footer ">
                  <button type="button" class="btn btn-lg btn-outline-secondary px-3 modal-button" data-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-lg btn-primary  px-3">Save</button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<!--Create Modal -->
<div class="modal fade " id="createModal">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header border-0 mx-2">
            <h4 class=" h4" id="createModalLabel">New Project</h4>

         </div>
         <div>

            <form method="POST" action="{{ url('/project') }}" id="create-project-form">
               @csrf
               <input name="_method" type="hidden" value="POST">
               <div class="modal-body pb-4 my-3 border-bottom">
                  <div class="mx-2 ">
                     <label for="" clanamess="my-1" style="font-weight:bold;font-size:16px;">{{ __('Project Name') }}</label>

                     <div>
                        <input id="createProjectName" type="text" class="form-control" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                        @error('name')
                        <span class="invalid-feedback" role="alert">
                           <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                     </div>

                  </div>

               </div>

               <div class="modal-footer ">
                  <button type="button" class="btn btn-lg btn-outline-secondary px-3 modal-button" data-dismiss="modal">Cancel</button>
                  <button id="create-project-submit-btn" type="submit" class="btn btn-primary btn-lg  px-3" style="width:77px" ;>
                     <span class="default">Create</span>
                     <span class="loading-text d-none">
                        <div class="spinner-border spinner-border-sm text-light" role="status">
                     </span>
                  </button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header  pb-4 border-bottom mb-3 text-break">
            <h4 class="modal-title text-left mx-2" id="deleteModalLabel">Delete Project</h4>

         </div>
         <form method="POST" action="{{ url('/project') }}">
            @csrf
            <input name="_method" type="hidden" value="DELETE">
            <input class="form-control" id="projectIdDelete" name="projectId" style="display:none;" value="" required>
            <div class="modal-footer">
               <button type="button" class="btn btn-lg modal-button px-3" data-dismiss="modal">Cancel</button>
               <button type="submit" class="btn btn-lg btn-danger px-3">Yes, Delete</button>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header border-0 mx-2">
            <h4 class=" h4" id="importModalLabel">Import Postman Collection</h4>

         </div>
         <div>

            <form method="POST" action="{{ url('/import-postman-collection') }}" enctype="multipart/form-data">
               @csrf
               <input name="_method" type="hidden" value="POST">
               <div class="modal-body pb-4 my-3 border-bottom">
                  <div class="mx-2 ">
                     <label for="file" class="p-2 px-3 btn btn-primary">Choose file</label>
                     <label class="file">
                        <input class="postman-file-input" type="file" accept=".json" id="file" aria-label="File browser" onchange="form.submit()" name="postman-collection">
                        <span class="file-custom"></span>
                     </label>

                     <div>


                        @error('name')
                        <span class="invalid-feedback" role="alert">
                           <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                     </div>


                  </div>

               </div>

               <div class="modal-footer ">
                  <span class="mr-auto">Exporting from Postman? <a target="_blank" href="https://www.notion.so/geekyants/Exporting-Collections-from-Postman-afbfac79a2754563aa4a5e2a0e44a49d">Learn how <img src="{{asset('/images/icon/arrow.svg')}}" width="4.5px" alt="arrow"></a></span>
                  <button type="button" class="btn btn-lg btn-outline-secondary px-3 modal-button" data-dismiss="modal">Cancel</button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<script>
   $("#create-project-form").submit(function(e) {
      $("#create-project-submit-btn span.default").hide();
      $("#create-project-submit-btn span.loading-text").removeClass('d-none');
      $("#create-project-submit-btn span.loading-text").show();
      $("#create-project-submit-btn").prop('disabled', true);
   });

   $('#renameModal').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget)
      var projectName = button.data('name')
      var projectId = button.data('id')
      $(this).find('#projectName').val(projectName);
      $(this).find('#projectId').val(projectId);
      setTimeout(function() {
         $("#projectName").select()
      }, 450);

   });
   $('#deleteModal').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget)
      var projectName = button.data('name')
      var projectId = button.data('id')
      $(this).find('.modal-title').text('Are you sure you want to delete the project "' + projectName + '"?')
      $(this).find('#projectIdDelete').val(projectId);
   });
   $('#createModal').on('show.bs.modal', function(event) {

      setTimeout(function() {
         $('#createProjectName').focus();
      }, 300);
   });

   $('document').ready(function() {
      var openCreateModal = "{!! session('create') !!}";

      if (openCreateModal) {
         $('#createModal').modal('show');
      }
   })
</script>
@endsection
@section("body-classes")
"dashboard"
@endsection