@extends('layouts.app')

@section('page_css')
  @parent
  <style type="text/css">
    .pic_view_modal_css 
    { 
      height:auto; 
      object-fit:contain;
      max-width:70%;
    }
  </style>
@endsection

@section('content')
<!-- breadcrumb start -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Master</a></li>
    <li class="breadcrumb-item active">Programs</li>
  </ol>
</nav>
<!-- breadcrumb end -->
<!-- Basic Bootstrap Table -->
<div class="card">
  <div class="d-flex">
    <h5 class="card-header">Programs</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="#offcanvasAddPrograms" aria-controls="offcanvasAddPrograms">
          Add
        </button>
      @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">short Name</th>
          <th class="text-nowrap">Logo</th>
          <th class="text-nowrap">Favourite</th>
          <th class="text-nowrap">Action</th>
        </tr>
      </thead>
      <tbody classs="table-border-bottom-0">
        @foreach($programs as $record)
          @php
            $id = $record["id"];
            $edit_url = tokenize_url(route('admin.master.programs.edit'),["id"=>$id]);
            $name = $record["name"];
          @endphp
          <tr>
            <td class="text-nowrap">
              @if($name != '' && strlen($name) > 30)
                @php
                  $title       = "Read More";
                  $description = $name;
                @endphp
                {{ substr($name, 0, 30)  }}
                <a href="javascript:void(0);" class="readMore" data-title="{{ $title }}" data-description="{{ $description }}">
                  <span class="badge bg-label-primary">Read More</span>
                </a>
              @else
                {{ $name ?? '--' }}
              @endif      
            </td>
            <td class="text-nowrap">{{ $record["short_name"] }}</td>
            <td class="text-nowrap">
              <a href="javascript:void(0);" class="" onclick="viewPicInMOdal('{{ $record["logo"] }}','{{ $record["name"] }}')">
                <span class="badge bg-label-info">View</span>
              </a>
            </td>
            <td class="text-nowrap">
                {{ $record["favourite"] }}
            </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="#offcanvasEditPrograms" aria-controls="offcanvasEditPrograms" onclick="loadEditForm(this)" action_url = "{{ $edit_url }}">
                    <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.master.programs.destroy'), ['id' => @$record['id']]) !!}" class="delete_confirm">
                    <i class="ti ti-trash ti-sm me-1"></i>
                  </a>
                @endif
              </div>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

  <!-- add form -->
  @include('admin.master.programs.add') 
  <!-- add form end-->

  <!-- edit form start-->
  <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasEditPrograms" aria-labelledby="offcanvasEditProgramsLabel">
  </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");
        }
      }

      viewPicInMOdal = function(pic_name = "", pic_title = "Program Logo")
      {
        if(pic_name)
        {
          let full_path = "{{asset('uploads/programs')}}"+"/"+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");
        }
      }

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

      $('.readMore').click(function()
      {
        readMore($(this).data('title'), $(this).data('description'));
      }); 
    });
  </script>
  <script src="{{ asset('dist/js/master/programs.js') }}"></script>
@endsection