@extends('layouts.dashboard')

@section('content')
<style>
  .dt-search {
  margin: 10px;
}
</style>
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>View History - {{ $name }}</h1>
        @if($team_lead_name)
          <p><strong>Team Leader:</strong> {{ $team_lead_name }}</p>
        @endif
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
          <li class="breadcrumb-item active">View History</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">

    {{-- Flash Message --}}
    @if (Session::has('message'))
      <div class="col-sm-12">
        <div class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
          {{ Session::get('message') }}
        </div>
      </div>
    @endif

    {{-- Last Activity Section --}}
    <div class="row">
       <div class="col-12 d-flex justify-content-end mb-2">
          <a href="{{ url()->previous() }}" class="btn uniqbtn-btn">
              <i class="fa fa-backward"></i> Back
            </a>
        </div>
    </div>
    <div class="card p-2">
      <div class="row justify-content-between align-items-center">
       
        <div class="col-md-6">
           <div class="card-header border-0">
               <h3 class="card-title mb-0">Last Activity:</h3>
           </div>
        </div>
        <div class="col-md-6 d-flex justify-content-end">
            <!-- Add CO Off Button -->
            <button class="btn uniqbtn-btn  mr-3" data-toggle="modal" data-target="#addCoOffModal">
              + Add CO Off
            </button>
            
        </div>
      </div>
      <div class="card-body  p-0">
        <div class="table-responsive">
          <table class="table text-nowrap table-bordered mt-2">
            <thead>
              <tr>
                <th>Last Activity</th>
                <th>Activity Result</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ $last_activity }}</td>
                <td><span class="badge bg-success text-white p-2"><i class="fa fa-check mr-2"></i>{{ $last_activity_status }}</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

       <div class="col-md-6">
           <div class="card-header border-0 px-0">
               <h4 class="card-title mb-0">No. of com. off left:  <span class="font-weight-bold text-dangerdark">{{ isset($com_off)?$com_off->count:'0' }}</span></h4>
           </div>
        </div>
    </div>

    {{-- Add CO Off Modal --}}
    <div class="modal fade" id="addCoOffModal" tabindex="-1" aria-labelledby="addCoOffModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="coOffForm">
            @csrf
            <input type="hidden" name="employee_id" value="{{ $emp_id }}">
            <div class="modal-header">
              <h5 class="modal-title" id="addCoOffModalLabel">Add CO Off</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label>No. of Days</label>
                <input type="number" name="count" class="form-control" required min="1">
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-success">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    {{-- Team Members --}}
    @if(count($teamMembers) > 0)
      <div class="row mt-3">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Team Members under {{ $name }}</h3>
            </div>
            <div class="card-body  p-0">
              <div class="table-responsive">
                  <table class="table table-head-fixed table-bordered">
                <thead>
                  <tr>
                    <th>Sr. No</th>
                    <th>Member Name</th>
                    <th>Mobile Number</th>
                    <th>Department</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($teamMembers as $index => $member)
                    <tr>
                      <td>{{ $index + 1 }}</td>
                      <td>{{ $member->name }}</td>
                      <td>{{ $member->mobile_number }}</td>
                      <td>{{ $member->department->name ?? 'N/A' }}</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    @endif

    {{-- History Table --}}
    <div class="row mt-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">History</h3>
            <div class="card-tools">
              <div class="input-group input-group-sm" style="width: 150px;">
                <input hidden id="id" value="{{ $emp_id }}">
              </div>
            </div>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="height: 300px;">
              <table id="history-table" class="table table-head-fixed table-striped">
                <thead>
                  <tr>
                    <th>Sr No.</th>
                    <th>Date/Time</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Status</th>
                    <th>Score</th>
                    <th>User Location</th>
                    <th>Reg 1</th>
                    <th>Reg 2</th>
                    <th>Ver 1</th>
                    <th>Failure Reason</th>
                    @if(auth()->user()->id != "18")
                    <th>Late Reason</th>
                    @endif
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

@endsection


@push('scripts')
<script>


  $('#coOffForm').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url: "{{ route('employee.add-com-off') }}",
        type: "POST",
        data: $(this).serialize(),
        success: function(response) {
         //   alert(response.message);
            $('#addCoOffModal').modal('hide');
            location.reload();
        },
        error: function(xhr) {
            console.error(xhr.responseText);
            alert('Error: ' + (xhr.responseJSON?.message ?? 'Something went wrong!'));
        }
    });
});
  

  $('#history-table').DataTable({
    processing: true,
    serverSide: true,
    "bLengthChange": false,
    order: [
      [0, "desc"]
    ],
  //  dom: 'Bfrtip',
    // buttons: [{
    //   extend: 'excelHtml5',
    //   text: 'Excel',
    //   className: 'btn uniqbtn-btn border',
    //   exportOptions: {
    //     columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // Include all columns
    //     format: {
    //       body: function(data, row, column) {
    //         // Extract audio URLs
    //         if (data.includes('<audio')) {
    //           const url = $(data).attr('src');
    //           return url || 'N/A';
    //         }
    //         return data;
    //       }
    //     }
    //   }
    // }, ],
    ajax: {
      url: "{{ route('employee.view-history-datatable') }}", // Backend route
      data: function(d) {
        // Add custom filters to the request
        d.emp_id = $('#id').val();
      }
    },
    columns: [{
        data: 'DT_RowIndex',
        name: 'DT_RowIndex',
        orderable: false,
        searchable: false
      }, // Auto index
      {
        data: 'date_time',
        name: 'date_time'
      },
      {
        data: 'name',
        name: 'name'
      },
      {
        data: 'mobile_number',
        name: 'mobile_number'
      },
      {
        data: 'status',
        name: 'status'
      },
      {
        data: 'score',
        name: 'score'
      },
      {
        data: 'location',
        name: 'location'
      },
      {
        data: 'reg_url_1',
        name: 'reg_url_1'
      },
      {
        data: 'reg_url_2',
        name: 'reg_url_2'
      },
      {
        data: 'ver_url_1',
        name: 'ver_url_1'
      },
      {
          data: 'verify_fail_reason',
          name: 'verify_fail_reason'
      },
      @if(auth()->user()->id != 18)
      {
        data: 'late_reason',
        name: 'late_reason'
      }
      @endif

    ],
    columnDefs: [{
        targets: '_all',
        className: 'text-center'
      }, // Align text properly
      {
        targets: 4, // Specify the column index (e.g., 0 = first column)
        createdCell: function(td, cellData, rowData, row, col) {
          $(td).css({
            'color': rowData.color,
            'font-weight': 'bold'
          }); // Apply custom color to this cell
        }
      },
      {
        targets: 7,
        render: function(data, type, row) {

          return `<audio id="audio_reg1_${row.id}" src="${data}" type="audio/wav"></audio>
                                        <div class="text-center">
                                            <button class="border-0 bg-transparent" id="playPauseButton_reg1_${row.id}"><i class="fa fa-play text-dark" ></i></button>
                                            <a href="${data}" download>
                                                <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                            </a>
                                        </div>`;
        }
      },
      {
        targets: 8,
        render: function(data, type, row) {
          return `<audio id="audio_reg2_${row.id}" src="${data}" type="audio/wav"></audio>
                                        <div class="text-center">
                                            <button class="border-0 bg-transparent" id="playPauseButton_reg2_${row.id}"><i class="fa fa-play text-dark" ></i></button>
                                            <a href="${data}" download>
                                                <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                            </a>
                                        </div>`;
        }
      },
      {
        targets: 9,
        render: function(data, type, row) {
          return `<audio id="audio_ver1_${row.id}" src="${data}" type="audio/wav"></audio>
                                        <div class="text-center">
                                            <button class="border-0 bg-transparent" id="playPauseButton_ver1_${row.id}"><i class="fa fa-play text-dark" ></i></button>
                                            <a href="${data}" download>
                                                <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                            </a>
                                        </div>`;
        }
      }
    ]
  });


  $(document).on('click', 'button[id^="playPauseButton_"]', function() {
        var fullId = $(this).attr('id');
        var parts = fullId.split('_');
        var prefix = parts[0] + '_' + parts[1]; // e.g., "playPauseButton_reg1"
        var id = parts[2]; // The unique ID (e.g., $log->id)

        // Get the audio player element
        const player = document.getElementById('audio_' + prefix.split('playPauseButton_')[1] + '_' + id);

        // Check if the audio element exists
        if (!player) {
            console.error('Audio element not found for id:', id, 'and prefix:', prefix);
            return;
        }

        // Get the icon element inside the button
        var icon = $(this).find('i');

        // Check if the icon exists
        if (!icon.length) {
            console.error('Icon element not found inside button:', fullId);
            return;
        }

        // Pause all other audio tracks and reset their icons
        $('audio').each(function() {
            if (this.id !== player.id) {
                this.pause();
                this.currentTime = 0; // Reset to the beginning
            }
        });

        // Reset all play/pause icons to 'play'
        $('button[id^="playPauseButton_"] i').removeClass('fa-pause').addClass('fa-play');

        // Toggle play/pause for the selected audio
        if (player.paused) {
            player.play();
            icon.removeClass('fa-play').addClass('fa-pause');
        } else {
            player.pause();
            icon.removeClass('fa-pause').addClass('fa-play');
        }

        // Reset icon when the audio ends
        player.removeEventListener('ended', resetIcon); // Ensure no duplicate listeners
        player.addEventListener('ended', resetIcon);

        function resetIcon() {
            icon.removeClass('fa-pause').addClass('fa-play');
        }
    });
    
</script>
@endpush