@extends('layouts.app')

@section('page_css')
  @parent
  <style type="text/css">
    .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">Vendor</li>
      </ol>
    </nav>
    <!-- breadcrumb end -->
    <!-- Basic Bootstrap Table -->
    <div class="card">
      <div class="d-flex">
        <h5 class="card-header">Vendor</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="#offcanvasAddVendors" aria-controls="offcanvasAddVendors">
              Add
            </button>
          @endif
          @if(@$has_rights['assign'])  
            <a href="{{ route('admin.utility_and_tools.vendor.assign') }}" class="btn btn-sm btn-primary ms-2">Assign</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($vendors as $_vendors)
              @php
                $_vendors_details = $_vendors["details"] ? $_vendors["details"] : "";

                $vendor_email      = "";
                $vendor_contact_no = "";

                if(@$_vendors["email"])
                {
                  $vendor_email = $_vendors["email"];
                }     

                if(@$_vendors["contact_no"])
                {
                  $vendor_contact_no = $_vendors["contact_no"];
                } 
              @endphp
              <tr>
                <td class="text-nowrap">{{ $_vendors["name"] }}</td>
                <td class="text-nowrap">
                  @if(@$has_rights['view_details'])
                    <a href="javascript:void(0);" class="readMore" data-title="Vendor Details" data-description="{{ $_vendors_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="{{ $vendor_email }}" data-clipboard_text="{{ $vendor_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="{{ $vendor_contact_no }}" data-clipboard_text="{{ $vendor_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('{{ $_vendors["logo"] }}','{{ $_vendors["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="#offcanvasEditVendors" aria-controls="offcanvasEditVendors" onclick="loadEditForm({{ $_vendors['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.vendor.destroy'), ['id' => @$_vendors['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.vendor.add') 
  <!-- add form end-->

  <!-- edit form start-->
  <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasEditVendors" aria-labelledby="offcanvasVendorsLabel">
  </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="{{ 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
      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
      $('.delete_confirm').click(function()
      {
        var data_url = $(this).attr('data_url');
        $('#delete_confirm_modal_yes').attr('href', data_url);
        $("#delete_confirm_modal_preview").modal('show');
      });

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

      $(document).on('click', "#vendors_edit_submit", function()
      {
        Vendors.handleEditVendorsFormValidation();
      });

      $('.text_copy_to_clipboard').click(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").text(description);
        $("#readMoreModal").modal('show');
      }

      viewPicInMOdal = function(pic_name = "", pic_title = "Incubator Logo")
      {
        if(pic_name)
        {
          let full_path = "{{asset('uploads/vendors')}}"+"/"+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 = "")
      {
        $.ajax(
          { 
            type : "post", url : "{{ route('admin.utility_and_tools.vendor.edit') }}", 
            data: {"_token" : "{{ csrf_token() }}", 'id' : id},
            success:function(editForm)
            {
              document.getElementById("offcanvasEditVendors").innerHTML = editForm;
            }
          }).done(function(){});
      }
    });
  </script>
  <script src="{{ asset('dist/js/utility_and_tools/vendor.js') }}"></script>
@endsection