@extends('layouts.app') 

@section('title', 'Hari Libur')
@section('content')
<div id="alert-container" class="alert-container"></div>

<div class="main-content">
  <div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
      <div class="row align-items-end">
        <div class="col-lg-8">
          <div class="page-header-title">
            <i class="ik ik-calendar bg-blue"></i>
            <div class="d-inline">
              <h5>Hari Libur</h5>
              <span>Manajemen Data Hari Libur</span>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <nav class="breadcrumb-container" aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
              </li>
              <li class="breadcrumb-item active" aria-current="page">Hari Libur</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <!-- Tabel Hari Libur -->
    <div class="row" style="margin-bottom: 16px">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between">
            <h3>Daftar Hari Libur</h3>
            <div>
              <!-- Tombol Hapus Terpilih, disembunyikan secara default -->
              <button type="button" class="btn btn-danger" id="deleteSelectedBtn" style="display: none;">
                <i class="ik ik-trash-2"></i> Hapus Terpilih
              </button>
              <!-- Tombol Tambah Hari Libur -->
              <button type="button" class="btn btn-primary" id="btnTambahHariLibur" data-toggle="modal" data-target="#modalTambahHariLibur">
                <i class="ik ik-plus"></i> Tambah Hari Libur
              </button>
            </div>
          </div>
          <div class="card-body">
            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
              <thead>
                <tr>
                  <!-- Kolom centang -->
                  <th><input type="checkbox" id="selectAll"></th>
                  <th>No</th>
                  <th>Tanggal</th>
                  <th>Keterangan</th>
                  <th>Aksi</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($hariLibur as $item)
                <tr>
                  <td><input type="checkbox" class="select-item" value="{{ $item->id }}"></td>
                  <td>{{ $loop->iteration }}</td>
                  <td>{{ $item->tanggal }}</td>
                  <td>{{ $item->keterangan }}</td>
                  <td>
                    <a href="#" class="editHariLibur" 
                       data-id="{{ $item->id }}" 
                       data-tanggal="{{ $item->tanggal }}"
                       data-keterangan="{{ $item->keterangan }}">
                      <i class="ik ik-edit f-16 mr-15 text-green"></i>
                    </a>
                    <a href="#" class="hapusHariLibur" data-id="{{ $item->id }}">
                      <i class="ik ik-trash-2 f-16 text-red"></i>
                    </a>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Modal Tambah Hari Libur -->
    <div class="modal fade" id="modalTambahHariLibur" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Tambah Hari Libur</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
          </div>
          <!-- FORM TAMBAH HARI LIBUR -->
          <form action="{{ route('harilibur.store') }}" method="POST" id="formTambahHariLibur">
            @csrf
            <div class="modal-body">
              <div class="form-group">
                <label>Tanggal</label>
                <input type="date" name="tanggal" id="tanggal" class="form-control" required
                       oninvalid="this.setCustomValidity('Tanggal tidak boleh kosong.')"
                       oninput="this.setCustomValidity('')">
                <span id="tanggalError" class="text-danger"></span>
              </div>
              <div class="form-group">
                <label>Keterangan</label>
                <input type="text" name="keterangan" id="keterangan" class="form-control" required
                       oninvalid="this.setCustomValidity('Keterangan tidak boleh kosong.')"
                       oninput="this.setCustomValidity('')">
                <span id="keteranganError" class="text-danger"></span>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
              <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
          </form>
          <!-- END FORM TAMBAH HARI LIBUR -->
        </div>
      </div>
    </div>

    <!-- Modal Konfirmasi Hapus -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteConfirmModalLabel">Konfirmasi Hapus</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Apakah Anda yakin ingin menghapus data ini?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
            <button type="button" id="confirmDeleteBtn" class="btn btn-danger">Hapus</button>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>
@endsection

@section('script')
<script>
// ========================================================================
// Fungsi untuk menampilkan alert Bootstrap
// ========================================================================
function showBootstrapAlert(message) {
  var alertHtml = '<div class="alert alert-warning alert-dismissible fade show custom-alert" role="alert">' +
                  '<strong>Perhatian!</strong> ' + message +
                  '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                  '<span aria-hidden="true">&times;</span></button></div>';
  $('#alert-container').append(alertHtml);
  setTimeout(function() {
    $('.custom-alert').fadeOut(500, function() {
      $(this).remove();
    });
  }, 3000);
}

$(document).ready(function() {
  // Inisialisasi DataTable
  if ($.fn.DataTable.isDataTable('#data_table')) {
    $('#data_table').DataTable().destroy();
  }
  var table = $('#data_table').DataTable({
    destroy: true,
    dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    language: {
      lengthMenu: "Tampilkan _MENU_ entri",
      search: "Cari:",
      info: "Menampilkan _START_ hingga _END_ dari _TOTAL_ entri",
      infoEmpty: "Menampilkan 0 hingga 0 dari 0 entri",
      infoFiltered: "(disaring dari _MAX_ total entri)",
      paginate: {
        first: "Pertama",
        last: "Terakhir",
        next: "Selanjutnya",
        previous: "Sebelumnya"
      },
      zeroRecords: "Tidak ditemukan data yang sesuai"
    },
    paging: true,
    searching: true,
    ordering: true,
    drawCallback: function(settings) {
      var api = this.api();
      // Perbarui nomor urut di kolom kedua
      api.column(1, { page: 'current' }).nodes().each(function(cell, i) {
        cell.innerHTML = i + 1;
      });
    }
  });

  $('#data_table_filter input').addClass('form-control form-control-sm');
  $('#data_table_length select').addClass('form-control form-control-sm');

  var currentlyEditing = null;
  var deleteMode = ''; // 'single' atau 'mass'
  var deleteId = null;
  var deleteIds = [];

  // ========================================================================
  // VALIDASI SAAT KLIK TOMBOL SIMPAN PADA MODAL TAMBAH HARI LIBUR
  // ========================================================================
  $('#formTambahHariLibur').on('submit', function(e) {
    e.preventDefault(); // cegah submit form secara default
    var form = this;
    var tanggal = $(form).find('input[name="tanggal"]').val();
    
    $.ajax({
        url: '{{ route("harilibur.check-unique") }}',
        method: 'GET',
        data: { tanggal: tanggal },
        success: function(response) {
          if (response.exists) {
            showBootstrapAlert('Hari libur untuk tanggal tersebut sudah ada, silahkan pilih tanggal lain.');
          } else {
            $('#formTambahHariLibur').off('submit');
            form.submit();
          }
        },
        error: function() {
          showBootstrapAlert('Terjadi kesalahan saat memeriksa keunikan hari libur.');
        }
    });
  });

  // --- Fitur Centang dan Toggle Tombol dengan Animasi ---
  function toggleButtonVisibility() {
    if ($('.select-item:checked').length > 0) {
      $('#btnTambahHariLibur').hide();
      $('#deleteSelectedBtn').show();
    } else {
      $('#deleteSelectedBtn').hide();
      $('#btnTambahHariLibur').show();
    }
  }

  // Select All checkbox
  $('#selectAll').on('click', function() {
    var isChecked = $(this).prop('checked');
    $('.select-item').prop('checked', isChecked);
    toggleButtonVisibility();
  });

  // Setiap checkbox pada baris
  $('#data_table').on('click', '.select-item', function() {
    if (!$(this).prop('checked')) {
      $('#selectAll').prop('checked', false);
    }
    toggleButtonVisibility();
  });

  // --- Inline Edit Hari Libur ---
  $('#data_table').on('click', '.editHariLibur', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var row = $(this).closest('tr');
    if (currentlyEditing && currentlyEditing[0] !== row[0]) {
      showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
      return;
    }
    row.addClass('editing');
    currentlyEditing = row;
    var originalData = {
      tanggal: row.find('td').eq(2).text().trim(),
      keterangan: row.find('td').eq(3).text().trim(),
      aksi: row.find('td').eq(4).html()
    };
    row.data('original', originalData);

    var id = $(this).data('id');
    var tanggal = $(this).data('tanggal');
    var keterangan = $(this).data('keterangan');

    // Ubah kolom Tanggal menjadi input type date
    var tanggalHtml = '<input type="date" class="form-control input-tanggal" value="' + tanggal + '" required ' +
                      'oninvalid="this.setCustomValidity(\'Tanggal tidak boleh kosong.\')" ' +
                      'oninput="this.setCustomValidity(\'\')">';
    row.find('td').eq(2).html(tanggalHtml);

    // Ubah kolom Keterangan menjadi input text
    var keteranganHtml = '<input type="text" class="form-control input-keterangan" value="' + keterangan + '" required ' +
                         'oninvalid="this.setCustomValidity(\'Keterangan tidak boleh kosong.\')" ' +
                         'oninput="this.setCustomValidity(\'\')">';
    row.find('td').eq(3).html(keteranganHtml);

    // Ganti kolom Aksi dengan tombol simpan dan batal
    var aksiHtml = '<a href="#" class="saveHariLibur" data-id="' + id + '"><i class="ik ik-check text-success" style="font-size: 18px;"></i></a> ' +
                   '<a href="#" class="cancelHariLibur"><i class="ik ik-x text-danger" style="font-size: 18px; margin-left:12px;"></i></a>';
    row.find('td').eq(4).html(aksiHtml);

    // Berikan fokus ke input tanggal
    row.find('.input-tanggal').trigger('focus');
  });

  // Simpan hasil edit hari libur
  $('#data_table').on('click', '.saveHariLibur', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var row = $(this).closest('tr');
    var id = $(this).data('id');
    var newTanggal = row.find('.input-tanggal').val();
    var newKeterangan = row.find('.input-keterangan').val();
    $.ajax({
      url: '/hari-libur/' + id,
      method: 'PUT',
      data: {
        tanggal: newTanggal,
        keterangan: newKeterangan,
        _token: '{{ csrf_token() }}'
      },
      success: function(response) {
        if(response.success) {
          // Update kolom Tanggal
          row.find('td').eq(2).text(newTanggal);
          // Update kolom Keterangan
          row.find('td').eq(3).text(newKeterangan);
          
          // Update kolom Aksi
          var editIcon = '<a href="#" class="editHariLibur" data-id="'+ id +'" data-tanggal="'+ newTanggal +'" data-keterangan="'+ newKeterangan +'">'+
                        '<i class="ik ik-edit f-16 mr-15 text-green"></i></a>';
          var deleteIcon = '<a href="#" class="hapusHariLibur" data-id="'+ id +'">'+
                            '<i class="ik ik-trash-2 f-16 text-red"></i></a>';
          row.find('td').eq(4).html(editIcon + ' ' + deleteIcon);
          
          // Simpan data original dan hapus status editing
          row.data('original', { tanggal: newTanggal, keterangan: newKeterangan, aksi: editIcon + ' ' + deleteIcon });
          row.removeClass('editing');
          currentlyEditing = null;
        }
      },
      error: function() {
        showBootstrapAlert('Terjadi kesalahan saat memperbarui data.');
      }
    });
  });

  // Batalkan edit hari libur
  $('#data_table').on('click', '.cancelHariLibur', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var row = $(this).closest('tr');
    var originalData = row.data('original');
    // Kembalikan nilai Tanggal (kolom index 2)
    row.find('td').eq(2).text(originalData.tanggal);
    
    // Kembalikan nilai Keterangan (kolom index 3)
    row.find('td').eq(3).text(originalData.keterangan);
    
    // Kembalikan kolom Aksi (kolom index 4)
    row.find('td').eq(4).html(originalData.aksi);
    row.removeClass('editing');
    currentlyEditing = null;
  });

  // --- Hapus Data ---
  // Hapus data tunggal
  $('#data_table').on('click', '.hapusHariLibur', function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (currentlyEditing) {
      showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
      return;
    }
    deleteMode = 'single';
    deleteId = $(this).data('id');
    $('#deleteConfirmModal').modal('show');
  });

  // Tombol Hapus Terpilih (massal)
  $('#deleteSelectedBtn').on('click', function(e) {
    e.preventDefault();
    if (currentlyEditing) {
      showBootstrapAlert('Selesaikan pengeditan baris yang sedang aktif terlebih dahulu.');
      return;
    }
    deleteMode = 'mass';
    deleteIds = [];
    $('.select-item:checked').each(function() {
      deleteIds.push($(this).val());
    });
    if(deleteIds.length === 0) {
      showBootstrapAlert('Pilih minimal satu data untuk dihapus.');
      return;
    }
    $('#deleteConfirmModal').modal('show');
  });

  // Tombol konfirmasi hapus (baik single maupun massal)
  $('#confirmDeleteBtn').on('click', function() {
    if(deleteMode === 'single' && deleteId) {
      $.ajax({
        url: '/hari-libur/' + deleteId,
        type: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
          if(response.success) {
            var row = $('#data_table').find('a.hapusHariLibur[data-id="'+ deleteId +'"]').closest('tr');
            row.fadeOut(400, "swing", function() {
              table.row(row).remove().draw(false);
              $('#selectAll').prop('checked', false);
              toggleButtonVisibility();
            });
          } else {
            showBootstrapAlert('Gagal menghapus data.');
          }
        },
        error: function() {
          showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
        }
      });
    } else if(deleteMode === 'mass' && deleteIds.length > 0) {
      $.ajax({
        url: '/hari-libur/hapus-massal',
        type: 'POST',
        data: {
          ids: deleteIds,
          _token: '{{ csrf_token() }}'
        },
        success: function(response) {
          if(response.success) {
            $('.select-item:checked').each(function() {
              var row = $(this).closest('tr');
              row.fadeOut(400, "swing", function() {
                table.row(row).remove().draw(false);
              });
            });
            $('#selectAll').prop('checked', false);
            $('.select-item').prop('checked', false);
            toggleButtonVisibility();
          } else {
            showBootstrapAlert('Gagal menghapus data.');
          }
        },
        error: function() {
          showBootstrapAlert('Terjadi kesalahan saat menghapus data.');
        }
      });
    }
    $('#deleteConfirmModal').modal('hide');
  });
});
</script>

<style>
  div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 12px;
    margin-bottom: 8px;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #fdfdfd !important;
    color: #212529 !important;
    border: 1px solid #e9e9e9 !important;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    margin-top: 15px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
    color: #212529 !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
    color: #212529 !important;
  }
  .alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    max-width: 350px;
  }
  .custom-alert {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    padding: 10px 15px;
  }
  /* Atur lebar kolom centang, nomor, dan aksi */
  #data_table th:first-child,
  #data_table td:first-child {
    width: 80px !important;
    text-align: center !important;
    padding: 5px !important;
  }
  #data_table th:nth-child(2),
  #data_table td:nth-child(2) {
    width: 40px !important;
  }
  #data_table th:nth-child(5),
  #data_table td:nth-child(5) {
    width: 80px !important;
  }
  #data_table th:last-child,
  #data_table td:last-child {
    width: 140px !important;
    text-align: center !important;
  }
</style>
@endsection