@extends('layouts.app')

@section('form-title') {{ __('Project report') }} @endsection
@section('form-sub-title') {{ $project->title }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('projects.index') }}">{{ __('Projects') }}</a> </li> 
<li class="breadcrumb-item"><a href="{{ route('projects.show', $project->uuid) }}">{{ $project->title }}</a> </li>
<li class="breadcrumb-item">{{ __('Project report') }}</li>
@endsection
    
@section('content')

<div class="pcoded-inner-content">
  <div class="main-body">
    <div class="page-wrapper">
      <div class="page-body">
        <div class="row">
          <div class="card">
            <div class="card-header">
              <h5>{{ __('Project report') }} - {{ $project->title }}</h5>
            </div>
            <div class="card-block">
              <div class="row mb-3 buttons" style="display: none;">
                <div class="col-sm-12">
                  @include('projects.bookings.buttons')
                </div>
              </div>
              <div id="div-bookings"></div>
              @if(canViewUpdate('view select options and pulldown + apply button'))
              <div class="row mb-3 buttons" style="display: none;">
                <div class="col-sm-3">
                  <select id="bullk_action" class="form-select form-control form-control-inverse fill">
                    <option value="0">{{ __('With selected') }}</option>
                    <option value="delete">{{ __('Delete') }}</option>
                    <option value="move">{{ __('Move to other project') }}</option>
                  </select>
                </div>
                <div class="col-sm-2">
                  <button type="button" class="btn btn-primary mt-1 me-2 apply">{{ __("Apply") }}</button>
                </div>
              </div>
              @endif
              <div class="row buttons" style="display: none;">
                <div class="col-sm-12">
                  @include('projects.bookings.buttons')
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@include('partials.modals.delete')
@include('projects.bookings.edit-modal')
@include('projects.bookings.move-modal')

@endsection

@push('child-scripts')
<script>
  $(document).ready(function(){
    fetch_bookings();
  });

  $(document).on('change', "#checkall", function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
  });

  $(document).on('click', '.apply', function() {
    let selected_values = $('input[name="bookings[]"]:checked').map(function() {
      return $(this).val();
    }).get().join(',');

    let action = $('#bullk_action').val();
    
    if (selected_values !== '' && action) {
      if (action === 'delete') {
        bulkDelete(selected_values);
      } else if(action === 'move') {
        $('#move_booking_ids').val(selected_values);
        $('#move_project_booking_modal').modal('show');
      }
    }
  });

  function moveBookings(selected_values) {
    let action = $('#bullk_action').val();

    $.ajax({
      type: 'POST',
      url: "{{ route('project.bookings.bulk.action') }}",
      data: {action: action, booking_ids: selected_values},
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      success: function(resp) {
        if(resp.success){
          fetch_bookings();
          toastr["success"]("{{ __('Booking updated successfully') }}");
        }
      }
    });
  }

  function bulkDelete(selected_values) {
    let action = $('#bullk_action').val();

    swal({
      title: "{{ __('Are you sure you want to delete this?') }}",
      text: "",
      type: "warning",
      showCancelButton: true,
      confirmButtonClass: "btn-danger",
      confirmButtonText: "{{ __('Yes, delete it!') }}",
      closeOnConfirm: false
    }, function() {
      $.ajax({
        type: 'POST',
        url: "{{ route('project.bookings.bulk.action') }}",
        data: {action: action, booking_ids: selected_values},
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(resp) {
            if(resp.success){
              swal.close();
              fetch_bookings();
              toastr["success"]("{{ __('Booking updated successfully') }}");
            }
        }
      });
    });
  }

  $(document).on('click', '.change-me', function(){
    let booking_id = $(this).data('booking-id');
    let booking_type = $(this).data('booking-type');
    
    $.ajax({
        type: 'POST',
        url: "{{ route('project-bookings.update', '_id_') }}".replace('_id_', booking_id),
        data: {action: 'change-type', _method: 'PUT', booking_type: booking_type, booking_id: booking_id},
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(resp) {
            if(resp.success){
              fetch_bookings();
              toastr["success"]("{{ __('Booking updated successfully') }}");
            }
        },
        error: function(xhr) {
          $('#errors-list').html('');
          $.each(xhr.responseJSON.errors, function(key, value) {
            $('#errors-list').append('<li><i class="fas fa-exclamation-circle error-icon me-1"></i>' + value + '</li>');
            $('#booking-errors').show();
          });
        }
    });
  });

  $(document).on('click', '.edit-me', function(){
    $('#edit_booking_id').val($(this).data('booking-id'));
    $('#client').val($(this).data('client-id'));
    $('#project').val($(this).data('project-id'));
    $('#old_project').val($(this).data('project-id'));
    
    if($(this).data('task-id') !== ''){
      $('#task').val($(this).data('task-id'));
      $('#old_task').val($(this).data('task-id'));
    }
    
    $('#booking_date').val($(this).data('booking-date'));
    $('#booking_time_hours').val($(this).data('booking-time-hours'));
    $('#booking_time_minutes').val($(this).data('booking-time-minutes'));
    $('input[name="booking_type"][value="' + $(this).data('booking-type') + '"]').prop('checked', true);
    $('#description').val($(this).data('description'));
    $('#booker').val($(this).data('booker-id'));

    $('#edit_project_booking_modal').modal('show');
  });

  $('#frm-update-booking').on('submit', function(e) {
      e.preventDefault();
      $('#booking-errors').hide();
      let booking_id = $('#edit_booking_id').val();

      $.ajax({
          type: 'POST',
          url: "{{ route('project-bookings.update', '_id_') }}".replace('_id_', booking_id),
          data: $(this).serialize(),
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(resp) {
              if(resp.success){
                $('#edit_project_booking_modal').modal('hide');
                fetch_bookings();
                toastr["success"]("{{ __('Booking updated successfully') }}");
              }
          },
          error: function(xhr) {
            $('#errors-list').html('');
            $.each(xhr.responseJSON.errors, function(key, value) {
              $('#errors-list').append('<li><i class="fas fa-exclamation-circle error-icon me-1"></i>' + value + '</li>');
              $('#booking-errors').show();
            });
          }
      });
  });

  $(document).on('change','#client',function(){
    let client = $(this).val();
    prepareProjecstHtml(client);
  });

  $(document).on('change','#project',function(){
    let project = $(this).val();
    prepareTaskstHtml(project);
  });

  function prepareProjecstHtml(client){
    $.ajax({
      method: 'post',
      url: "{{ route('projects.dd') }}",
      data: {client: client, selected_project: $('#old_project').val()},
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      success: function(resp){
        $('#div_projects').html(resp).promise().done(function() {
          prepareTaskstHtml($('#project').val());
        });
      }
    });
  }

  function prepareTaskstHtml(project){
    $.ajax({
      method: 'post',
      url: "{{ route('tasks.dd') }}",
      data: {project: project, selected_task: $('#old_task').val()},
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      success: function(resp){
        $('#div_tasks').html(resp);
      }
    });
  }

  $(document).on('change','#move_client',function(){
    let client = $(this).val();
    prepareProjecstHtmlMove(client);
  });

  $(document).on('change','#move_project',function(){
    let project = $(this).val();
    prepareTaskstHtmlMove(project);
  });

  function prepareProjecstHtmlMove(client){
    $.ajax({
      method: 'post',
      url: "{{ route('projects.dd') }}",
      data: {client: client, name: 'move_project'},
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      success: function(resp){
        $('#div_move_projects').html(resp)
      }
    });
  }

  function prepareTaskstHtmlMove(project){
    $.ajax({
      method: 'post',
      url: "{{ route('tasks.dd') }}",
      data: {project: project, name: 'move_task'},
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      success: function(resp){
        $('#div_move_tasks').html(resp);
      }
    });
  }

  $('#frm-move-bookings').on('submit', function(e) {
      e.preventDefault();
      $('#move-booking-errors').hide();

      $.ajax({
          type: 'POST',
          url: "{{ route('project.bookings.bulk.action') }}",
          data: $(this).serialize(),
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(resp) {
              if(resp.success){
                $('#move_project_booking_modal').modal('hide');
                fetch_bookings();
                toastr["success"](resp.msg);
              }
          },
          error: function(xhr) {
            $('#move-errors-list').html('');
            $.each(xhr.responseJSON.errors, function(key, value) {
              $('#move-errors-list').append('<li><i class="fas fa-exclamation-circle error-icon me-1"></i>' + value + '</li>');
              $('#move-booking-errors').show();
            });
          }
      });
  });
  
  function fetch_bookings(){
    let project_id = "{{ $project->id }}";

    $.ajax({
      url: "{{ route('project-bookings.index') }}",
      data: {project_id: project_id},
      success: function(resp){
        $('#div-bookings').html(resp.list);

        initFooTable();

        if(resp.show_buttons){
          $('.buttons').each(function(index){
            $(this).show();
          });
        }
      }
    });
  }

  function initFooTable(){
    $('.data-table').footable({
      "paging": {
        "enabled": false,
      },
      "sorting": {
        "enabled": true
      }
    });
  }
</script>
@endpush