@extends('layouts.main')
@section('title')
  Libur Nasional |
@endsection
@section('css')
  <style>

  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Libur Nasional</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item">Dashboard</li>
    <li class="breadcrumb-item">Data Master</li>
    <li class="breadcrumb-item active" aria-current="page">Libur Nasional</li>
  </ol>
  <div class="card card-table mg-t-50">
    <div class="card-header">
      <div class="row">
        <div class="col-md-8">
          <form action="" method="get">
            <div class="search-form">
              <input type="search" class="form-control" autocomplete="off" id="search" placeholder="Cari Libur Nasional">
              <button class="btn" type="submit"><i data-feather="search"></i></button>
            </div>
          </form>
        </div>
        <div class="col-md-4">
          <div class="pull-right">
            <button class="btn btn-primary" onclick="add_libur_nasional()">Tambah</button>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <table class="table table-vertical-middle">
        <thead>
          <tr>
            <th width="80px">No</th>
            <th width="150px">Tanggal</th>
            <th>Libur Nasional</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach ($data['libur_nasional'] as $key => $value)
            <tr>
              <td>{{$key+1}}</td>
              <td>{{GlobalHelper::tgl_indo($value->tanggal)}}</td>
              <td>{{$value->libur_nasional}}</td>
              <td style="width:1px;white-space:nowrap;">
                <a href="javascript:;" onclick="edit_libur_nasional({{$value->id}})" class="button green ripple-effect ico">
                  <i data-feather="edit" class="tx-white-8 wd-20 ht-20 "></i>
                </a>
                <a href="javascript:;" onclick="confirmDelete({{$value->id}})" class="button red ripple-effect ico">
                  <i data-feather="trash" class="tx-white-8 wd-20 ht-20 "></i>
                </a>
                <form action="{{ route('proses_libur_nasional') }}" method="post" id="hapus{{$value->id}}">
                  {{ csrf_field() }}
                  <input type="hidden" name="id" value="{{$value->id}}">
                  <input type="hidden" name="action" value="delete">
                </form>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal fade" id="form-libur-nasional" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{ route('proses_libur_nasional') }}" method="post" enctype="multipart/form-data" data-parsley-validate >
          {{ csrf_field() }}
          <div class="modal-body">
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>Tanggal</label>
                  <input type="text" class="form-control datepicker" autocomplete="off" id="tanggal" name="tanggal" required >
                </div>
              </div>
              <div class="col-md-8">
                <div class="form-group">
                  <label>Libur Nasional</label>
                  <input type="text" class="form-control" id="libur_nasional" name="libur_nasional" required >
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>Keterangan</label>
              <textarea class="form-control" id="keterangan" name="keterangan"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <input type="hidden" name="id" id="id" >
            <button type="button" class="btn btn-dark" data-dismiss="modal">Batalkan</button>
            <button type="submit" class="btn btn-primary" name="action" id="action">Simpan</button>
          </div>
        </form>
      </div>
    </div>
  </div>

@endsection
@section('js')
  <script>
  table = $('#datatable').DataTable({
    "ordering": false,
    "bLengthChange": false,
    "paging": false,
    "bInfo" : false
  });

  $('#search').keyup(function(){
    table.search($(this).val()).draw() ;
  });

  function add_libur_nasional(){
    $('#tanggal').val('');
    $('#libur_nasional').val('');
    $('#keterangan').val('');
    $('#id').val(0);
    $('#action').val('add');
    $('#title').html('Tambah Libur Nasional');
    $('#form-libur-nasional').modal('show');
  }

  function edit_libur_nasional(id){
    $.get("{{ url('api/find_libur_nasional') }}/"+id, function (result) {
      $('#tanggal').val(result.tanggal);
      $('#libur_nasional').val(result.libur_nasional);
      $('#keterangan').val(result.keterangan);
      $('#id').val(id);
      $('#action').val('edit');
      $('#title').html('Edit Libur Nasional');
      $('#form-libur-nasional').modal('show');
    });
  }
  </script>
@endsection