<div class="modal fade" id="addJournalModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form id="addJournalForm">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title"><i class="fas fa-plus-circle mr-2"></i> Add Journal Entry</h5>
          <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Journal No</label>
              <input type="text" id="journal_no" name="journal_no" class="form-control" readonly>
            </div>
            <div class="form-group col-md-6">
              <label>Date</label>
              <input type="date" name="journal_date" class="form-control" value="<?= date('Y-m-d') ?>" required>
            </div>
          </div>
          <div class="form-group">
            <label>Description</label>
            <textarea name="description" class="form-control" rows="3" placeholder="Enter journal description..."></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
$('#addJournalModal').on('show.bs.modal', function(){
  $.get('ajax/journal/generate_no.php', function(res){
    $('#journal_no').val(res);
  });
});
</script>
