@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 Tetap</h5>
              <span>Manajemen Data Hari Libur Tetap</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 Tetap</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <!-- Tabel Hari Libur Tetap -->
    <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 Tetap</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 Tetap -->
              <button type="button" class="btn btn-primary" id="btnTambahHariLiburTetap" data-toggle="modal" data-target="#modalTambahHariLiburTetap">
                <i class="ik ik-plus"></i> Tambah Hari Libur Tetap
              </button>
            </div>
          </div>
          <div class="card-body">
            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
              <thead>
                <tr>
                  <th><input type="checkbox" id="selectAll"></th>
                  <th>No</th>
                  <th>Nama Hari</th>
                  <th>Kode Hari</th>
                  <th>Status</th>
                  <th>Aksi</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($hariLiburTetap as $item)
                <tr>
                  <td><input type="checkbox" class="select-item" value="{{ $item->id }}"></td>
                  <td>{{ $loop->iteration }}</td>
                  <td>{{ $item->nama_hari }}</td>
                  <td>{{ $item->kode_hari }}</td>
                  <td>
                    <span class="badge badge-{{ $item->status == 'Y' ? 'success' : 'danger' }}">
                      {{ $item->status == 'Y' ? 'Aktif' : 'Tidak Aktif' }}
                    </span>
                  </td>
                  <td>
                    <a href="#" class="editHariLiburTetap" 
                       data-id="{{ $item->id }}" 
                       data-nama_hari="{{ $item->nama_hari }}"
                       data-kode_hari="{{ $item->kode_hari }}"
                       data-status="{{ $item->status }}">
                      <i class="ik ik-edit f-16 mr-15 text-green"></i>
                    </a>
                    <a href="#" class="hapusHariLiburTetap" 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 Tetap -->
    <div class="modal fade" id="modalTambahHariLiburTetap" 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 Tetap</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
          </div>
          <!-- FORM TAMBAH -->
          <form action="{{ route('hariliburtetap.store') }}" method="POST" id="formTambahHariLiburTetap">
            @csrf
            <div class="modal-body">
              <div class="form-group">
                <label>Nama Hari</label>
                <input type="text" name="nama_hari" id="nama_hari" class="form-control" required
                       oninvalid="this.setCustomValidity('Nama hari tidak boleh kosong.')"
                       oninput="this.setCustomValidity('')">
                <span id="namaHariError" class="text-danger"></span>
              </div>
              <div class="form-group">
                <label>Kode Hari</label>
                <input type="number" name="kode_hari" id="kode_hari" class="form-control" required
                       oninvalid="this.setCustomValidity('Kode hari tidak boleh kosong.')"
                       oninput="this.setCustomValidity('')">
                <span id="kodeHariError" class="text-danger"></span>
              </div>
              <div class="form-group">
                <label>Status</label>
                <select name="status" id="status" class="form-control" required>
                  <option value="Y">Aktif</option>
                  <option value="T">Tidak Aktif</option>
                </select>
              </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 -->
        </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();
      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 submit form tambah Hari Libur Tetap (AJAX unique check)
  // ========================================================================
  $('#formTambahHariLiburTetap').on('submit', function(e) {
    e.preventDefault();
    var form = this;
    var nama_hari = $(form).find('input[name="nama_hari"]').val();
    
    $.ajax({
        url: '{{ route("hariliburtetap.check-unique") }}',
        method: 'GET',
        data: { nama_hari: nama_hari },
        success: function(response) {
          if (response.exists) {
            showBootstrapAlert('Hari libur tetap dengan nama tersebut sudah ada, silahkan pilih yang lain.');
          } else {
            $('#formTambahHariLiburTetap').off('submit');
            form.submit();
          }
        },
        error: function() {
          showBootstrapAlert('Terjadi kesalahan saat memeriksa keunikan hari libur tetap.');
        }
    });
  });

  // --- Fitur Centang & Toggle Tombol Hapus Massal ---
  function toggleButtonVisibility() {
    if ($('.select-item:checked').length > 0) {
      $('#btnTambahHariLiburTetap').hide();
      $('#deleteSelectedBtn').show();
    } else {
      $('#deleteSelectedBtn').hide();
      $('#btnTambahHariLiburTetap').show();
    }
  }

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

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

  // --- Inline Edit ---
  $('#data_table').on('click', '.editHariLiburTetap', 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 = {
      nama_hari: row.find('td').eq(2).text().trim(),
      kode_hari: row.find('td').eq(3).text().trim(),
      status: row.find('td').eq(4).text().trim(),
      aksi: row.find('td').eq(5).html()
    };
    row.data('original', originalData);

    var id = $(this).data('id');
    var nama_hari = $(this).data('nama_hari');
    var kode_hari = $(this).data('kode_hari');
    var status = $(this).data('status');

    var namaHariHtml = '<input type="text" class="form-control input-nama_hari" value="' + nama_hari + '" required oninvalid="this.setCustomValidity(\'Nama hari tidak boleh kosong.\')" oninput="this.setCustomValidity(\'\')">';
    row.find('td').eq(2).html(namaHariHtml);

    var kodeHariHtml = '<input type="number" class="form-control input-kode_hari" value="' + kode_hari + '" required oninvalid="this.setCustomValidity(\'Kode hari tidak boleh kosong.\')" oninput="this.setCustomValidity(\'\')">';
    row.find('td').eq(3).html(kodeHariHtml);

    var selectHtml = '<select class="form-control input-status">' +
                     '<option value="Y" ' + (status === 'Y' ? 'selected' : '') + '>Aktif</option>' +
                     '<option value="T" ' + (status === 'T' ? 'selected' : '') + '>Tidak Aktif</option>' +
                     '</select>';
    row.find('td').eq(4).html(selectHtml);

    var aksiHtml = '<a href="#" class="saveHariLiburTetap" data-id="' + id + '"><i class="ik ik-check text-success" style="font-size: 18px;"></i></a> ' +
                   '<a href="#" class="cancelHariLiburTetap"><i class="ik ik-x text-danger" style="font-size: 18px; margin-left:12px;"></i></a>';
    row.find('td').eq(5).html(aksiHtml);

    row.find('.input-nama_hari').trigger('focus');
  });

  $('#data_table').on('click', '.saveHariLiburTetap', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var row = $(this).closest('tr');
    var id = $(this).data('id');
    var newNamaHari = row.find('.input-nama_hari').val();
    var newKodeHari = row.find('.input-kode_hari').val();
    var newStatus = row.find('.input-status').val();
    $.ajax({
      url: '/hari-libur-tetap/' + id,
      method: 'PUT',
      data: {
        nama_hari: newNamaHari,
        kode_hari: newKodeHari,
        status: newStatus,
        _token: '{{ csrf_token() }}'
      },
      success: function(response) {
        if(response.success) {
          row.find('td').eq(2).text(newNamaHari);
          row.find('td').eq(3).text(newKodeHari);
          var statusLabel = newStatus === 'Y' ? 'Aktif' : 'Tidak Aktif';
          var badgeClass = newStatus === 'Y' ? 'success' : 'danger';
          row.find('td').eq(4).html('<span class="badge badge-' + badgeClass + '">' + statusLabel + '</span>');
          
          var editIcon = '<a href="#" class="editHariLiburTetap" data-id="'+ id +'" data-nama_hari="'+ newNamaHari +'" data-kode_hari="'+ newKodeHari +'" data-status="'+ newStatus +'">'+
                         '<i class="ik ik-edit f-16 mr-15 text-green"></i></a>';
          var deleteIcon = '<a href="#" class="hapusHariLiburTetap" data-id="'+ id +'">'+
                           '<i class="ik ik-trash-2 f-16 text-red"></i></a>';
          row.find('td').eq(5).html(editIcon + ' ' + deleteIcon);
          
          row.data('original', { nama_hari: newNamaHari, kode_hari: newKodeHari, status: newStatus, aksi: editIcon + ' ' + deleteIcon });
          row.removeClass('editing');
          currentlyEditing = null;
        }
      },
      error: function() {
        showBootstrapAlert('Terjadi kesalahan saat memperbarui data.');
      }
    });
  });

  $('#data_table').on('click', '.cancelHariLiburTetap', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var row = $(this).closest('tr');
    var originalData = row.data('original');
    row.find('td').eq(3).text(originalData.nama_hari);
    row.find('td').eq(4).text(originalData.kode_hari);
    row.find('td').eq(5).html('<span class="badge badge-' + (originalData.status === 'Y' ? 'success' : 'danger') + '">' + (originalData.status === 'Y' ? 'Aktif' : 'Tidak Aktif') + '</span>');
    row.find('td').eq(6).html(originalData.aksi);
    row.removeClass('editing');
    currentlyEditing = null;
  });

  // --- Hapus Data ---
  $('#data_table').on('click', '.hapusHariLiburTetap', 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');
  });

  $('#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');
  });

  $('#confirmDeleteBtn').on('click', function() {
    if(deleteMode === 'single' && deleteId) {
      $.ajax({
        url: '/hari-libur-tetap/' + deleteId,
        type: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
          if(response.success) {
            var row = $('#data_table').find('a.hapusHariLiburTetap[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-tetap/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;
  }
  #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(6),
  #data_table td:nth-child(6) {
    width: 80px !important;
  }
  #data_table th:last-child,
  #data_table td:last-child {
    width: 140px !important;
    text-align: center !important;
  }
</style>
@endsection