@extends('layouts.app')

@section('page_css')
  @parent
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/katex.css') }}" />
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/editor.css') }}" />
  <style>
    .action_div_width{ width:12rem; }
    .pic_view_modal_css{ height:auto; object-fit:contain; max-width:70%; }
  </style>
@endsection

@section('content')
  <!-- Content -->
  <div class="container-xxl flex-grow-1 container-p-y">
    <!-- breadcrumb start -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <!-- 
        <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li> 
        -->
        <li class="breadcrumb-item active">Utility And Tools</li>
        <li class="breadcrumb-item active">Benefit</li>
      </ol>
    </nav>
    <!-- breadcrumb end -->
    <!-- Basic Bootstrap Table -->
    <div class="card">
      <div class="d-flex">
        <h5 class="card-header">Benefit</h5>
        <div class="mt-4 mx-3">
          @if(@$has_rights['add'])
            <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddBenefits" aria-controls="offcanvasAddBenefits">
              Add
            </button>
          @endif
          @if(@$has_rights['assign'])
            <a href="{{ route('admin.utility_and_tools.benefit.assign') }}" class="btn btn-sm btn-primary ms-2">Assign</a>
          @endif
          @if(@$has_rights['mark_benefit'])
            <a href="{{ route('admin.utility_and_tools.benefit.mark_benefits') }}" class="btn btn-sm btn-primary ms-2">Mark Benefit</a>
          @endif
        </div>
      </div>
      <div class="card-datatable table-responsive">
        <table class="datatables-users table" id="BasicDataTable">
          <thead>
            <tr>
              <th class="text-nowrap">Name</th>
              <th class="text-nowrap">Details</th>
              <th class="text-nowrap text-center">Contact</th>
              <th class="text-nowrap">Logo</th>
              <th class="text-nowrap">Action</th>
            </tr>
          </thead>
          <tbody classs="table-border-bottom-0">
            @foreach($benefits as $_benefits)
              @php
                $_benefits_details  = $_benefits["details"] ? $_benefits["details"] : "";

                $benefit_email      = "";
                $benefit_contact_no = "";

                if(@$_benefits["email"])
                {
                  $benefit_email = $_benefits["email"];
                }       

                if(@$_benefits["contact_no"])
                {
                  $benefit_contact_no = $_benefits["contact_no"];
                }   
              @endphp
              <tr>
                <td class="text-nowrap">{{ $_benefits["name"] }}</td>
                <td class="text-nowrap">
                  @if(@$has_rights['view_details'])
                    <a href="javascript:void(0);" class="readMore" data-title="Benefit Details" data-description="{{ $_benefits_details }}">
                      <span class="badge bg-label-primary">View Details</span>
                    </a>
                  @else 
                    --
                  @endif
                </td>
                <td class="text-center">
                  <a href="javascript:void(0);" class="text_copy_to_clipboard" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="{{ $benefit_email }}" data-clipboard_text="{{ $benefit_email }}">
                    <i class="fa fa-envelope fa-lg me-1"></i>
                  </a> 
                  <a href="javascript:void(0);" class="text_copy_to_clipboard" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="{{ $benefit_contact_no }}" data-clipboard_text="{{ $benefit_contact_no }}">
                    <i class="fa fa-phone fa-lg me-1"></i>
                  </a> 
                </td>
                <td class="text-nowrap">
                  <a href="javascript:void(0);" class="" onclick="viewPicInMOdal('{{ $_benefits["logo"] }}', '{{ $_benefits["name"] }}')">
                    <span class="badge bg-label-info">View</span>
                  </a>
                </td>
                <td class="text-nowrap">
                  <div class="action_div_width">  
                    @if(@$has_rights['edit'])
                      <a href="javascript:void(0);" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEditBenefits" aria-controls="offcanvasEditBenefits" onclick="loadEditForm({{ $_benefits['id'] }})">
                        <i class="ti ti-edit ti-sm me-1"></i>
                      </a>
                    @endif
                    @if(@$has_rights['delete'])
                      <a href="javascript:void(0);" data_url="{!! tokenize_url(route('admin.utility_and_tools.benefit.destroy'),['id' => @$_benefits['id']]) !!}" class="delete_confirm">
                        <i class="ti ti-trash ti-sm me-1"></i>
                      </a>
                    @endif
                  </div>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!--/ Content -->

  <!-- off canvas start -->

  <!-- add form -->
  @include('admin.utility_and_tools.benefit.add') 
  <!-- add form end-->

  <!-- edit form start-->
  <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasEditBenefits" aria-labelledby="offcanvasBenefitsLabel">
  </div>
  <!-- edit form end-->

  <!-- off canvas end-->
@endsection

@section('modals')
  @parent
  <!--pic models start -->
  <div class="modal fade" id="pic_view_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 id="pic_view_modal_pic_title" class="modal-title">Logo</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="d-flex justify-content-center">
            <img id="pic_view_modal_pic_img" src="" class="pic_view_modal_css" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>                          
  <!--pic models end -->
@endsection

@section('page_scripts')
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/quill/katex.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/vendor/libs/quill/quill.js') }}"></script>

  <script type="text/javascript" src="{{ url('plugins/jquery-validation/dist/jquery.validate.js') }}"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js" integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  @parent
  <script type="text/javascript">
    $(document).ready(function()
    { 
      //notification toaster
      Benefits.fullEdiotrInitialization();
      
      let message = @JSON(session()->get('message'));
      
      if(message)
      {
        if(message.type == 'success')
        {
          showMessage(message.message);
        }
        else if(message.type == 'error')
        {
          showMessage(message.message, "error");
        }
      }

      //jquery events
      $(document).on('click','.delete_confirm',function(){
        var data_url = $(this).attr('data_url');
        $('#delete_confirm_modal_yes').attr('href', data_url);
        $("#delete_confirm_modal_preview").modal('show');
      });

      $(document).on('click','.readMore',function(){
        readMore($(this).data('title'), $(this).data('description'));
      }); 

      $(document).on('click',"#benefits_edit_submit", function()
      {
        Benefits.handleEditBenefitsFormValidation();
      });

      $(document).on('click','.text_copy_to_clipboard',function(){
        console.time('time1');
        
        var temp = $("<input>");
        $("body").append(temp);
        temp.val($(this).data('clipboard_text')).select();
        document.execCommand("copy");
        temp.remove();
        console.timeEnd('time1');
        showMessage("copied");
      });

      //fucntions
      readMore = function(title="",description="")
      {
        $("#readMoreModalTitle").text(title);
        $("#readMoreModalContent").html(description);
        $("#readMoreModal").modal('show');
      }

      viewPicInMOdal = function(pic_name = "", pic_title = "Incubator Logo")
      {
        if(pic_name)
        {
          let full_path = "{{asset('uploads/benefits')}}"+"/"+pic_name;
          $("#pic_view_modal_pic_title").text(pic_title);
          $('#pic_view_modal_pic_img').attr('src',full_path);
          $('#pic_view_modal').modal('show');
        }
        else
        {
          showMessage("No file uploaded", "error");
        }
      }

      loadEditForm = function(id = "")
      {
        document.getElementById("offcanvasEditBenefits").innerHTML = "";

        $.ajax(
        {
          type: "post", url:"{{route('admin.utility_and_tools.benefit.edit')}}", data: {"_token" : "{{ csrf_token() }}", 'id' : id},
          success:function(editForm)
          {
            document.getElementById("offcanvasEditBenefits").innerHTML = editForm;
            
            const fullEditor_edit = new Quill('#benefits_details_editor_edit', 
            {
              // bounds: '#benefits_details',
              placeholder : 'Type Something...', modules : { formula : true, toolbar : Benefits.fullToolbar }, theme : 'snow'
            });
            //
            $("#offcanvasEditBenefits").show();
          }
        }).done(function(){});
      }
      
      $(document).on('click','#benefits_add_submit',function()
      {
        let content = $('#benefits_details_editor_add').find('.ql-editor').html();
        $("#benefits_details_add").val(content);
      });

      $(document).on('click','#benefits_edit_submit',function(e)
      {
        let content = $('#benefits_details_editor_edit').find('.ql-editor').html();
        $("#benefits_details_edit").val(content);
      });
    });
  </script>
  <script type="text/javascript" src="{{ asset('dist/js/utility_and_tools/benefits.js') }}"></script>
@endsection